Add UI

jacobwinters · Jun 2, 2018 · a8dad31 · a8dad31
1 parent 57e9f1a
commit a8dad31
Show file tree

Hide file tree

Showing 9 changed files with 11,143 additions and 10,109 deletions.
diff --git a/display.js b/display.js
@@ -2,23 +2,32 @@
 
 function grid(nodes) {
   return (gl, compiler, display) => {
-    $(gl.canvas).click((event) => {
-      const x = event.offsetX / gl.canvas.clientWidth;
-      const y = 1 - (event.offsetY / gl.canvas.clientHeight);
-      display.setDisplay(grid(makeGrid(nodes[Math.floor(x * 5) + Math.floor(y * 5) * 5])));
-    });
-    const shaders = nodes.map(compiler);
+    const clickListener = (event) => {
+      if(settings.operation === 'variations') {
+        const x = event.offsetX / gl.canvas.clientWidth;
+        const y = 1 - (event.offsetY / gl.canvas.clientHeight);
+        display.setDisplay(grid(makeGrid(nodes[Math.floor(y * 5)][Math.floor(x * 5)])));
+      }
+    };
+    gl.canvas.addEventListener('click', clickListener);
+    const shaders = nodes.map((row) => row.map(compiler));
     return {
       draw(time) {
-        for(var i = 0; i < 25; i++) {
-          const posX = ((i % 5) - 2) * 2/5;
-          const posY = Math.floor((i / 5) - 2) * 2/5;
-          const size = 1 / 5;
-          shaders[i].draw(time, posX, posY, size, size, 0, 0, 2, 2);
+        const zoomRadius = Math.exp(-settings.zoom)*2;
+        for (var y = 0; y < 5; y++) {
+          const posY = (y - 2) * 2 / 5;
+          for(var x = 0; x < 5; x++) {
+            const posX = (x - 2) * 2 / 5;
+            const size = 1 / 5;
+            const continuousOffsetX = settings.continuous ? zoomRadius * 2 * (x - 2) : 0;
+            const continuousOffsetY = settings.continuous ? zoomRadius * 2 * (y - 2) : 0;
+            shaders[y][x].draw(time, posX, posY, size, size, settings.center.x + continuousOffsetX, settings.center.y + continuousOffsetY, zoomRadius, zoomRadius);
+          }
         }
       },
       dispose() {
-        shaders.forEach((shader) => shader.dispose());
+        shaders.forEach((row) => row.forEach((shader) => shader.dispose()));
+        gl.canvas.removeEventListener('click', clickListener);
       }
     }
   }
@@ -39,24 +48,40 @@ function justOne(node){
 }
 
 function makeDisplay(canvas) {
+  canvas.addEventListener('wheel', (event) => {
+    if(event.deltaY > 0){
+      settings.zoom += .1;
+    } else if(event.deltaY < 0) {
+      settings.zoom -= .1;
+    }
+    settings.zoom = clamp(settings.zoom, -2, 2);
+  });
+  canvas.addEventListener('mousemove', (event) => {
+    if(settings.operation == 'pan' && (event.buttons & 1)) {
+      const zoomScale = 2 * 5 * Math.exp(-settings.zoom)*2;
+      settings.center.x -= event.movementX * zoomScale / gl.canvas.clientWidth
+      settings.center.y += event.movementY * zoomScale / gl.canvas.clientHeight
+    }
+  });
   const gl = initWebGL(canvas);
   const compiler = nodeShaderCompiler(shaderCompiler(gl.gl));
-  var displayMaker;
   var display;
   var time = 0;
+  var frameNumber = 0;
   var me = {
-    setDisplay(newDisplayMaker) {
+    setDisplay(displayMaker) {
       if(display) {
         display.dispose();
       }
-      displayMaker = newDisplayMaker;
-      $(canvas).off();
       display = displayMaker(gl, compiler, me);
     },
     draw() {
       time += .01;
-      gl.clear();
-      display.draw(time);
+      frameNumber++;
+      if(frameNumber % settings.frameRateReduction === 0) {
+        gl.startFrame();
+        display.draw(time);
+      }
     }
   };
   return me;

diff --git a/fiddle.js b/fiddle.js
@@ -14,13 +14,13 @@ function fiddle(node, type = 'texture') {
 }
 
 function makeGrid(node) {
-  var shaders = [];
-  for(var i = 0; i < 12; i++) {
-    shaders.push(fiddle(node));
-  }
-  shaders.push(node);
-  for(var i = 0; i < 12; i++) {
-    shaders.push(fiddle(node));
+  const shaders = [];
+  for(var y = 0; y < 5; y++) {
+    const row = [];
+    for(var x = 0; x < 5; x++) {
+      row.push((y == 2 && x == 2) ? node : fiddle(node));
+    }
+    shaders.push(row);
   }
   return shaders;
 }
diff --git a/gl.js b/gl.js
@@ -1,15 +1,23 @@
 "use strict";
 
 function initWebGL(canvas){
-  canvas.width = canvas.clientWidth * devicePixelRatio;
-  canvas.height = canvas.clientHeight * devicePixelRatio;
   const gl = canvas.getContext('webgl');
-  function clear(){
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  var oldWidth, oldHeight, oldResolutionReduction, oldBufferWidth, oldBufferHeight;
+  function startFrame() {
+    if (canvas.clientWidth !== oldWidth || canvas.clientHeight !== oldHeight || settings.resolutionReduction !== oldResolutionReduction || gl.drawingBufferWidth !== oldBufferWidth || gl.drawingBufferHeight !== oldBufferHeight) {
+      canvas.width = canvas.clientWidth * devicePixelRatio / settings.resolutionReduction;
+      canvas.height = canvas.clientHeight * devicePixelRatio / settings.resolutionReduction;
+      oldWidth = canvas.clientWidth;
+      oldHeight = canvas.clientHeight;
+      oldResolutionReduction = settings.resolutionReduction;
+      oldBufferWidth = gl.drawingBufferWidth;
+      oldBufferHeight = gl.drawingBufferHeight;
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
   }
   return {
     gl: gl,
-    clear: clear,
+    startFrame: startFrame,
     canvas: canvas
   };
 }

diff --git a/index.html b/index.html
@@ -1,11 +1,54 @@
 <!DOCTYPE html>
 <html>
 <head>
+	<meta name='viewport' content='width=device-width'>
+	<link rel='stylesheet' href='style.css'>
 </head>
 <body>
-	<p>Click on one of the patterns below:</p>
-	<canvas id='canvas' style='width: 100vmin; height: 100vmin'></canvas>
-	<script src='jquery-3.1.0.js'></script>
+	<div id='controls'>
+		<section>
+			Click on one of the patterns
+		</section>
+		<section>
+			<h1>Operation:</h1>
+			<input type='radio' id='variations' value='variations' v-model='operation'><!--
+			--><label for='variations'>Variations</label><!--
+			--><input type='radio' id='pan' value='pan' v-model='operation'><!--
+			--><label for='pan'>Pan</label>
+		</section>
+		<section>
+			<h1>Appearance:</h1>
+			<p>
+				<label for='continuous'>Continuous</label>
+				<input type='checkbox' id='continuous' v-model='continuous'>
+			</p>
+			<p>
+				<label for='centerX'>Center X:</label>
+				<input type='number' step='any' id='centerX' v-model.number='center.x'>
+			</p>
+			<p>
+				<label for='centerY'>Center Y:</label>
+				<input type='number' step='any' id='centerY' v-model.number='center.y'>
+			</p>
+			<p>
+				<label for='zoom'>Zoom:</label>
+				<input type='range' min='-2' max='2' step='any' id='zoom' v-model.number='zoom'>
+			</p>
+		</section>
+		<section>
+			<h1>Performance:</h1>
+			<p>
+				<label for='frameRateReduction'>Decrease framerate:</label>
+				<input type='range' min='1' max='4' id='frameRateReduction' v-model.number='frameRateReduction'>
+			</p>
+			<p>
+				<label for='resolutionReduction'>Decrease resolution:</label>
+				<input type='range' min='1' max='4' id='resolutionReduction' v-model.number='resolutionReduction'>
+			</p>
+		</section>
+	</div>
+	<canvas id='canvas'></canvas>
+	<script src='vue.js'></script>
 	<script src='utils.js'></script>
 	<script src='nodes.js'></script>
 	<script src='generate.js'></script>