JSFiddle - React, Tailwind, and code Playground
by mikola
HTML
<script src="https://raw.github.com/empaempa/GLOW/master/build/GLOW.js"></script>
<div id="container"></div>
JavaScript
// create a context and set white background
var context = new GLOW.Context();
context.setupClear( { red: 1, green: 1, blue: 1 } );
//Make sure we have floating point textures
if( !context.enableExtension( "OES_texture_float" )) {
alert( "No support for float textures!" );
return;
}
// attach the context's DOM element
var container = document.getElementById("container");
container.appendChild( context.domElement );
//Allocate ping pong buffers
var buffer_dims = [ 128, 128 ];
var buffers = new Array(2);
var current_buffer = 0;
(function() {
//Create initial conditions
var initial_state = new Float32Array(buffer_dims[0] * buffer_dims[1] * 4);
var ptr = 0;
for(var j=0; j<buffer_dims[1]; ++j) {
for(var i=0; i<buffer_dims[0]; ++i) {
initial_state[ptr] = Math.random();
initial_state[ptr+1] = 0;
initial_state[ptr+2] = 0;
initial_state[ptr+3] = 0;
ptr += 4;
}
}
//Initialize buffers
for(var i=0; i<buffers.length; ++i) {
buffers[i] = new GLOW.FBO( {
width: buffer_dims[0],
height: buffer_dims[1],
magFilter: GL.NEAREST,
minFilter: GL.NEAREST,
type: GL.FLOAT,
depth: false,
stencil: false,
data: initial_state
} );
}
})();
//Pass through vertex shader
var passThruVS = [
"attribute vec3 vertices;",
"attribute vec2 uvs;",
"varying vec2 uv;",
"void main(void)",
"{",
"uv = uvs;",
"gl_Position = vec4( vertices.x, vertices.y, 1.0, 1.0 );",
"}"
].join( "\n" );
//Updates the state of a single cell
var updateStateFS = [
"#ifdef GL_ES",
"precision highp float;",
"#endif",
"uniform sampler2D state;",
"varying vec2 uv;",
"void main( void )",
"{",
"gl_FragColor = texture2D(state, uv);",
"}"
].join(...