mathdoodle · September 7, 2016 15:13
diff --git a/README.md b/README.md
diff --git a/GUI.ts b/GUI.ts
 export default class GUI extends dat.GUI {
  constructor(private director: EIGHT.Director) {
    super();
    this.add(this, 'next');
    this.add(this, 'prev');
  }
  next() {
    this.director.forward();
  }
  prev() {
    this.director.backward();
  }
  update(): void {
    
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/[email protected]'></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <canvas id='canvas'></canvas>
    <script>
    // CODE-MARKER
    </script>
    <script>
    System.import('./index.js')
    </script>
  </body>
 </html>
diff --git a/index.ts b/index.ts
 import {e1, e2, e3, zero} from './math';
 import GUI from './GUI';
 import {slide001} from './slides';

 /**
 * Wrapper around the WebGLRenderingContext providing the ContextManager interface.
 */
 const engine = new EIGHT.Engine('canvas')
  .size(500, 500)
  .clearColor(0.1, 0.1, 0.1, 1.0)
  .enable(EIGHT.Capability.DEPTH_TEST)

 /**
 * A collection of objects that can be rendered with a single draw method call.
 */
 const scene = new EIGHT.Scene(engine)

 /**
 * Rendering information that applies to all objects.
 */
 const ambients: EIGHT.Facet[] = []

 /**
 * Provides the viewing point and perspective transformation.
 */
 const camera = new EIGHT.PerspectiveCamera()
 camera.eye.copy(e3).scale(5)
 ambients.push(camera)

 const ambLight = new EIGHT.AmbientLight(EIGHT.Color.white.scale(0.4));
 ambLight.color.scale(1);
 ambients.push(ambLight)

 /**
 * Provides a light color and direction for Lambert shading.
 */
 const dirLight = new EIGHT.DirectionalLight()
 ambients.push(dirLight)

 /**
 * Controls the camera by accumulating mouse movements then moving and rotating the camera.
 */
 const trackball = new EIGHT.TrackballControls(camera, window)
 trackball.subscribe(engine.canvas)
 trackball.noPan = true;

 // Create drawables such as Arrow, Box, Curve, Grid, Sphere, Cylinder.
 // Add them to the scene here...
 const grid = new EIGHT.Grid({engine})
 scene.add(grid)

 const stats = new Stats()
 document.body.appendChild(stats.dom)

 const director = new EIGHT.Director();
 const gui = new GUI(director);

 director.putTarget(camera, 'camera');

 director.add(slide001(engine, scene, director));

 /**
 * Animates the scene.
 */
 const animate = function(timestamp: number) {
  stats.begin()
  engine.clear()

  trackball.update()

  dirLight.direction.copy(camera.look).sub(camera.eye)
  
  gui.update()

  // Manupulate the X (Position) and R (Attitude)
  // properties of your scene objects here...
  director.advance(17);

  scene.draw(ambients)
  stats.end()
  requestAnimationFrame(animate)
 }

 requestAnimationFrame(animate)
diff --git a/math.ts b/math.ts
 export const e1 = EIGHT.Geometric3.e1();
 export const e2 = EIGHT.Geometric3.e2();
 export const e3 = EIGHT.Geometric3.e3();
 export const zero = EIGHT.Geometric3.zero();
diff --git a/package.json b/package.json
 {
  "description": "Slideshow",
  "dependencies": {
    "davinci-eight": "2.308.0",
    "stats.js": "0.16.0",
    "dat-gui": "0.5.0"
  },
  "operatorOverloading": true,
  "name": "copy-of-eight-starter-template",
  "version": "0.1.0",
  "keywords": [
    "EIGHT",
    "EightJS",
    "WebGL",
    "Getting Started",
    "Engine",
    "Scene",
    "PerspectiveCamera",
    "DirectionalLight",
    "TrackballControls",
    "DomReady",
    "HTMLCanvasElement",
    "requestAnimationFrame",
    "Geometric3"
  ]
 }
diff --git a/slides.ts b/slides.ts
 import {e1, e2, e3, zero} from './math';

 export function slide001(engine: EIGHT.Engine, scene: EIGHT.Scene, director: EIGHT.Director): EIGHT.Slide {
  
  const slide = new EIGHT.Slide(director);
  
  slide.target('camera', 'eye').setVector((e3 - 1.1 * e2 + 0.9 * e1).normalize().scale(4), 2000, {
  doneCallback: function() {
  const box = new EIGHT.Box({engine, color: EIGHT.Color.green})
  // scene.add(box);
  box.width = 0.39
  box.height = 0.39
  box.depth = 0.39
  director.putTarget(box, 'box');
  scene.add(box);
  // const refCount = box.release();
  // console.log(`box is being referenced by ${refCount} clients.`)
  },
  undoCallback: function() {
  const box = director.removeTarget('box');
  scene.remove(<any>box);
  // const refCount = box.release();
  // console.log(`box is being referenced by ${refCount} clients.`)
  }
  });
  slide.target('camera', 'up').setVector(e3, 2000);
  slide.target('box', 'X').setWait(3000);
  slide.target('box', 'color').setWait(3000);

  
  slide.target('box', 'color')
  .setWait(1000)
  .setColor(EIGHT.Color.blueviolet, 1000);
  
  slide.target('box', 'X')
  .setWait(1000)
  .setVector(e1, 1000)
  //.setNarrate("The box is at e1.")
  .setWait(1000)
  .setVector(e1+e2, 1000)
  .setNarrate("The box is at e1 + e2.")
  .setWait(1000)
  .setVector(-e1+e2, 1000)
  .setVector(-e1-e2, 1000)
  .setVector(+e1-e2, 1000)
  .setVector(e1, 1000)
  .setVector(zero, 1000);
  
  return slide;
 }
diff --git a/style.css b/style.css
 body { margin: 0; }
 canvas { width: 500px; height: 500px }
 #stats { position: absolute; top: 0; left: 0; }
	export default class GUI extends dat.GUI {
	constructor(private director: EIGHT.Director) {
	super();
	this.add(this, 'next');
	this.add(this, 'prev');
	}
	next() {
	this.director.forward();
	}
	prev() {
	this.director.backward();
	}
	update(): void {

	}
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<script src='https://jspm.io/[email protected]'></script>
	<!-- SHADERS-MARKER -->
	<!-- SCRIPTS-MARKER -->
	</head>
	<body>
	<canvas id='canvas'></canvas>
	<script>
	// CODE-MARKER
	</script>
	<script>
	System.import('./index.js')
	</script>
	</body>
	</html>
	import {e1, e2, e3, zero} from './math';
	import GUI from './GUI';
	import {slide001} from './slides';

	/**
	* Wrapper around the WebGLRenderingContext providing the ContextManager interface.
	*/
	const engine = new EIGHT.Engine('canvas')
	.size(500, 500)
	.clearColor(0.1, 0.1, 0.1, 1.0)
	.enable(EIGHT.Capability.DEPTH_TEST)

	/**
	* A collection of objects that can be rendered with a single draw method call.
	*/
	const scene = new EIGHT.Scene(engine)

	/**
	* Rendering information that applies to all objects.
	*/
	const ambients: EIGHT.Facet[] = []

	/**
	* Provides the viewing point and perspective transformation.
	*/
	const camera = new EIGHT.PerspectiveCamera()
	camera.eye.copy(e3).scale(5)
	ambients.push(camera)

	const ambLight = new EIGHT.AmbientLight(EIGHT.Color.white.scale(0.4));
	ambLight.color.scale(1);
	ambients.push(ambLight)

	/**
	* Provides a light color and direction for Lambert shading.
	*/
	const dirLight = new EIGHT.DirectionalLight()
	ambients.push(dirLight)

	/**
	* Controls the camera by accumulating mouse movements then moving and rotating the camera.
	*/
	const trackball = new EIGHT.TrackballControls(camera, window)
	trackball.subscribe(engine.canvas)
	trackball.noPan = true;

	// Create drawables such as Arrow, Box, Curve, Grid, Sphere, Cylinder.
	// Add them to the scene here...
	const grid = new EIGHT.Grid({engine})
	scene.add(grid)

	const stats = new Stats()
	document.body.appendChild(stats.dom)

	const director = new EIGHT.Director();
	const gui = new GUI(director);

	director.putTarget(camera, 'camera');

	director.add(slide001(engine, scene, director));

	/**
	* Animates the scene.
	*/
	const animate = function(timestamp: number) {
	stats.begin()
	engine.clear()

	trackball.update()

	dirLight.direction.copy(camera.look).sub(camera.eye)

	gui.update()

	// Manupulate the X (Position) and R (Attitude)
	// properties of your scene objects here...
	director.advance(17);

	scene.draw(ambients)
	stats.end()
	requestAnimationFrame(animate)
	}

	requestAnimationFrame(animate)
	export const e1 = EIGHT.Geometric3.e1();
	export const e2 = EIGHT.Geometric3.e2();
	export const e3 = EIGHT.Geometric3.e3();
	export const zero = EIGHT.Geometric3.zero();
	{
	"description": "Slideshow",
	"dependencies": {
	"davinci-eight": "2.308.0",
	"stats.js": "0.16.0",
	"dat-gui": "0.5.0"
	},
	"operatorOverloading": true,
	"name": "copy-of-eight-starter-template",
	"version": "0.1.0",
	"keywords": [
	"EIGHT",
	"EightJS",
	"WebGL",
	"Getting Started",
	"Engine",
	"Scene",
	"PerspectiveCamera",
	"DirectionalLight",
	"TrackballControls",
	"DomReady",
	"HTMLCanvasElement",
	"requestAnimationFrame",
	"Geometric3"
	]
	}
	import {e1, e2, e3, zero} from './math';

	export function slide001(engine: EIGHT.Engine, scene: EIGHT.Scene, director: EIGHT.Director): EIGHT.Slide {

	const slide = new EIGHT.Slide(director);

	slide.target('camera', 'eye').setVector((e3 - 1.1 * e2 + 0.9 * e1).normalize().scale(4), 2000, {
	doneCallback: function() {
	const box = new EIGHT.Box({engine, color: EIGHT.Color.green})
	// scene.add(box);
	box.width = 0.39
	box.height = 0.39
	box.depth = 0.39
	director.putTarget(box, 'box');
	scene.add(box);
	// const refCount = box.release();
	// console.log(`box is being referenced by ${refCount} clients.`)
	},
	undoCallback: function() {
	const box = director.removeTarget('box');
	scene.remove(<any>box);
	// const refCount = box.release();
	// console.log(`box is being referenced by ${refCount} clients.`)
	}
	});
	slide.target('camera', 'up').setVector(e3, 2000);
	slide.target('box', 'X').setWait(3000);
	slide.target('box', 'color').setWait(3000);


	slide.target('box', 'color')
	.setWait(1000)
	.setColor(EIGHT.Color.blueviolet, 1000);

	slide.target('box', 'X')
	.setWait(1000)
	.setVector(e1, 1000)
	//.setNarrate("The box is at e1.")
	.setWait(1000)
	.setVector(e1+e2, 1000)
	.setNarrate("The box is at e1 + e2.")
	.setWait(1000)
	.setVector(-e1+e2, 1000)
	.setVector(-e1-e2, 1000)
	.setVector(+e1-e2, 1000)
	.setVector(e1, 1000)
	.setVector(zero, 1000);

	return slide;
	}
	body { margin: 0; }
	canvas { width: 500px; height: 500px }
	#stats { position: absolute; top: 0; left: 0; }