mathdoodle · August 2, 2015 19:57
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "a755ab00-4c35-46ac-a461-62e1c36c5eba",
  "description": "Doodle 1",
  "dependencies": {
    "DomReady": "latest",
    "davinci-blade": "1.1.1",
    "davinci-eight": "latest"
  },
  "operatorOverloading": true
 }
diff --git a/extras.ts b/extras.ts
 // This is my library code.
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <script id='vs' type='x-shader/x-vertex'>
      attribute vec3 aVertexPosition;
      attribute vec3 aVertexNormal;
      uniform vec3 uColor;
      uniform mat4 uModelMatrix;
      uniform mat3 uNormalMatrix;
      uniform mat4 uViewMatrix;
      uniform mat4 uProjectionMatrix;
      uniform vec3 uAmbientLight;
      uniform vec3 uDirectionalLightColor;
      uniform vec3 uDirectionalLightDirection;
      varying highp vec4 vColor;
      varying highp vec3 vLight;
      void main(void) {
        gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
        vColor = vec4(uColor, 1.0);
        vec3 L = normalize(uDirectionalLightDirection);
        vec3 N = normalize(uNormalMatrix * aVertexNormal);
        float cosineFactor = max(dot(N,L), 0.0);
        vLight = uAmbientLight + cosineFactor * uDirectionalLightColor;
      }
    </script>
    <script id='fs' type='x-shader/x-fragment'>
      varying highp vec4 vColor;
      varying highp vec3 vLight;
      void main(void) {
        gl_FragColor = vec4(vColor.xyz * vLight, vColor.a);
      }
    </script>
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <script>
    // CODE-MARKER
    </script>
    <canvas id='my-canvas'>
      Your browser does not support the canvas element.
    </canvas>
  </body>
 </html>
diff --git a/script.ts b/script.ts
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    console.error(e);
  }
 });

 var e1 = blade.e3ga.e1;
 var e2 = blade.e3ga.e2;
 var e3 = blade.e3ga.e3;

 /**
 * The angle of tilt of the precessing vector.
 */
 var tiltAngle = 45 * Math.PI / 180;
 var S = Math.cos(tiltAngle / 2) - (e2 ^ e1) * Math.sin(tiltAngle / 2);
 var B = e3 ^ e1;
 var T = 4;
 var f = 1 / T;
 var omega = 2 * Math.PI * f;

 function main() {

  var scene = EIGHT.drawList();
  var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var renderer = EIGHT.webGLRenderer(canvas);
  renderer.clearColor(0.2, 0.2, 0.2, 1.0);
  var monitor = EIGHT.contextMonitor(canvas).addContextUser(renderer).start();

  var perspective = EIGHT.perspective().setAspect(canvas.clientWidth / canvas.clientHeight).setEye(e1 + 3.0 * e3);
  var aLight = new EIGHT.AmbientLight({color: EIGHT.Color.fromRGB(0.3, 0.3, 0.3)});
  var dLight = new EIGHT.DirectionalLight({color: EIGHT.Color.fromRGB(0.7, 0.7, 0.7), direction: new EIGHT.Vector3([2, 3, 5])});

  var ambients = EIGHT.uniforms([perspective, aLight, dLight]);

  var mesh = new EIGHT.BoxBuilder().setWidth(0.5).setHeight(0.5).setDepth(0.5).buildMesh();
  var model = new EIGHT.Node();
  var shaders = EIGHT.smartProgram(mesh.getAttribMeta(), [model.getUniformMeta(), ambients.getUniformMeta()]);
  var cube = EIGHT.drawableModel(mesh, shaders, model);
  //console.log(cube.shaders.vertexShader);
  //console.log(cube.shaders.fragmentShader);
  cube.model.color = EIGHT.Color.fromRGB(1, 1, 0);
  scene.add(cube);

  var arrowMesh = new EIGHT.ArrowBuilder().setAxis(e2).buildMesh();
  var arrow = EIGHT.drawableModel(arrowMesh, EIGHT.shaderProgramFromScripts('vs', 'fs'), new EIGHT.Node())
  arrow.model.color = EIGHT.Color.fromRGB(1, 0, 0);
  arrow.model.position.copy(e1);
  scene.add(arrow);

  var sphere = EIGHT.sphere(ambients, {radius: 0.25});
  sphere.model.color = EIGHT.Color.fromRGB(0.4, 0.4, 1.0);
  scene.add(sphere);

  var vortex = EIGHT.vortex(ambients);
  vortex.model.color = EIGHT.Color.fromRGB(0.0, 1.0, 0.0);
  scene.add(vortex);

  EIGHT.animation((time: number) => {
    var theta = omega * time;
    // simple harmonic motion
    cube.model.position.copy(1.2 * Math.sin(theta) * e2);

    // precession
    var R = Math.cos(theta / 2) - B * Math.sin(theta / 2)
    arrow.model.attitude.copy(R * S * ~R);

    // orbit
    sphere.model.position.copy(2 * Math.cos(theta) * e1 - Math.sin(theta) * (e3 - 0.5 * e2));

    renderer.render(scene, ambients);
  }).start();
 }
diff --git a/style.less b/style.less
 body { margin: 0; }
 canvas { width: 100%; height: 100% }
	{
	"uuid": "a755ab00-4c35-46ac-a461-62e1c36c5eba",
	"description": "Doodle 1",
	"dependencies": {
	"DomReady": "latest",
	"davinci-blade": "1.1.1",
	"davinci-eight": "latest"
	},
	"operatorOverloading": true
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<script id='vs' type='x-shader/x-vertex'>
	attribute vec3 aVertexPosition;
	attribute vec3 aVertexNormal;
	uniform vec3 uColor;
	uniform mat4 uModelMatrix;
	uniform mat3 uNormalMatrix;
	uniform mat4 uViewMatrix;
	uniform mat4 uProjectionMatrix;
	uniform vec3 uAmbientLight;
	uniform vec3 uDirectionalLightColor;
	uniform vec3 uDirectionalLightDirection;
	varying highp vec4 vColor;
	varying highp vec3 vLight;
	void main(void) {
	gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
	vColor = vec4(uColor, 1.0);
	vec3 L = normalize(uDirectionalLightDirection);
	vec3 N = normalize(uNormalMatrix * aVertexNormal);
	float cosineFactor = max(dot(N,L), 0.0);
	vLight = uAmbientLight + cosineFactor * uDirectionalLightColor;
	}
	</script>
	<script id='fs' type='x-shader/x-fragment'>
	varying highp vec4 vColor;
	varying highp vec3 vLight;
	void main(void) {
	gl_FragColor = vec4(vColor.xyz * vLight, vColor.a);
	}
	</script>
	<!-- SCRIPTS-MARKER -->
	</head>
	<body>
	<script>
	// CODE-MARKER
	</script>
	<canvas id='my-canvas'>
	Your browser does not support the canvas element.
	</canvas>
	</body>
	</html>
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	console.error(e);
	}
	});

	var e1 = blade.e3ga.e1;
	var e2 = blade.e3ga.e2;
	var e3 = blade.e3ga.e3;

	/**
	* The angle of tilt of the precessing vector.
	*/
	var tiltAngle = 45 * Math.PI / 180;
	var S = Math.cos(tiltAngle / 2) - (e2 ^ e1) * Math.sin(tiltAngle / 2);
	var B = e3 ^ e1;
	var T = 4;
	var f = 1 / T;
	var omega = 2 * Math.PI * f;

	function main() {

	var scene = EIGHT.drawList();
	var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var renderer = EIGHT.webGLRenderer(canvas);
	renderer.clearColor(0.2, 0.2, 0.2, 1.0);
	var monitor = EIGHT.contextMonitor(canvas).addContextUser(renderer).start();

	var perspective = EIGHT.perspective().setAspect(canvas.clientWidth / canvas.clientHeight).setEye(e1 + 3.0 * e3);
	var aLight = new EIGHT.AmbientLight({color: EIGHT.Color.fromRGB(0.3, 0.3, 0.3)});
	var dLight = new EIGHT.DirectionalLight({color: EIGHT.Color.fromRGB(0.7, 0.7, 0.7), direction: new EIGHT.Vector3([2, 3, 5])});

	var ambients = EIGHT.uniforms([perspective, aLight, dLight]);

	var mesh = new EIGHT.BoxBuilder().setWidth(0.5).setHeight(0.5).setDepth(0.5).buildMesh();
	var model = new EIGHT.Node();
	var shaders = EIGHT.smartProgram(mesh.getAttribMeta(), [model.getUniformMeta(), ambients.getUniformMeta()]);
	var cube = EIGHT.drawableModel(mesh, shaders, model);
	//console.log(cube.shaders.vertexShader);
	//console.log(cube.shaders.fragmentShader);
	cube.model.color = EIGHT.Color.fromRGB(1, 1, 0);
	scene.add(cube);

	var arrowMesh = new EIGHT.ArrowBuilder().setAxis(e2).buildMesh();
	var arrow = EIGHT.drawableModel(arrowMesh, EIGHT.shaderProgramFromScripts('vs', 'fs'), new EIGHT.Node())
	arrow.model.color = EIGHT.Color.fromRGB(1, 0, 0);
	arrow.model.position.copy(e1);
	scene.add(arrow);

	var sphere = EIGHT.sphere(ambients, {radius: 0.25});
	sphere.model.color = EIGHT.Color.fromRGB(0.4, 0.4, 1.0);
	scene.add(sphere);

	var vortex = EIGHT.vortex(ambients);
	vortex.model.color = EIGHT.Color.fromRGB(0.0, 1.0, 0.0);
	scene.add(vortex);

	EIGHT.animation((time: number) => {
	var theta = omega * time;
	// simple harmonic motion
	cube.model.position.copy(1.2 * Math.sin(theta) * e2);

	// precession
	var R = Math.cos(theta / 2) - B * Math.sin(theta / 2)
	arrow.model.attitude.copy(R * S * ~R);

	// orbit
	sphere.model.position.copy(2 * Math.cos(theta) * e1 - Math.sin(theta) * (e3 - 0.5 * e2));

	renderer.render(scene, ambients);
	}).start();
	}