scratch.html

<div id="canvasContainer">
    <canvas id="renderCanvas" width="1000" height="500"></canvas>
</div>

<style>

html, body{
	height: 100%;
	width: 100%;
	border: none;
	margin: 0px;
	padding: 0px;
	background-color: black;
}

body{
	overflow: hidden;
}

#canvasContainer{
	position: absolute;

	/* height: 100%; */

}

#renderCanvas{
	/* height: 1024px;
	width: 2048px; */
	/* height: 100%; */
	top: 0px;
	left: 0px;
	position: absolute;
	transform: scale(1);
	background-color: #000000;

	/* image-rendering: optimizeSpeed;              */
	/* image-rendering: -moz-crisp-edges;           */
	/* image-rendering: -webkit-optimize-contrast;  */
	/* image-rendering: -o-crisp-edges;             */
	/* image-rendering: pixelated;                  */
	/* -ms-interpolation-mode: nearest-neighbor;   IE */
}
</style>

<script  id="activation-source" type="x-shader/x-fragment">
	
    float activation(float x) {
		// input is in range [min(0, sum(negative values)), max(0, sum(positive values))]

		//power hill
		//float hill(float x, float b) {
		//	return max(1.-pow(2.*(x-b), 2.), 0.);
		//}

		//linear hill
		//float hill(float x, float b) {
		//	return max(-2.*abs(x-b)+1., 0.);
		//}

		//gaussian hill
		//float hill(float x, float b) {
		//	return 1./pow(2., (50.*pow(x-b, 2.)));
		//}
        return x;
        //return sin(x - PI/2.);//sin(x) + cos(x) + sin(2.*x) + cos(2.*x) + sin(3.*x) + cos(3.*x) + sin(4.*x) + cos(5.*x);
		//return abs(x)/2.;
        //return max(x,0.); // relu
        //return 1.0/(4.0*abs(x-3.18)+1.0); // inverse
		
		// Conway's Game of Life
		//if (x == 3. || x == 11. || x == 12.){
		//	return 1.0;
		//}
		//return 0.;
		//return sin(x);

		// Wolfram's Rule 30;
		//if (x == 1. || x == 2. || x == 3.|| x == 4.){
		//	return 1.0;
		//}
		//return 0.;

		//return x;
		//if (x > 10.) {
		//	return 1.;
		//}
		//return log(x+1.);

		//return sin(1./x);
		//return (exp(2.*x)-1.)/(exp(2.*x)+1.); //tanh
		//return (-1./(pow(x, 2.)+1.)) + 1.; // similar tanh?
		//return (-cos(1.*x)+1.)/2.;

        //return x;
        //return 1./pow(2., (pow(x-4.5, 2.))); // gaussian
		//return -1./pow(2., (pow(x, 2.))) + 1.; // inverse gaussian
        //return (exp(x)-exp(-x))/(exp(x)+exp(-x));
        //return 1./(1. + exp(-x+3.)); // sigmoid
		//return (-pow(2.*(x-1.3), 2.)+1.); // power hill
		//return (-pow(2.*(x-2.5), 2.)+1.) + (-pow(2.*(x+2.5), 2.)+1.); // power hill
		//return -2.*abs(x-(1.5))+1.; // linear hill


        //if (x==0.)
        //    return 0.;
        //return sin(1./x);

		// returned value will be clipped between [0,1]
    }
</script>


<script  id="fragment-shader-2d" type="x-shader/x-fragment">
    precision mediump float;

    uniform sampler2D u_image;

    varying vec2 texCoord;

    uniform vec2 onePixel;

    uniform bool doStep;

	uniform vec4 colorMask;

	uniform float u_kernel[9];


    vec2 getCoords(vec2 coord, vec2 offset){
        return mod(coord + onePixel * offset, 1.0);
    }

	ACTIVATION_FUNCTION

    void main(void){

        if(doStep){
            float sum = texture2D(u_image, getCoords(texCoord, vec2(1.0, -1.0))).COLOR_CHANNEL * u_kernel[0]
                + texture2D(u_image, getCoords(texCoord, vec2(0.0, -1.0))).COLOR_CHANNEL * u_kernel[1]
                + texture2D(u_image, getCoords(texCoord, vec2(-1.0, -1.0))).COLOR_CHANNEL * u_kernel[2]
                + texture2D(u_image, getCoords(texCoord, vec2(1.0, 0.0))).COLOR_CHANNEL * u_kernel[3]
                + texture2D(u_image, getCoords(texCoord, vec2(0.0, 0.0))).COLOR_CHANNEL * u_kernel[4]
                + texture2D(u_image, getCoords(texCoord, vec2(-1.0, 0.0))).COLOR_CHANNEL * u_kernel[5]
                + texture2D(u_image, getCoords(texCoord, vec2(1.0, 1.0))).COLOR_CHANNEL * u_kernel[6]
                + texture2D(u_image, getCoords(texCoord, vec2(0.0, 1.0))).COLOR_CHANNEL * u_kernel[7]
                + texture2D(u_image, getCoords(texCoord, vec2(-1.0, 1.0))).COLOR_CHANNEL * u_kernel[8];
            
            float x = activation(sum);

			//x += texture2D(u_image, getCoords(texCoord, vec2(0.0, 0.0))).COLOR_CHANNEL; // cumulative display
            gl_FragColor = vec4(x, x, x, x);

        } else {
			// color masking
			gl_FragColor = texture2D(u_image, texCoord).rgba * colorMask;
            
        }
    }
</script>

<script  id="vertex-shader-2d" type="x-shader/x-vertex">
    attribute vec2 coordinates;

    varying vec2 texCoord;
    
    void main(void){
        
        texCoord = (coordinates/2.0 + 0.5);
        
        gl_Position = vec4(coordinates, 1.0, 1.0);
    
    }
</script>

<script>

// accordion settings menu
// About 
// Start State - dropdown (center, random, random boolean, image upload), edges dropdown
// Update Rule - filter (randomize button, random range), activation function, dropdown()
// Display - color, culumative, wrap


class Renderer {
	constructor(canvas) {
		canvas.height = window.innerHeight;
		canvas.width = window.innerWidth;
		this.height = canvas.height;
		this.width = canvas.width;
		
		this.gl = canvas.getContext("webgl");

		window.onresize = () => {
			if (window.innerWidth === this.width && window.innerHeight === this.height)
				return;
			this.stopRender();
			canvas.height = window.innerHeight;
			canvas.width = window.innerWidth;
			this.height = canvas.height;
			this.width = canvas.width;
			this.gl.viewport(0, 0, this.width, this.height);
			this.setState(this.generateState(this.start_state_type));
			this.beginRender();
		};
		this.channel = 'r';
		this.setBrush(5, 1);
		this.activationSource = `
		float activation(float x) {
			return x;
		}
		`;
		this.start_state_type = 'random';
	}


	compileShaders(vertexSource, fragSource, activationSource=undefined) {
		this.vertexSource = vertexSource; // saved without string replacements
		this.fragSource = fragSource;
		let gl = this.gl;

		if (activationSource){
			this.setActivationSource(activationSource);
		}
		fragSource = this.setFragValues(fragSource);

		// Create a vertex shader object
		let vertShader = gl.createShader(gl.VERTEX_SHADER);

		// Attach vertex shader source code
		gl.shaderSource(vertShader, vertexSource);

		// Compile the vertex shader
		gl.compileShader(vertShader);

		// Create fragment shader object
		let fragShader = gl.createShader(gl.FRAGMENT_SHADER);

		// Attach fragment shader source code
		gl.shaderSource(fragShader, fragSource);

		// Compile the fragmentt shader
		gl.compileShader(fragShader);

		// Create a shader program object to store
		// the combined shader program
		let shaderProgram = gl.createProgram();
		this.shader = shaderProgram;

		// Attach a vertex shader
		gl.attachShader(shaderProgram, vertShader); 

		// Attach a fragment shader
		gl.attachShader(shaderProgram, fragShader);

		// Link both programs
		gl.linkProgram(shaderProgram);

		// Use the combined shader program object
		gl.useProgram(shaderProgram);

		if(gl.getShaderInfoLog(vertShader)){
			console.warn(gl.getShaderInfoLog(vertShader));
		}
		if(gl.getShaderInfoLog(fragShader)){
			console.warn(gl.getShaderInfoLog(fragShader));
		}
		if(gl.getProgramInfoLog(shaderProgram)){
			console.warn(gl.getProgramInfoLog(shaderProgram));
		}
		let vertexBuffer = gl.createBuffer();

		/*==========Defining and storing the geometry=======*/

		let vertices = [
			-1.0, -1.0,
			1.0, -1.0,
			-1.0,  1.0,
			-1.0,  1.0,
			1.0, -1.0,
			1.0,  1.0
		];

		this.size = ~~(vertices.length/2);
		
		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
		gl.bindBuffer(gl.ARRAY_BUFFER, null);

		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

		// Get the attribute location
		let coord = gl.getAttribLocation(shaderProgram, "coordinates");

		// Point an attribute to the currently bound VBO
		gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);

		// Enable the attribute
		gl.enableVertexAttribArray(coord);
		
		// define attributes
		this.onePixelAttr = gl.getUniformLocation(shaderProgram, "onePixel");
		this.doStepAttr = gl.getUniformLocation(shaderProgram, "doStep");
		this.kernelAttr = gl.getUniformLocation(this.shader, "u_kernel[0]");
		this.colorMaskAttr = gl.getUniformLocation(this.shader, "colorMask");
	}

	setFragValues(fragSource) {
		fragSource = fragSource.replaceAll("COLOR_CHANNEL", this.channel);
		fragSource = fragSource.replace("ACTIVATION_FUNCTION", this.activationSource);
		return fragSource;
	}

	recompile() {
		this.compileShaders(this.vertexSource, this.fragSource);
	}

	getState() {
		let gl = this.gl;
		gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbb);
		let data = new Uint8Array(this.width * this.height * 4);
		gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
		return data;
	}

	setState(startState) {
		let gl = this.gl;
		
		this.stateTexture = gl.createTexture();
		gl.bindTexture(gl.TEXTURE_2D, this.stateTexture);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
		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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, startState);

		this.txa = gl.createTexture();
		gl.bindTexture(gl.TEXTURE_2D, this.txa);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
		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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
		
		this.fba = gl.createFramebuffer();
		gl.bindFramebuffer(gl.FRAMEBUFFER, this.fba);
		
		gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.txa, 0);
		
		this.txb = gl.createTexture();
		gl.bindTexture(gl.TEXTURE_2D, this.txb);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
		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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
		
		this.fbb = gl.createFramebuffer();
		gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbb);
		
		gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.txb, 0);

		gl.bindTexture(gl.TEXTURE_2D, this.stateTexture);
	}

	setActivationSource(activationSource) {
		// always requires recompilation
		this.activationSource = activationSource;
	}

	setColor(rgb) {
		// requires one rgb value to be 1.0
		// returns true if requires recompilation
		let gl = this.gl;
		this.colorMask = {r:rgb[0], g:rgb[1], b:rgb[2]};
		
		let channel = -1;
		for (let i in rgb) {
			if (rgb[i] === 1){
				channel = i;
				break;
			}
		}
		if (channel === -1)
			throw "RGB must have one full 1.0 value";

		let channel_string = ['r', 'g', 'b'][channel];
		if (this.channel === channel_string) {
			return false; // no need to recompile
		}
		this.channel = channel_string;
		return true; // need to recompile
	}

	setKernel(kernel) {
		this.kernel = kernel;
	}

	setBrush(size, value) {
		this.brush_size = size;
		let arr_size = size*size*4;
		this.brush_arr = new Uint8Array(arr_size);
		this.brush_value = value;
		for (let i=0; i<arr_size; i++) {
			this.brush_arr[i] = value*255;
		}
	}

	beginRender(){
		let gl = this.gl;
		if (this.running)
			throw 'called beginRender when already rendering'
		this.running = true;

		gl.uniform2f(this.onePixelAttr, 1/this.width, 1/this.height);
		gl.uniform1f(this.doStepAttr, true);
        gl.uniform1fv(this.kernelAttr, this.kernel);
		gl.uniform4f(this.colorMaskAttr, this.colorMask.r, this.colorMask.g, this.colorMask.b, 1.0);

		this.render();
		
	}

	stopRender(){
		this.running = false;
		if (this.updaterequest)
			window.cancelAnimationFrame(this.updaterequest);
	}

	render(){
		let gl = this.gl;

		{
			// first apply the update rule
			gl.uniform1f(this.doStepAttr, true);

			gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbb);
			gl.drawArrays(gl.TRIANGLES, 0, this.size);
			gl.bindTexture(gl.TEXTURE_2D, this.txb); // use texture b

			gl.bindFramebuffer(gl.FRAMEBUFFER, null);
			gl.drawArrays(gl.TRIANGLES, 0, this.size);

			gl.uniform1f(this.doStepAttr, false);
		}

		{
			// then apply the color masking
			gl.bindFramebuffer(gl.FRAMEBUFFER, this.fba);
			gl.drawArrays(gl.TRIANGLES, 0, this.size);
			gl.bindTexture(gl.TEXTURE_2D, this.txa); // use texture a
			
			gl.bindFramebuffer(gl.FRAMEBUFFER, null);
			gl.drawArrays(gl.TRIANGLES, 0, this.size);
		}

		if(this.running){
			this.updaterequest = window.requestAnimationFrame(()=>{this.render();});
			// setTimeout(()=>{this.render();}, 0); // set render speed
		}
	}

	poke(x, y) {
		let gl = this.gl;
		y = this.height - y; // reverse y

		x = x - Math.floor(this.brush_size/2); // center brush
		y = y - Math.floor(this.brush_size/2);
		gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, this.brush_size, this.brush_size,
                     gl.RGBA, gl.UNSIGNED_BYTE,
                     this.brush_arr);
	}

	generateState(option='random') {
		let width = this.width;
		let height = this.height;
		let cells = new Uint8Array(height * width * 4);
		this.start_state_type = option;
		switch(option) {
			case 'random':
				for(let i = 0; i < cells.length; i++){
					cells[i] = Math.floor(255 * Math.random())
				}
				cells[height * width * 2 + width*2] = 255;
				break;

			case 'random_bool':
				for(let i = 0; i < cells.length; i++){
					cells[i] = 255 * Math.floor(Math.random()*2);
				}
				break;

			case 'center': 
				for(let i = 0; i < cells.length; i++){
					cells[i] = 0;
				}
				let center = Math.floor(cells.length/2) - 2;
				if (height%2 === 0) {
					// if height is even, it breaks for some reason
					center += width*2;
				}
				cells[center] = 255;
				cells[center+1] = 255;
				cells[center+2] = 255;
				cells[center+3] = 255;
				break;
			
			case 'center_top':
				for(let i = 0; i < cells.length; i++){
					cells[i] = 0;
				}
				cells[width*2] = 255;
				cells[width*2+1] = 255;
				cells[width*2+2] = 255;
				cells[width*2+3] = 255;
				break;

			case 'empty':
				for(let i = 0; i < cells.length; i++){
					cells[i] = 0;
				}
				break;
		}
		return cells;
	}
}

function generateRandomKernel(min=-1, max=1, h_symmetry=false, v_symmetry=false) {
	let range = max - min;
	let kernel = new Float32Array(9);

	for (let i in kernel){
		kernel[i] = Math.random()*range + min;
	}

	if (h_symmetry && v_symmetry){
		kernel[2] = kernel[0];
		kernel[6] = kernel[0];
		kernel[8] = kernel[0];
		kernel[7] = kernel[1];
		kernel[5] = kernel[3];
	}
	else if (h_symmetry){
		kernel[6] = kernel[0];
		kernel[7] = kernel[1];
		kernel[8] = kernel[2];

	}
	else if (v_symmetry){
		kernel[2] = kernel[0];
		kernel[5] = kernel[3];
		kernel[8] = kernel[6];
	}
	return kernel;
}

function generateRandomColor() {
	color = [0, 0, 0]
	for (let i in color) {
		color[i] = Math.random();
	}
	color[Math.floor(Math.random()*3)] = 1;
	return color;
}



const main = () => {
	const fragmentShader = document.getElementById('fragment-shader-2d').text;
	const vertexShader = document.getElementById('vertex-shader-2d').text;
	const activationSource = document.getElementById('activation-source').text;

	let canvas = document.getElementById("renderCanvas");
	canvas.style.setProperty('left', `0px`);
	canvas.style.setProperty('right', `0px`);

	let state_type = 'random';
	let renderer = new Renderer(canvas);
	renderer.setColor(generateRandomColor());
	renderer.compileShaders(vertexShader, fragmentShader, activationSource);
	renderer.setState(renderer.generateState(state_type));
	renderer.setKernel(generateRandomKernel(-1, 1, false, false));
	// renderer.setKernel(
	// [1, 0, -1,
	//  2, 1, -2,
	//  1, 0, -1]
	// )
	renderer.beginRender();

	document.body.onkeyup = function(e){
		if(e.keyCode == 32){
			if (renderer.running)
				renderer.stopRender();
			else
				renderer.beginRender();
		}
		else if(e.keyCode == 65){
			renderer.stopRender();
			let need_recompile = renderer.setColor(generateRandomColor());
			// renderer.setActivationSource(activationSource);
			if (need_recompile)
				renderer.recompile();
			renderer.setKernel(generateRandomKernel(-1, 1, false, false));
			renderer.beginRender();
		}
		else if(e.keyCode == 87){
			// renderer.stopRender();
			renderer.setState(renderer.generateState(state_type))
		}
		else if(e.keyCode == 83){
			
		}

	}

	let down = false;
	let scale = 1;
	let x = 0;
	let y = 0;
	canvas.onmousedown = function(e){
		down = true;
		renderer.poke(e.offsetX, e.offsetY);
	}

	canvas.onmouseup = function(e){
		down = false;
	}

	canvas.onmousemove = function(e){
		x = e.offsetX;
		y = e.offsetY;
		if (down)
			renderer.poke(e.offsetX, e.offsetY);
	}

	canvas.onwheel = (e) => {
		e.preventDefault();

		let sign = -Math.sign(e.deltaY);
		scale = Math.max(1, scale+(sign*1));

		canvas.style.transform = `scale(${scale})`;
		console.log(canvas.style.left)
		let cur_top = parseInt(canvas.style.top);
		let cur_left = parseInt(canvas.style.left);
		console.log(cur_left)
		let delta_x=0, delta_y=0;
		if (sign == 1) {
			// If we're zooming in, zoom towards wherever the mouse is
			delta_x = x;
			delta_y = y;
		}
		else {
			// If we're zooming out, zoom out towards the center
			delta_x = -cur_left/scale;
			delta_y = -cur_top/scale;
		}
		console.log(delta_x)
		const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
		canvas.style.setProperty('left', `${clamp(cur_left+delta_x, 0, canvas.width)}px`);
		canvas.style.setProperty('top', `${clamp(cur_top+delta_y, 0, canvas.height)}px`);
	}
}

main();


</script>