mathdoodle · August 29, 2015 14:25
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "e66e478c-1c4a-4a33-a334-b7400c7f775b",
  "description": "CUBE",
  "dependencies": {
    "DomReady": "latest",
    "davinci-eight": "latest",
    "davinci-blade": "1.1.1"
  },
  "operatorOverloading": true
 }
diff --git a/extras.ts b/extras.ts
 //
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <script>
    // LIBS-MARKER
    </script>
    <script>
    // CODE-MARKER
    </script>
  </head>
  <body>
    <canvas id='canvas' width='400' height='300'>
      Your browser does not support the HTML5 canvas element.
    </canvas>
  </body>
 </html>
diff --git a/script.ts b/script.ts
 // We're using DomReady because we want make sure the canvas element is available.
 // Unfortunately, the DOM being used is implicit. Explicit would be better.
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    console.error(e);
  }
 });

 function main() {

  var scene = EIGHT.drawList();
  var canvas = <HTMLCanvasElement>document.getElementById('canvas');
  var renderer = EIGHT.webGLRenderer(canvas);
  renderer.clearColor(0.3, 0.3, 0.3, 1.0);
  var monitor = EIGHT.contextMonitor(canvas, {antialias: true}).addContextUser(renderer).start();
  var DIFFUSE = EIGHT.Color.fromRGB(0.7, 0.7, 0.7);

  var T = 4;
  var f = 1 / T;
  var omega = 2 * Math.PI * f;
  var e1 = blade.e3ga.e1;
  var e2 = blade.e3ga.e2;
  var e3 = blade.e3ga.e3;

  var perspective = EIGHT.perspective().setAspect(canvas.clientWidth / canvas.clientHeight).setEye(1 * 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: DIFFUSE, direction: new EIGHT.Vector3([2, 3, 5])});
  var lights = EIGHT.uniforms([aLight, dLight]);

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

  var mesh = new EIGHT.BoxBuilder().buildMesh();
  var model = new EIGHT.Node();
  var shaders = EIGHT.smartProgram(mesh.getAttribMeta(),[model.getUniformMeta(), ambients.getUniformMeta()]);
  var shape = EIGHT.drawableModel(mesh, shaders, model);
  shape.model.color = EIGHT.Color.fromRGB(1, 1, 0);
  console.log(shape.shaders.vertexShader);
  console.log(shape.shaders.fragmentShader);

  scene.add(shape);

  var theta = 45 * Math.PI / 180;
  var S = Math.cos(theta/2) - (e2 ^ e1) * Math.sin(theta/2);
  var B = e3 ^ e1;
  
  EIGHT.animation((time: number) => {
    // simple harmonic motion
    shape.model.position.copy(1.2 * Math.sin(omega * time) * e2);
    // precession
    var R = Math.cos(omega * time / 2) - B * Math.sin(omega * time / 2);
    var attitude = R * S * ~R;
    //shape.model.attitude.copy(attitude);
    renderer.render(scene, ambients);
  }).start();
 }
diff --git a/style.less b/style.less
 body {
  background-color: white;
  margin: 0;
 }
 canvas { 
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
 }
	{
	"uuid": "e66e478c-1c4a-4a33-a334-b7400c7f775b",
	"description": "CUBE",
	"dependencies": {
	"DomReady": "latest",
	"davinci-eight": "latest",
	"davinci-blade": "1.1.1"
	},
	"operatorOverloading": true
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<script>
	// LIBS-MARKER
	</script>
	<script>
	// CODE-MARKER
	</script>
	</head>
	<body>
	<canvas id='canvas' width='400' height='300'>
	Your browser does not support the HTML5 canvas element.
	</canvas>
	</body>
	</html>
	// We're using DomReady because we want make sure the canvas element is available.
	// Unfortunately, the DOM being used is implicit. Explicit would be better.
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	console.error(e);
	}
	});

	function main() {

	var scene = EIGHT.drawList();
	var canvas = <HTMLCanvasElement>document.getElementById('canvas');
	var renderer = EIGHT.webGLRenderer(canvas);
	renderer.clearColor(0.3, 0.3, 0.3, 1.0);
	var monitor = EIGHT.contextMonitor(canvas, {antialias: true}).addContextUser(renderer).start();
	var DIFFUSE = EIGHT.Color.fromRGB(0.7, 0.7, 0.7);

	var T = 4;
	var f = 1 / T;
	var omega = 2 * Math.PI * f;
	var e1 = blade.e3ga.e1;
	var e2 = blade.e3ga.e2;
	var e3 = blade.e3ga.e3;

	var perspective = EIGHT.perspective().setAspect(canvas.clientWidth / canvas.clientHeight).setEye(1 * 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: DIFFUSE, direction: new EIGHT.Vector3([2, 3, 5])});
	var lights = EIGHT.uniforms([aLight, dLight]);

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

	var mesh = new EIGHT.BoxBuilder().buildMesh();
	var model = new EIGHT.Node();
	var shaders = EIGHT.smartProgram(mesh.getAttribMeta(),[model.getUniformMeta(), ambients.getUniformMeta()]);
	var shape = EIGHT.drawableModel(mesh, shaders, model);
	shape.model.color = EIGHT.Color.fromRGB(1, 1, 0);
	console.log(shape.shaders.vertexShader);
	console.log(shape.shaders.fragmentShader);

	scene.add(shape);

	var theta = 45 * Math.PI / 180;
	var S = Math.cos(theta/2) - (e2 ^ e1) * Math.sin(theta/2);
	var B = e3 ^ e1;

	EIGHT.animation((time: number) => {
	// simple harmonic motion
	shape.model.position.copy(1.2 * Math.sin(omega * time) * e2);
	// precession
	var R = Math.cos(omega * time / 2) - B * Math.sin(omega * time / 2);
	var attitude = R * S * ~R;
	//shape.model.attitude.copy(attitude);
	renderer.render(scene, ambients);
	}).start();
	}
	body {
	background-color: white;
	margin: 0;
	}
	canvas {
	background-color: black;
	position: absolute;
	width: 100%;
	height: 100%;
	}