Permalink
Browse files

Add UI

  • Loading branch information...
jacobwinters committed Jun 2, 2018
1 parent 57e9f1a commit a8dad3115e50f001cc871f7515094564c5319f41
Showing with 11,143 additions and 10,109 deletions.
  1. +43 −18 display.js
  2. +7 −7 fiddle.js
  3. +13 −5 gl.js
  4. +46 −3 index.html
  5. +0 −10,074 jquery-3.1.0.js
  6. +18 −2 main.js
  7. +65 −0 style.css
  8. +4 −0 utils.js
  9. +10,947 −0 vue.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;
@@ -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;
}
18 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
};
}
@@ -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>
Oops, something went wrong.

0 comments on commit a8dad31

Please sign in to comment.