mathdoodle · August 26, 2015 04:43
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "3036bd28-8e01-457b-8ef9-93b21acfe883",
  "description": "FIELD",
  "dependencies": {
    "DomReady": "latest",
    "davinci-blade": "1.1.1",
    "davinci-eight": "latest",
    "stats": "latest"
  },
  "operatorOverloading": true
 }
diff --git a/extras.ts b/extras.ts
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    console.error(e);
  }
 });

 /**
 * Standard basis vector in the x-axis direction.
 */
 var e1 = blade.e3ga.e1;
 /**
 * Standard basis vector in the y-axis direction.
 */
 var e2 = blade.e3ga.e2;
 /**
 * Standard basis vector in the z-axis direction.
 */
 var e3 = blade.e3ga.e3;

 /**
 * Returns the cosine of a number.
 */
 var cos = blade.universals.cos;
 /**
 * Returns e (the base of natural logarithms) raised to a power.
 */
 var exp = blade.universals.exp;
 /**
 * Returns the sine of a number.
 */
 var sin = blade.universals.sin;

 /**
 * S.I. units of measure.
 */
 var kilogram = blade.e3ga.units.kilogram;
 var meter    = blade.e3ga.units.meter;
 var second   = blade.e3ga.units.second;
 var hertz    = blade.e3ga.units.hertz;
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>
    // LIBS-MARKER
    </script>
    <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
 /**
 * The angle of tilt of the precessing vector.
 */
 var tiltAngle = 45 * Math.PI / 180;
 var S = exp(-(e2 ^ e1) * tiltAngle / 2);
 var B = e3 ^ e1;
 /**
 * The period of the motions in the animation.
 */
 var T = 4 * second;
 /**
 * The frequency of the motions in the animation.
 */
 var f = (1 / T);
 var omega = 2 * Math.PI * f;

 function main() {

  var scene = EIGHT.scene();
  var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var renderer = EIGHT.renderer(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: 2 * e1 + 3 * e2 + 5 * e3});

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

  // Here we let the library try to build shaders to compliment our attribute and uniform variables.
  // We still get to choose the model and the mesh.
  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()]);

  // Here we take control of the shaders, which are scripts in the HTML.
  // This gives us maximum flexibility.
  var arrowMesh = new EIGHT.ArrowBuilder().setAxis(e2).buildMesh();
  var program = EIGHT.shaderProgramFromScripts('vs', 'fs');
  var n = 5;
  for (var i=0; i < n; i++) {
    for (var j=0; j< n; j++) {
      for (var k=0; k< n; k++) {
        var arrow = EIGHT.primitive(arrowMesh, program, new EIGHT.Node())
        arrow.model.color = EIGHT.Color.fromRGB(1, 0, 1);
        //arrow.model.position.copy(e1*(i*2-5)+e2*(j*2-5)+e3*(k*2-5));
        scene.add(arrow);
      }
    }
  }

  var stats = new Stats();
  stats.setMode(0);
  document.body.appendChild(stats.domElement);

  EIGHT.animation((time: number) => {
    stats.begin();
    var theta = omega * (time * second);

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

    renderer.render(scene, ambients);
    stats.end();
  }).start();
 }
diff --git a/style.less b/style.less
 body { margin: 0; }
 canvas { width: 100%; height: 100% }
 #stats { position: absolute; top:0; left: 0 }
	{
	"uuid": "3036bd28-8e01-457b-8ef9-93b21acfe883",
	"description": "FIELD",
	"dependencies": {
	"DomReady": "latest",
	"davinci-blade": "1.1.1",
	"davinci-eight": "latest",
	"stats": "latest"
	},
	"operatorOverloading": true
	}
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	console.error(e);
	}
	});

	/**
	* Standard basis vector in the x-axis direction.
	*/
	var e1 = blade.e3ga.e1;
	/**
	* Standard basis vector in the y-axis direction.
	*/
	var e2 = blade.e3ga.e2;
	/**
	* Standard basis vector in the z-axis direction.
	*/
	var e3 = blade.e3ga.e3;

	/**
	* Returns the cosine of a number.
	*/
	var cos = blade.universals.cos;
	/**
	* Returns e (the base of natural logarithms) raised to a power.
	*/
	var exp = blade.universals.exp;
	/**
	* Returns the sine of a number.
	*/
	var sin = blade.universals.sin;

	/**
	* S.I. units of measure.
	*/
	var kilogram = blade.e3ga.units.kilogram;
	var meter = blade.e3ga.units.meter;
	var second = blade.e3ga.units.second;
	var hertz = blade.e3ga.units.hertz;
	<!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>
	// LIBS-MARKER
	</script>
	<script>
	// CODE-MARKER
	</script>
	<canvas id='my-canvas'>
	Your browser does not support the canvas element.
	</canvas>
	</body>
	</html>
	/**
	* The angle of tilt of the precessing vector.
	*/
	var tiltAngle = 45 * Math.PI / 180;
	var S = exp(-(e2 ^ e1) * tiltAngle / 2);
	var B = e3 ^ e1;
	/**
	* The period of the motions in the animation.
	*/
	var T = 4 * second;
	/**
	* The frequency of the motions in the animation.
	*/
	var f = (1 / T);
	var omega = 2 * Math.PI * f;

	function main() {

	var scene = EIGHT.scene();
	var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var renderer = EIGHT.renderer(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: 2 * e1 + 3 * e2 + 5 * e3});

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

	// Here we let the library try to build shaders to compliment our attribute and uniform variables.
	// We still get to choose the model and the mesh.
	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()]);

	// Here we take control of the shaders, which are scripts in the HTML.
	// This gives us maximum flexibility.
	var arrowMesh = new EIGHT.ArrowBuilder().setAxis(e2).buildMesh();
	var program = EIGHT.shaderProgramFromScripts('vs', 'fs');
	var n = 5;
	for (var i=0; i < n; i++) {
	for (var j=0; j< n; j++) {
	for (var k=0; k< n; k++) {
	var arrow = EIGHT.primitive(arrowMesh, program, new EIGHT.Node())
	arrow.model.color = EIGHT.Color.fromRGB(1, 0, 1);
	//arrow.model.position.copy(e1(i2-5)+e2(j2-5)+e3(k2-5));
	scene.add(arrow);
	}
	}
	}

	var stats = new Stats();
	stats.setMode(0);
	document.body.appendChild(stats.domElement);

	EIGHT.animation((time: number) => {
	stats.begin();
	var theta = omega * (time * second);

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

	renderer.render(scene, ambients);
	stats.end();
	}).start();
	}
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	#stats { position: absolute; top:0; left: 0 }