mathdoodle · August 29, 2015 14:25
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "bd471861-d135-496d-8631-ae3773ce7a09",
  "description": "Julia Set on EIGHT",
  "dependencies": {
    "DomReady": "latest",
    "davinci-eight": "latest"
  }
 }
diff --git a/extras.ts b/extras.ts
 //
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <script id='shader-vs' type='x-shader/x-vertex'>
      attribute vec3 aVertexPosition;
      varying vec2 position;
      void main(void) {
        position = vec2(aVertexPosition);
        gl_Position = vec4(position, 0.0, 1.0);
      }
    </script>
    <script id='shader-fs' type='x-shader/x-fragment'>
      varying highp vec2 position;
      const int MAX_ITERATIONS = 250;
      const highp float LIGHTNESS_FACTOR = 10.0;
      void main(void) {
        highp vec2 z = vec2(position.x, position.y);
        highp vec2 c = vec2(-0.8, -0.2);
        highp vec4 color = vec4(0.0,0.0,0.0,1.0);
        for (int i=0; i < MAX_ITERATIONS; i++) {
          z = vec2(z.x*z.x -z.y * z.y, 2.0*z.x*z.y) + c;
          if (dot(z,z) > 4.0) {
            highp float f = LIGHTNESS_FACTOR * float(i) / float(MAX_ITERATIONS);
            color = vec4(vec3(0.4*z.x,0.4*z.y,0.4)*f, 1.0);
            break;
          }
        }
        gl_FragColor = color;
      }
    </script>
    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
  </head>
  <body>
    <canvas id='doodle-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
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    alert(e);
  }
 });

 class MyMesh implements EIGHT.AttribProvider {
  public drawMode: EIGHT.DrawMode = EIGHT.DrawMode.TRIANGLES;
  public dynamic = false;
  private indices = [0,1,2,0,2,3,0,3,4,0,4,1];
  constructor() {
    
  }
  draw(gl: WebGLRenderingContext) {
    gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
  }
  update(attributes: EIGHT.ShaderVariableDecl[]) {
    
  }
  getAttribMeta() {
    var attributes: EIGHT.AttribMetaInfos = {};
    attributes['position'] = {name: 'aVertexPosition', glslType: 'vec3', size: 3, normalized: false, stride: 0, offset: 0};
    return attributes;
  }
  hasElementArray() {
    return true;
  }
  getElementArray() {
    return {usage: EIGHT.DataUsage.STREAM_DRAW, data: new Uint16Array(this.indices)};
  }
  getAttribArray(name: string) {
    var size = 2.0;
    return {usage: EIGHT.DataUsage.STATIC_DRAW, data: new Float32Array(
      [
       0.0,    0.0,     0.0,  // 0 center
      -size/2, -size/2, 0.0,  // 1 lower left
      +size/2, -size/2, 0.0,  // 2 lower right
      +size/2, +size/2, 0.0,  // 3 upper right
      -size/2, +size/2, 0.0   // 4 upper left
       ]
    )};
  }
 }
 function main() {
  
  var canvas = <HTMLCanvasElement>document.getElementById('doodle-canvas');
  var shaderProgram = EIGHT.shaderProgramFromScripts('shader-vs','shader-fs');
  var monitor = EIGHT.contextMonitor(canvas);
  
  var mesh = new MyMesh();
  var drawObj = EIGHT.primitive(mesh, shaderProgram, EIGHT.uniforms([]));
  monitor.addContextUser(drawObj);
  
  monitor.start();
  
  var gl = monitor.context;
  
  shaderProgram.use();

  gl.clearColor(0.5, 0.5, 0.6, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.viewport(0, 0, canvas.width, canvas.height);
  
  drawObj.draw(EIGHT.uniforms([]));
 }
diff --git a/style.less b/style.less
 body { background-color: white; }
 canvas { 
  background-color: blue;
  position: absolute;
  left: 500px;
  top: 100px;
 }
	{
	"uuid": "bd471861-d135-496d-8631-ae3773ce7a09",
	"description": "Julia Set on EIGHT",
	"dependencies": {
	"DomReady": "latest",
	"davinci-eight": "latest"
	}
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<script id='shader-vs' type='x-shader/x-vertex'>
	attribute vec3 aVertexPosition;
	varying vec2 position;
	void main(void) {
	position = vec2(aVertexPosition);
	gl_Position = vec4(position, 0.0, 1.0);
	}
	</script>
	<script id='shader-fs' type='x-shader/x-fragment'>
	varying highp vec2 position;
	const int MAX_ITERATIONS = 250;
	const highp float LIGHTNESS_FACTOR = 10.0;
	void main(void) {
	highp vec2 z = vec2(position.x, position.y);
	highp vec2 c = vec2(-0.8, -0.2);
	highp vec4 color = vec4(0.0,0.0,0.0,1.0);
	for (int i=0; i < MAX_ITERATIONS; i++) {
	z = vec2(z.xz.x -z.y z.y, 2.0z.xz.y) + c;
	if (dot(z,z) > 4.0) {
	highp float f = LIGHTNESS_FACTOR * float(i) / float(MAX_ITERATIONS);
	color = vec4(vec3(0.4z.x,0.4z.y,0.4)*f, 1.0);
	break;
	}
	}
	gl_FragColor = color;
	}
	</script>
	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	</head>
	<body>
	<canvas id='doodle-canvas' width='600' height='600'>
	Your browser does not support the HTML5 canvas element.
	</canvas>
	</body>
	</html>
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	alert(e);
	}
	});

	class MyMesh implements EIGHT.AttribProvider {
	public drawMode: EIGHT.DrawMode = EIGHT.DrawMode.TRIANGLES;
	public dynamic = false;
	private indices = [0,1,2,0,2,3,0,3,4,0,4,1];
	constructor() {

	}
	draw(gl: WebGLRenderingContext) {
	gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
	}
	update(attributes: EIGHT.ShaderVariableDecl[]) {

	}
	getAttribMeta() {
	var attributes: EIGHT.AttribMetaInfos = {};
	attributes['position'] = {name: 'aVertexPosition', glslType: 'vec3', size: 3, normalized: false, stride: 0, offset: 0};
	return attributes;
	}
	hasElementArray() {
	return true;
	}
	getElementArray() {
	return {usage: EIGHT.DataUsage.STREAM_DRAW, data: new Uint16Array(this.indices)};
	}
	getAttribArray(name: string) {
	var size = 2.0;
	return {usage: EIGHT.DataUsage.STATIC_DRAW, data: new Float32Array(
	[
	0.0, 0.0, 0.0, // 0 center
	-size/2, -size/2, 0.0, // 1 lower left
	+size/2, -size/2, 0.0, // 2 lower right
	+size/2, +size/2, 0.0, // 3 upper right
	-size/2, +size/2, 0.0 // 4 upper left
	]
	)};
	}
	}
	function main() {

	var canvas = <HTMLCanvasElement>document.getElementById('doodle-canvas');
	var shaderProgram = EIGHT.shaderProgramFromScripts('shader-vs','shader-fs');
	var monitor = EIGHT.contextMonitor(canvas);

	var mesh = new MyMesh();
	var drawObj = EIGHT.primitive(mesh, shaderProgram, EIGHT.uniforms([]));
	monitor.addContextUser(drawObj);

	monitor.start();

	var gl = monitor.context;

	shaderProgram.use();

	gl.clearColor(0.5, 0.5, 0.6, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.viewport(0, 0, canvas.width, canvas.height);

	drawObj.draw(EIGHT.uniforms([]));
	}
	body { background-color: white; }
	canvas {
	background-color: blue;
	position: absolute;
	left: 500px;
	top: 100px;
	}