aaaaaaa

code.js

@@ -3,8 +3,8 @@ document.getElementById('pause').onclick = function(){
 	pause = !pause;
 };
 
-var canvas = document.getElementById('canvas');
-var context = canvas.getContext('2d');
+const canvas = document.querySelector("#canvas");
+//var context = canvas.getContext('2d');
 
 function resize() {
 	canvas.width  = window.innerWidth;
@@ -13,14 +13,175 @@ function resize() {
 window.addEventListener('resize', resize);
 resize();
 
+let startGL = function() {
+	// Initialize the GL context
+	const gl = canvas.getContext("webgl");
+
+	// Only continue if WebGL is available and working
+	if (!gl) {
+		alert("Unable to initialize WebGL.");
+		return;
+	}
+
+	const program = initShader(gl, vsSource, fsSource);
+
+	const data = {
+		program: program,
+		attribs: {
+			position: gl.getAttribLocation(program, 'position'),
+			texcoord: gl.getAttribLocation(program, 'texcoord'),
+		},
+		uniforms: {
+			projection: gl.getUniformLocation(program, 'projection'),
+			dim: gl.getUniformLocation(program, 'dim'),
+			enabled: gl.getUniformLocation(program, 'enabled'),
+			rseed: gl.getUniformLocation(program, 'rseed'),
+			sampler: gl.getUniformLocation(program, 'sampler'),
+		},
+	};
+
+	const identity = 
+	[1, 0, 0, 0,
+	 0, 1, 0, 0,
+	 0, 0, 1, 0,
+	 0, 0, 0, 1]
+
+	const positionBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+	const positions = [
+    -1.0,  1.0,
+    -1.0, -1.0,
+     1.0, -1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+     1.0,  1.0
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+	const textureBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
+	const tex = [
+    0.0, 1.0,
+    0.0, 0.0,
+    1.0, 0.0,
+    0.0, 1.0, 
+    1.0, 0.0,
+    1.0, 1.0
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tex), gl.STATIC_DRAW);
+
+	const dim = 1024;
+	const tex0 = createTexture(gl, dim);
+	const tex1 = createTexture(gl, dim);
+
+	const fb0 = gl.createFramebuffer();
+	gl.bindFramebuffer(gl.FRAMEBUFFER, fb0);
+	const attachmentPoint = gl.COLOR_ATTACHMENT0;
+	gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, tex0, 0);
+	
+	const fb1 = gl.createFramebuffer();
+	gl.bindFramebuffer(gl.FRAMEBUFFER, fb1);
+	gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, tex1, 0);
+
+	gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+	var flipTex = false;
+
+	window.requestAnimationFrame(render);
+
+	function render(t) {
+
+		gl.viewport(0, 0, dim, dim);
+
+
+		// swap which texture is being rendered to each frame
+		texture = flipTex ? tex0 : tex1;
+		fb = flipTex ? fb1 : fb0;
+		flipTex = !flipTex;
+		gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+		// Set clear color to black, fully opaque
+		gl.clearColor(0.2, 0.2, 0.2, 1.0);
+		// Clear the color buffer with specified clear color
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		
+		{
+			const numComponents = 2;  // pull out 2 values per iteration
+			const type = gl.FLOAT;    // the data in the buffer is 32bit floats
+			const normalize = false;  // don't normalize
+			const stride = 0;         // how many bytes to get from one set of values to the next
+			                          // 0 = use type and numComponents above
+			const offset = 0;         // how many bytes inside the buffer to start from
+
+			gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+			gl.vertexAttribPointer(
+			    data.attribs.position,
+			    numComponents,
+			    type,
+			    normalize,
+			    stride,
+			    offset);
+			gl.enableVertexAttribArray(data.attribs.position);
+		}
+
+
+		{
+		    const num = 2; // every coordinate composed of 2 values
+		    const type = gl.FLOAT; // the data in the buffer is 32 bit float
+		    const normalize = false; // don't normalize
+		    const stride = 0; // how many bytes to get from one set to the next
+		    const offset = 0; // how many bytes inside the buffer to start from
+		    gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
+		    gl.vertexAttribPointer(data.attribs.texcoord, num, type, normalize, stride, offset);
+		    gl.enableVertexAttribArray(data.attribs.texcoord);
+		}
+
+		gl.useProgram(data.program);
+		gl.uniform1f(data.uniforms.enabled, true);
+		gl.uniform1f(data.uniforms.dim, dim);
+		gl.uniform2f(data.uniforms.rseed, Math.random(), Math.random());
+
+		gl.uniformMatrix4fv(
+		  data.uniforms.projection,
+		  false,
+		  identity);
+
+		{
+			// Tell WebGL we want to affect texture unit 0
+			gl.activeTexture(gl.TEXTURE0);
+
+			// Bind the texture to texture unit 0
+			gl.bindTexture(gl.TEXTURE_2D, texture);
+
+			// Tell the shader we bound the texture to texture unit 0
+			gl.uniform1i(data.uniforms.sampler, 0);
+
+			const offset = 0;
+			const vertexCount = 6;
+
+			gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
+
+			gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+			gl.uniform1f(data.uniforms.enabled, false);
+
+			gl.viewport(0, 0, canvas.width, canvas.height);
+			gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
+		}
+
+		
+		window.requestAnimationFrame(render);
+	}
+	
+}
+
+
+startGL();
+
+/*
 var dim = 128
 var sq = []
 for(var i = 0; i < dim*dim; i++) {
-	if(i % dim < dim/2) {
-		sq.push(0)
-	} else {
-		sq.push(240)
-	}
+		sq.push((i % 128)/128 * 360)
 }
 
 var t0 = performance.now();
@@ -91,3 +252,4 @@ function decideOutcome(i) {
 }
 
 window.requestAnimationFrame(loop);
+*/

gl.js

@@ -0,0 +1,198 @@
+/* 
+ * gl.js
+ * Keep all webgl boilerplate over here
+ */
+
+// Vertex shader program
+
+const vsSource = `
+	attribute vec4 position;
+	attribute vec2 texcoord;
+
+	uniform mat4 projection;
+
+	varying highp vec2 texcoord_f;
+
+	void main() {
+		texcoord_f = texcoord;
+		gl_Position = projection * position;
+	}
+`;
+
+const fsSource = `
+
+	varying highp vec2 texcoord_f;
+	uniform highp float dim;
+	uniform highp vec2 rseed;
+	uniform sampler2D sampler;
+	uniform bool enabled;
+
+	highp float rand(vec2 co)
+	{
+		co = co * rseed * dim * 10.;
+	    highp float a = 12.9898;
+	    highp float b = 78.233;
+	    highp float c = 43758.5453;
+	    highp float dt= dot(co.xy ,vec2(a,b));
+	    highp float sn= mod(dt,3.14);
+	    return fract(sin(sn) * c);
+	}
+
+
+	highp vec4 decideOutcome(ivec2 texel) {
+
+		highp vec4 outcome = vec4(rand(texcoord_f),0.,0.,0.);
+
+		// u d l r
+		highp float r = rand(texcoord_f);
+
+		int n = 5;
+		if(texel.x < 1 || texel.x > int(dim)-2) {
+			n - 1;
+		}
+		if(texel.y < 1 || texel.y > int(dim)-2) {
+			n - 1;
+		}
+		
+		which = int(r * n);
+
+		switch(which) {
+			case 0:
+				if(texel.x < 1) {
+
+				} else {
+					break;
+				}
+			case 1:
+				break;
+			case 2:
+				break;
+
+		}
+		if(texel.x < 1) {
+			n - 1;
+		}
+		else if(texel.x > int(dim)-2) {
+			n - 1;
+		}
+		
+		if(texel.y < 1) {
+			n - 1;
+		}
+		else if(texel.y > int(dim)-2) {
+			n - 1;
+		}
+
+
+		return outcome;
+	}
+
+	void main() {
+		if (enabled) {
+			ivec2 texel = ivec2(texcoord_f * dim);
+			gl_FragColor = decideOutcome(texel);
+		}
+		else {
+			gl_FragColor = texture2D(sampler, texcoord_f);
+		}
+	}
+`;
+
+/*
+ *  Combine vertex&fragment source into compiled shader program
+ */
+function initShader(gl, vsSource, fsSource) {
+ 
+  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+/*
+ *  Compile individual shader
+ */
+function compileShader(gl, type, source) {
+ 
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+function initBuffers(gl) {
+
+
+	const positionBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+	const positions = [
+		1.0,  1.0,
+		-1.0,  1.0,
+		1.0, -1.0,
+		-1.0, -1.0,
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+	const textureBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
+	const tex = [
+	0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tex), gl.STATIC_DRAW);
+
+	return {
+		position: positionBuffer,
+		texcoords: textureBuffer,
+	};
+
+}
+
+function createTexture(gl, dim) {
+	const texture = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+
+	const blue = [0, 0, 255, 255];
+	const red = [255, 0, 0, 255]
+	var sq = []
+	for(var i = 0; i < dim*dim; i++) {
+		if(i % dim < dim/2) {
+			sq.push.apply(sq, red)
+		} else {
+			sq.push.apply(sq, blue)
+		}
+	}
+	const data = new Uint8Array(sq);  // opaque blue
+
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, dim, dim, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+	return texture;
+}

index.html

@@ -9,5 +9,6 @@
 <canvas id="canvas"></canvas>
 <input type="button"  id="pause" value="pause">
 </body>
+<script src="gl.js"></script>
 <script src="code.js"></script>
 </html>

style.css

@@ -33,7 +33,7 @@ h1,h2,h3 {
 
 #pause {
     left: 10px;
-    z-index: 2;
+    z-index: -1;
     position: fixed;
     top:10px;
     background-color: #b705ff;