mathdoodle · August 29, 2015 14:25
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "f0468d12-659c-4932-a886-6dc6e0b60bb2",
  "description": "TINY",
  "dependencies": {
    "DomReady": "latest",
    "davinci-eight": "latest",
    "davinci-threejs": "0.71.4"
  },
  "operatorOverloading": true
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
    <script id="vs" type="x-shader/x-vertex">
      attribute vec4 position;
      void main() {
        gl_Position = position;
      }
    </script>
    <script id="fs" type="x-shader/x-fragment">
      precision mediump float;

      uniform vec2 resolution;
      uniform float time;

      void main() {
        vec2 uv = gl_FragCoord.xy / resolution;
        float color = 0.0;
        color += sin( uv.x * cos( time / 3.0 ) * 60.0 ) + cos( uv.y * cos( time / 2.80 ) * 10.0 );
        color += sin( uv.y * sin( time / 2.0 ) * 40.0 ) + cos( uv.x * sin( time / 1.70 ) * 40.0 );
        color += sin( uv.x * sin( time / 1.0 ) * 10.0 ) + sin( uv.y * sin( time / 3.50 ) * 80.0 );
        color *= sin( time / 10.0 ) * 0.5;
        gl_FragColor = vec4( vec3( color * 0.5, sin( color + time / 2.5 ) * 0.75, color ), 1.0 );
      }
    </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
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    alert(e);
  }
 });

 // TODO
 function shaderProgramFromScripts(vsId: string, fsId: string, $document: Document): EIGHT.ShaderProgram {
  $document = typeof $document !== 'undefined' ? $document : document; 
  function $(id: string): HTMLElement {
    return $document.getElementById(id);
  }
  return EIGHT.shaderProgram($(vsId).textContent, $(fsId).textContent);
 }

 // A default might provide no elements, be static, and no meta info.
 class MyMesh implements EIGHT.AttributeProvider {
  public drawMode: number; // TODO
  constructor() {
    
  }
  draw(gl: WebGLRenderingContext) {
    gl.drawArrays(gl.TRIANGLES, 0, 6);
  }
  update() {
    
  }
  get dynamic(): boolean {
    return false;
  }
  getAttributeMetaInfos() {
    var attributes: EIGHT.AttributeMetaInfos = {};
    attributes['position'] = {name: 'position', glslType: 'vec4', size: 3, normalized: false, stride: 0, offset: 0};
    return attributes;
  }
  hasElements() {
    return false;
  }
  getElements() {
    return null;
  }
  getVertexAttributeData(name: string) {
    return {usage: EIGHT.DataUsage.STATIC_DRAW, data: new Float32Array(
      [-1, -1, 0, 1,
       -1, 0, -1, 1,
       0, -1, 1, 0,
       1, -1, 0, 1,
       1, 0])};
  }
 }

 function main() {

  var uTime = new EIGHT.UniformFloat('time');
  
  function tick(time: number) {
    uTime.data = time;
    thing.draw(uTime);
  }

  function setUp() {
    monitor.start();
    shaders.use();
  }
  
  function tearDown(e) {
    monitor.stop();
  }

  var canvas = <HTMLCanvasElement>document.getElementById('canvas');
  var monitor = EIGHT.contextMonitor(canvas);
  
  var mesh = new MyMesh();
  var shaders = shaderProgramFromScripts('vs', 'fs', document);
  var resolution = new EIGHT.UniformVec2('resolution');
  resolution.callback = function() {return [canvas.width, canvas.height];};
  var thing = EIGHT.drawableModel(mesh, shaders, resolution);
  
  monitor.addContextUser(thing);
  
  var runner = EIGHT.animation(tick,{setUp:setUp,tearDown:tearDown});


  runner.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": "f0468d12-659c-4932-a886-6dc6e0b60bb2",
	"description": "TINY",
	"dependencies": {
	"DomReady": "latest",
	"davinci-eight": "latest",
	"davinci-threejs": "0.71.4"
	},
	"operatorOverloading": true
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	<script id="vs" type="x-shader/x-vertex">
	attribute vec4 position;
	void main() {
	gl_Position = position;
	}
	</script>
	<script id="fs" type="x-shader/x-fragment">
	precision mediump float;

	uniform vec2 resolution;
	uniform float time;

	void main() {
	vec2 uv = gl_FragCoord.xy / resolution;
	float color = 0.0;
	color += sin( uv.x * cos( time / 3.0 ) * 60.0 ) + cos( uv.y * cos( time / 2.80 ) * 10.0 );
	color += sin( uv.y * sin( time / 2.0 ) * 40.0 ) + cos( uv.x * sin( time / 1.70 ) * 40.0 );
	color += sin( uv.x * sin( time / 1.0 ) * 10.0 ) + sin( uv.y * sin( time / 3.50 ) * 80.0 );
	color = sin( time / 10.0 ) 0.5;
	gl_FragColor = vec4( vec3( color * 0.5, sin( color + time / 2.5 ) * 0.75, color ), 1.0 );
	}
	</script> </head>
	<body>
	<canvas id='canvas' width='400' height='300'>
	Your browser does not support the HTML5 canvas element.
	</canvas>
	</body>
	</html>
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	alert(e);
	}
	});

	// TODO
	function shaderProgramFromScripts(vsId: string, fsId: string, $document: Document): EIGHT.ShaderProgram {
	$document = typeof $document !== 'undefined' ? $document : document;
	function $(id: string): HTMLElement {
	return $document.getElementById(id);
	}
	return EIGHT.shaderProgram($(vsId).textContent, $(fsId).textContent);
	}

	// A default might provide no elements, be static, and no meta info.
	class MyMesh implements EIGHT.AttributeProvider {
	public drawMode: number; // TODO
	constructor() {

	}
	draw(gl: WebGLRenderingContext) {
	gl.drawArrays(gl.TRIANGLES, 0, 6);
	}
	update() {

	}
	get dynamic(): boolean {
	return false;
	}
	getAttributeMetaInfos() {
	var attributes: EIGHT.AttributeMetaInfos = {};
	attributes['position'] = {name: 'position', glslType: 'vec4', size: 3, normalized: false, stride: 0, offset: 0};
	return attributes;
	}
	hasElements() {
	return false;
	}
	getElements() {
	return null;
	}
	getVertexAttributeData(name: string) {
	return {usage: EIGHT.DataUsage.STATIC_DRAW, data: new Float32Array(
	[-1, -1, 0, 1,
	-1, 0, -1, 1,
	0, -1, 1, 0,
	1, -1, 0, 1,
	1, 0])};
	}
	}

	function main() {

	var uTime = new EIGHT.UniformFloat('time');

	function tick(time: number) {
	uTime.data = time;
	thing.draw(uTime);
	}

	function setUp() {
	monitor.start();
	shaders.use();
	}

	function tearDown(e) {
	monitor.stop();
	}

	var canvas = <HTMLCanvasElement>document.getElementById('canvas');
	var monitor = EIGHT.contextMonitor(canvas);

	var mesh = new MyMesh();
	var shaders = shaderProgramFromScripts('vs', 'fs', document);
	var resolution = new EIGHT.UniformVec2('resolution');
	resolution.callback = function() {return [canvas.width, canvas.height];};
	var thing = EIGHT.drawableModel(mesh, shaders, resolution);

	monitor.addContextUser(thing);

	var runner = EIGHT.animation(tick,{setUp:setUp,tearDown:tearDown});


	runner.start();
	}
	body {
	background-color: white;
	margin: 0;
	}
	canvas {
	background-color: black;
	position: absolute;
	width: 100%;
	height: 100%;
	}