const canvas = document.getElementById("canvas"); const container = document.getElementById("container"); const gl = canvas.getContext("webgl"); gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE); gl.disable(gl.CULL_FACE); gl.disable(gl.DEPTH_TEST); gl.clearColor(0,0,0.2,1); let lastTexture = 0; function makeBuffer(w,h) { const textureIndex = lastTexture; lastTexture++; const rb = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h); const tex = gl.createTexture(); gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 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); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { with: e=>{ gl.viewport(0,0,w,h); gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); e(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); gl.viewport(0,0,canvas.width,canvas.height); }, withTexture: cb=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); cb({texture:textureIndex}); gl.bindTexture(gl.TEXTURE_2D, null); } }; } function makeLoopBuffer(w,h) { const b0 = makeBuffer(w,h); const b1 = makeBuffer(w,h); let last = 0; return { with: e=>{ // has a side effect! if(last == 0) b1.with(e); else b0.with(e); last = 1 - last; }, withTexture: cb=>{ if(last == 0) b0.withTexture(cb); else b1.withTexture(cb); } } } function resize() { canvas.width = container.clientWidth; canvas.height = container.clientHeight; } window.addEventListener("resize",resize); resize(); const lastMouse = {x:-1000,y:-1000}; canvas.addEventListener("mousemove", e=>{ lastMouse.x = e.clientX; lastMouse.y = e.clientY; }); function buildMesh(verts, n) { const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(verts),gl.STATIC_DRAW); return _=>{ gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.vertexAttribPointer(0,n,gl.FLOAT,false,0,0); gl.enableVertexAttribArray(0); gl.drawArrays(gl.TRIANGLE_STRIP,0,verts.length/n); }; } const rect = buildMesh([-1,-1,-1,1,1,-1,1,1], 2); const startTime = new Date(); function buildMaterial(vs,fs,mesh,params) { const prec = "precision mediump float;\n"; function buildShader(type,src) { const s = gl.createShader(type); gl.shaderSource(s,prec+src); gl.compileShader(s); if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)){ console.error(gl.getShaderInfoLog(s)); return null; } return s; } function buildProgram(v,f) { const p = gl.createProgram(); gl.attachShader(p,v); gl.attachShader(p,f); gl.linkProgram(p); if(!gl.getProgramParameter(p,gl.LINK_STATUS)){ console.error(gl.getProgramInfoLog(p)); } return p; } const v = buildShader(gl.VERTEX_SHADER,vs); const f = buildShader(gl.FRAGMENT_SHADER,fs); const p = buildProgram(v,f); const locs = {}; params.push("resolution"); params.push("time"); params.forEach(pa=>{ locs[pa] = gl.getUniformLocation(p,pa); }); function setting(name, args) { if(args.length == 1 && args[0] && args[0].texture !== undefined) { gl.uniform1i(locs[name], args[0].texture); } else { const func = "uniform" + args.length + "fv"; const as = []; for(let i=0;i{ gl.useProgram(p); task.forEach(t=>{t();}); task = []; setting("resolution",[canvas.width,canvas.height]); setting("time", [(new Date() - startTime) / 1000]); gl.bindAttribLocation(p,0,"vertex"); mesh(); }; params.forEach(l=>{ o[l] = function() { task.push(_=>{setting(l, arguments);}); }; }); return o; } const simulate = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform float time; uniform vec2 resolution; uniform vec2 camera; uniform vec2 current; uniform vec2 pixelShift; uniform vec2 mouse; uniform sampler2D buffer; float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec2 uv = floor((coord*0.5+0.5)*256.0) + pixelShift; vec4 c = texture2D(buffer, (uv + 0.5) / 256.0); // x: state (0:dead, 0.25:branch, 0.5:move, 0.75:dying, 1:stable) // y: ? // z: passed time // w: ? if(c.x < 0.125) { // dead if(distance(uv, floor(current)) < 0.001) { float type = rand(vec2(time,0)) < 0.5 ? 0.25 : 1.; float r1 = rand(vec2(time,1)); float r2 = rand(vec2(time,1)); c = vec4(type,r1,0,r2); } else { vec4 cl = texture2D(buffer, (uv + vec2(-1,0) + 0.5) / 256.0); vec4 cr = texture2D(buffer, (uv + vec2(+1,0) + 0.5) / 256.0); vec4 cd = texture2D(buffer, (uv + vec2(0,-1) + 0.5) / 256.0); if(distance(cl.x,0.25) < 0.01 && cl.z > cl.w && cl.y < 0.55) { // branch trigger from left c.x = 0.5; c.y = 1.0; c.z = 0.0; c.w = rand(vec2(time,5)); // speed } else if(distance(cr.x,0.25) < 0.01 && cr.z > cr.w && cr.y > 0.45) { // branch trigger from right c.x = 0.5; c.y = 1.0; c.z = 0.0; c.w = rand(vec2(time,5)); // speed } else if(distance(cl.x,0.5) < 0.01 && cl.z > (cl.w * 0.5 + 0.5) * 0.01 && cl.y > 0.5) { // move to the right c.x = 0.5; c.y = rand(vec2(time,9)) > 0.1 ? 1.0 : 0.0; c.z = 0.0; c.w = cl.w; } else if(distance(cr.x,0.5) < 0.01 && cr.z > (cr.w * 0.5 + 0.5) * 0.01 && cr.y > 0.5) { // move to the left c.x = 0.5; c.y = rand(vec2(time,9)) > 0.1 ? 1.0 : 0.0; c.z = 0.0; c.w = cr.w; } else if(distance(cd.x,0.5) < 0.01 && cd.z > (cd.w * 0.5 + 0.5) * 0.01 && cd.y < 0.5) { if(rand(vec2(time,-6)) < 0.1) { c.x = 0.75; c.y = 0.0; c.z = 0.0; c.w = 0.0; } else { // move forward c.x = 0.5; c.y = cd.y + rand(vec2(time,2)) * 0.2; c.z = 0.0; c.w = cd.w; } } else { // still dead float dyingBlur = 0.; for(int i=0;i<3;i++) { for(int j=0;j<3;j++) { if(i!=1 || j!=1) { vec4 cc = texture2D(buffer, (uv + vec2(i-1,j-1) + 0.5) / 256.0); if(distance(cc.x,0.75) < 0.01) dyingBlur += 0.1; else if(distance(cc.x,0.) < 0.01) dyingBlur = max(dyingBlur, cc.y*0.5); } } } c.y = dyingBlur; } } } else { if(c.x < 0.375) { // branch if(c.z > c.w) { c.x = 1.; } } else if(c.x < 0.625) { // move } else if(c.x < 0.875) { // dying } else { // stable } c.z += 0.004; } float size = 100.0; // tile size vec2 mpos = mouse * resolution / size - camera; vec2 mi = floor(mpos); vec2 mindex = mi + vec2(20,11); vec2 md = abs(mindex - uv); if(max(md.x,md.y) < 2.0) c = vec4(0.); gl_FragColor = c; } `,rect,["buffer","current","pixelShift","mouse","camera"]); const background = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform vec2 resolution; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec2 resolution; uniform float time; uniform vec2 camera; uniform vec2 mouse; uniform sampler2D buffer; void main() { float size = 100.0; // tile size vec2 pos = coord * resolution / size - camera; vec2 l = fract(pos); vec3 col = vec3(0.2); vec2 ul = l - 0.5; // [-0.5,0.5] vec2 dd = abs(ul) - 0.4; // box float d = length(max(dd,vec2(0))) + min(max(dd.x,dd.y),0.); if(d < 0.) { col = vec3(0.8); vec2 i = floor(pos); vec2 index = i + vec2(20,11); // TODO vec4 data = texture2D(buffer, (index + 0.5) / 256.0); col = data.xyz; if(data.x < 0.125) { // dead col = vec3(0.3+pow(data.y,0.5)*0.7,0.3,0.3); } else if(data.x < 0.375) { // branch col = vec3(0.1,0.8,0); } else if(data.x < 0.625) { // move col = vec3(0.1,0.5,0); } else if(data.x < 0.875) { // dying col = vec3(1,0.2,0); } else { // stable col = vec3(0.1,0.8,0); } vec2 coordCenter = ((i+0.5) + camera) * size / resolution; vec2 sqd = abs((coordCenter - mouse) * resolution / 200.); col *= smoothstep(0.5,1.5,max(sqd.x,sqd.y)); } else col = vec3(d); gl_FragColor = vec4(col,1); } `,rect,["camera","buffer","mouse"]); let memory = makeLoopBuffer(256,256); let camera = {x:0,y:0}; let current = {x:20,y:0}; let targetX = 20; let lastTime = startTime; function render() { const now = new Date(); const delta = (now - lastTime) / 1000.; // Computation if(Math.abs(targetX-current.x) < 0.5) { current.y += (-camera.y > current.y-15 ? 0.2 : 0.08); if(Math.random() < 0.01) { targetX = 20 + Math.round((Math.random()*2-1) * 10); } } else if(targetX > current.x) { current.x += 0.3; } else if(targetX < current.x) { current.x -= 0.3; } camera.y -= 0.08; // Preparation const pixelShift = {x:0,y:0}; if(camera.y < -1.0) { // per one tile camera.y += 1; pixelShift.y += 1; current.y -= 1; } // Initialize gl.clear(gl.COLOR_BUFFER_BIT); let mi = {x: lastMouse.x / canvas.width * 2 - 1, y: - (lastMouse.y / canvas.height * 2 - 1)}; // Background memory.withTexture(i=>{ simulate.buffer(i); simulate.pixelShift(pixelShift.x,pixelShift.y); simulate.current(current.x, current.y); simulate.camera(camera.x, camera.y); simulate.mouse(mi.x, mi.y); memory.with(_=>{ simulate(); }); }); background.camera(camera.x, camera.y); background.mouse(mi.x, mi.y); memory.withTexture(i=>{ background.buffer(i); background(); }); lastTime = now; requestAnimationFrame(render); } render();

growing vine