robinhouston · December 28, 2015 23:18
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>Moiré patterns</title>
 	<style>
 	html { overflow: hidden; }
 	html, body, canvas { height: 100%; margin: 0; }
 	</style>

 <script id="vertex-shader" type="x-shader">
 	attribute vec2 aPos;

 	void main() {
 		gl_Position = vec4(aPos, 0, 1);
 	}
 </script>

 <script id="fragment-shader" type="x-shader">
 	uniform sampler2D uTexture;
 	uniform mediump mat2 uTransform;
 	uniform mediump vec2 uCentre;

 	void main() {
 		mediump vec4 a, b;
 		mediump vec2 p = gl_FragCoord.xy - uCentre;
 		
 		a = texture2D(uTexture, p / 10.0);
 		b = texture2D(uTexture, (uTransform * p) / 10.0);
 		gl_FragColor = a * b;
 	}
 </script>
 </head>
 <body>
 <script>
 var dpr = window.devicePixelRatio || 1.0;
 if (dpr != 1 && dpr != 2) dpr = 1;

 var texture_canvas = document.createElement("canvas");
 texture_canvas.width = 32 * dpr;
 texture_canvas.height = 32 * dpr;
 var texture_cx = texture_canvas.getContext("2d");
 texture_cx.fillRect(0, 0, 16 * dpr, 16 * dpr);
 texture_cx.fillRect(16 * dpr, 16 * dpr, 16 * dpr, 16 * dpr);

 var canvas = document.createElement("canvas");
 document.body.appendChild(canvas);

 function getText(selector) {
 	var el = document.querySelector(selector);
 	var t = "";
 	for (var c = el.firstChild; c; c = c.nextSibling) {
 		t += c.textContent;
 	}
 	return t;
 }

 function makeShader(shader_type, selector) {
 	var shader = gl.createShader(shader_type);
 	gl.shaderSource(shader, getText(selector));
 	gl.compileShader(shader);
 	return shader;
 }

 function setSize() {
 	canvas.width = document.body.clientWidth * dpr;
 	canvas.height = document.body.clientHeight * dpr;
 	gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
 	gl.viewport(0, 0, canvas.width, canvas.height);
 }

 var gl, prog, uTransform, uCentre;
 function init() {
 	setSize();

 	prog = gl.createProgram();
 	var vertex_shader = makeShader(gl.VERTEX_SHADER, "#vertex-shader");
 	var fragment_shader = makeShader(gl.FRAGMENT_SHADER, "#fragment-shader");

 	gl.attachShader(prog, vertex_shader);
 	gl.attachShader(prog, fragment_shader);
 	gl.linkProgram(prog);

 	var texture = gl.createTexture();
 	gl.bindTexture(gl.TEXTURE_2D, texture);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture_canvas);

 	gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
 	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1,-1, 1,-1, -1,1, 1,1 ]), gl.STATIC_DRAW);
 	var aPos = gl.getAttribLocation(prog, "aPos");
 	gl.enableVertexAttribArray(aPos);
 	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

 	gl.useProgram(prog);

 	uTransform = gl.getUniformLocation(prog, "uTransform");
 	uCentre = gl.getUniformLocation(prog, "uCentre");
 }

 function rotationMatrix(theta) {
 	var s = Math.sin(theta), c = Math.cos(theta);
 	return [ c, s, -s, c ];
 }

 var initial_timestamp;
 function drawFrame(timestamp) {
 	if (!initial_timestamp) initial_timestamp = timestamp;
 	var dt = timestamp - initial_timestamp;

 	var theta = 1e-4 * dt;
 	gl.uniformMatrix2fv(uTransform, false, rotationMatrix(theta));
 	gl.uniform2f(uCentre, canvas.width/2, canvas.height/2);
 	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

 	requestAnimationFrame(drawFrame);
 }

 window.onresize = setSize;
 init();
 requestAnimationFrame(drawFrame);

 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Moiré patterns</title>
	<style>
	html { overflow: hidden; }
	html, body, canvas { height: 100%; margin: 0; }
	</style>

	<script id="vertex-shader" type="x-shader">
	attribute vec2 aPos;

	void main() {
	gl_Position = vec4(aPos, 0, 1);
	}
	</script>

	<script id="fragment-shader" type="x-shader">
	uniform sampler2D uTexture;
	uniform mediump mat2 uTransform;
	uniform mediump vec2 uCentre;

	void main() {
	mediump vec4 a, b;
	mediump vec2 p = gl_FragCoord.xy - uCentre;

	a = texture2D(uTexture, p / 10.0);
	b = texture2D(uTexture, (uTransform * p) / 10.0);
	gl_FragColor = a * b;
	}
	</script>
	</head>
	<body>
	<script>
	var dpr = window.devicePixelRatio \|\| 1.0;
	if (dpr != 1 && dpr != 2) dpr = 1;

	var texture_canvas = document.createElement("canvas");
	texture_canvas.width = 32 * dpr;
	texture_canvas.height = 32 * dpr;
	var texture_cx = texture_canvas.getContext("2d");
	texture_cx.fillRect(0, 0, 16 * dpr, 16 * dpr);
	texture_cx.fillRect(16 * dpr, 16 * dpr, 16 * dpr, 16 * dpr);

	var canvas = document.createElement("canvas");
	document.body.appendChild(canvas);

	function getText(selector) {
	var el = document.querySelector(selector);
	var t = "";
	for (var c = el.firstChild; c; c = c.nextSibling) {
	t += c.textContent;
	}
	return t;
	}

	function makeShader(shader_type, selector) {
	var shader = gl.createShader(shader_type);
	gl.shaderSource(shader, getText(selector));
	gl.compileShader(shader);
	return shader;
	}

	function setSize() {
	canvas.width = document.body.clientWidth * dpr;
	canvas.height = document.body.clientHeight * dpr;
	gl = canvas.getContext("webgl") \|\| canvas.getContext("experimental-webgl");
	gl.viewport(0, 0, canvas.width, canvas.height);
	}

	var gl, prog, uTransform, uCentre;
	function init() {
	setSize();

	prog = gl.createProgram();
	var vertex_shader = makeShader(gl.VERTEX_SHADER, "#vertex-shader");
	var fragment_shader = makeShader(gl.FRAGMENT_SHADER, "#fragment-shader");

	gl.attachShader(prog, vertex_shader);
	gl.attachShader(prog, fragment_shader);
	gl.linkProgram(prog);

	var texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture_canvas);

	gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1,-1, 1,-1, -1,1, 1,1 ]), gl.STATIC_DRAW);
	var aPos = gl.getAttribLocation(prog, "aPos");
	gl.enableVertexAttribArray(aPos);
	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

	gl.useProgram(prog);

	uTransform = gl.getUniformLocation(prog, "uTransform");
	uCentre = gl.getUniformLocation(prog, "uCentre");
	}

	function rotationMatrix(theta) {
	var s = Math.sin(theta), c = Math.cos(theta);
	return [ c, s, -s, c ];
	}

	var initial_timestamp;
	function drawFrame(timestamp) {
	if (!initial_timestamp) initial_timestamp = timestamp;
	var dt = timestamp - initial_timestamp;

	var theta = 1e-4 * dt;
	gl.uniformMatrix2fv(uTransform, false, rotationMatrix(theta));
	gl.uniform2f(uCentre, canvas.width/2, canvas.height/2);
	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

	requestAnimationFrame(drawFrame);
	}

	window.onresize = setSize;
	init();
	requestAnimationFrame(drawFrame);

	</script>
	</body>
	</html>