mathdoodle · August 29, 2015 14:26
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "7d3c3b9e-5895-4f07-b2c4-dd35a4055712",
  "description": "NODE",
  "dependencies": {
    "DomReady": "latest",
    "davinci-eight": "latest",
    "davinci-blade": "1.1.1"
  },
  "operatorOverloading": true
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
  </head>
  <body>
    <canvas id='canvas' width='600' height='600'>
      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);
  }
 });
 var EIGHT = d8;
 function main() {

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

  var tscale = 5 * 24 * 60 * 60; // about 432,000!
  var omegaEarth = tscale * 2 * Math.PI * (1/(24*60*60*365.25));
  var omegaMoon = tscale * 2 * Math.PI * (1/(24*60*60*27));
  var e1 = blade.e3ga.e1;
  var e2 = blade.e3ga.e2;
  var e3 = blade.e3ga.e3;

  var args = {wireFrame: false};

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

  var ambients = EIGHT.uniforms([view, lights]);
  var earthRadius = 10;
  var moonRadius = 3;

  var mesh = new EIGHT.SphereBuilder(args).buildMesh();
  var sunModel = new EIGHT.Node();
  var program = EIGHT.smartProgram(mesh.getAttributeMetaInfos(),[sunModel.getUniformMetaInfos(), ambients.getUniformMetaInfos()]);
  var sun = EIGHT.drawableModel(mesh, program, sunModel);
  sun.model.color = EIGHT.Color.fromRGB(0.6, 0.6, 0);
  var earthModel = new EIGHT.Node();
  var earth = EIGHT.drawableModel(mesh, program, earthModel);
  earth.model.position.x = earthRadius;
  earth.model.color = EIGHT.Color.fromRGB(0.2, 0.5, 0.8);
  var moonModel = new EIGHT.Node();
  var moon = EIGHT.drawableModel(mesh, program, moonModel);
  moon.model.position.x = moonRadius;
  moon.model.color = EIGHT.Color.fromRGB(0.6, 0.6, 0.6);

  // world now sounds a bit silly.
  world.add(sun);
  world.add(earth);
  world.add(moon);
  
  moon.model.setParent(earth.model);
  earth.model.setParent(sun.model);

  //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) => {
    // We should assume we need performance in all cases. 
    earth.model.position.copy(earthRadius * (Math.cos(omegaEarth*time) * e1 + Math.sin(omegaEarth * time) * e2));
    moon.model.position.copy(moonRadius * (Math.cos(omegaMoon*time) * e1 + Math.sin(omegaMoon * time) * e2));
    renderer.render(world, [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": "7d3c3b9e-5895-4f07-b2c4-dd35a4055712",
	"description": "NODE",
	"dependencies": {
	"DomReady": "latest",
	"davinci-eight": "latest",
	"davinci-blade": "1.1.1"
	},
	"operatorOverloading": true
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	</head>
	<body>
	<canvas id='canvas' width='600' height='600'>
	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);
	}
	});
	var EIGHT = d8;
	function main() {

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

	var tscale = 5 * 24 * 60 * 60; // about 432,000!
	var omegaEarth = tscale * 2 * Math.PI * (1/(246060*365.25));
	var omegaMoon = tscale * 2 * Math.PI * (1/(246060*27));
	var e1 = blade.e3ga.e1;
	var e2 = blade.e3ga.e2;
	var e3 = blade.e3ga.e3;

	var args = {wireFrame: false};

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

	var ambients = EIGHT.uniforms([view, lights]);
	var earthRadius = 10;
	var moonRadius = 3;

	var mesh = new EIGHT.SphereBuilder(args).buildMesh();
	var sunModel = new EIGHT.Node();
	var program = EIGHT.smartProgram(mesh.getAttributeMetaInfos(),[sunModel.getUniformMetaInfos(), ambients.getUniformMetaInfos()]);
	var sun = EIGHT.drawableModel(mesh, program, sunModel);
	sun.model.color = EIGHT.Color.fromRGB(0.6, 0.6, 0);
	var earthModel = new EIGHT.Node();
	var earth = EIGHT.drawableModel(mesh, program, earthModel);
	earth.model.position.x = earthRadius;
	earth.model.color = EIGHT.Color.fromRGB(0.2, 0.5, 0.8);
	var moonModel = new EIGHT.Node();
	var moon = EIGHT.drawableModel(mesh, program, moonModel);
	moon.model.position.x = moonRadius;
	moon.model.color = EIGHT.Color.fromRGB(0.6, 0.6, 0.6);

	// world now sounds a bit silly.
	world.add(sun);
	world.add(earth);
	world.add(moon);

	moon.model.setParent(earth.model);
	earth.model.setParent(sun.model);

	//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) => {
	// We should assume we need performance in all cases.
	earth.model.position.copy(earthRadius * (Math.cos(omegaEarthtime) e1 + Math.sin(omegaEarth * time) * e2));
	moon.model.position.copy(moonRadius * (Math.cos(omegaMoontime) e1 + Math.sin(omegaMoon * time) * e2));
	renderer.render(world, [ambients]);
	}).start();
	}
	body {
	background-color: white;
	margin: 0;
	}
	canvas {
	background-color: black;
	position: absolute;
	width: 100%;
	height: 100%;
	}