const resizeCallback = []; function resize() { const nw = container.clientWidth; const nh = container.clientHeight; resizeCallback.forEach(cb=>{ cb(nw,nh); }); } window.addEventListener("resize",resize); // Prepare WebGL let currentTime = new Date(); let randomValues, randomValues10; function shuffleRandom() { randomValues = [Math.random(), Math.random(), Math.random(), Math.random()]; } function shuffleRandom10() { randomValues10 = [Math.random(), Math.random(), Math.random(), Math.random()]; } shuffleRandom(); shuffleRandom10(); const canvas = document.getElementById("canvas"); const container = document.getElementById("container"); const gl = canvas.getContext("webgl2"); gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE); gl.disable(gl.CULL_FACE); gl.enable(gl.DEPTH_TEST); gl.depthMask(false); gl.clearColor(0,0,0.2,1); resizeCallback.push((w,h)=>{ canvas.width = w; canvas.height = h; gl.viewport(0,0,w,h); }); // Mesh and Material function buildMesh(verts, dim, nrm) { 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); const stride = 4*(dim+nrm); gl.vertexAttribPointer(0,dim,gl.FLOAT,false,stride,0); gl.enableVertexAttribArray(0); if(nrm > 0) { const offset = 4*dim; gl.vertexAttribPointer(1,nrm,gl.FLOAT,false,stride,offset); gl.enableVertexAttribArray(1); } gl.drawArrays(gl.TRIANGLE_STRIP,0,verts.length/(dim+nrm)); }; } const rect = buildMesh([-1,-1,-1,1,1,-1,1,1], 2, 0); const cube = buildMesh([ -1,-1,-1,-1,0,0, -1,-1,+1,-1,0,0, -1,+1,-1,-1,0,0, -1,+1,+1,-1,0,0, -1,+1,+1,-1,0,0, +1,-1,-1,+1,0,0, +1,-1,-1,+1,0,0, +1,-1,+1,+1,0,0, +1,+1,-1,+1,0,0, +1,+1,+1,+1,0,0, +1,+1,+1,+1,0,0, -1,-1,-1,0,-1,0, -1,-1,-1,0,-1,0, +1,-1,-1,0,-1,0, -1,-1,+1,0,-1,0, +1,-1,+1,0,-1,0, +1,-1,+1,0,-1,0, -1,+1,-1,0,+1,0, -1,+1,-1,0,+1,0, +1,+1,-1,0,+1,0, -1,+1,+1,0,+1,0, +1,+1,+1,0,+1,0, +1,+1,+1,0,+1,0, -1,-1,-1,0,0,-1, -1,-1,-1,0,0,-1, +1,-1,-1,0,0,-1, -1,+1,-1,0,0,-1, +1,+1,-1,0,0,-1, +1,+1,-1,0,0,-1, -1,-1,+1,0,0,+1, -1,-1,+1,0,0,+1, +1,-1,+1,0,0,+1, -1,+1,+1,0,0,+1, +1,+1,+1,0,0,+1 ], 3, 3); let endPeriod = false; 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.push("phase"); params.push("randoms"); params.push("randoms10"); params.forEach(pa=>{ locs[pa] = gl.getUniformLocation(p,pa); }); function setting(name, args) { if(args.length == 1 && 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",[1,canvas.height/canvas.width]); const sec = endPeriod ? 1 : currentTime.getMilliseconds() / 1000; setting("time", [sec]); setting("phase", [currentTime.getSeconds(), currentTime.getMinutes(), currentTime.getHours()]); setting("randoms", randomValues); setting("randoms10", randomValues10); gl.bindAttribLocation(p,0,"vertex"); gl.bindAttribLocation(p,1,"normal"); mesh(); }; params.forEach(l=>{ o[l] = function() { task.push(_=>{setting(l, arguments);}); }; }); return o; } function onPeriod(cb) { endPeriod = true; cb(); endPeriod = false; } // FrameBuffers const clone = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D texture; void main() { vec2 uv = coord * 0.5 + 0.5; vec3 col = texture2D(texture, uv).rgb; gl_FragColor = vec4(col,1); } `,rect,["texture"]); let lastTexture = 0; const RenderBuffer = _=>{ const textureIndex = lastTexture++; const rb = gl.createRenderbuffer(); let w = canvas.width, h = canvas.height; gl.bindRenderbuffer(gl.RENDERBUFFER, rb); const samples = Math.min(8, gl.getParameter(gl.MAX_SAMPLES)); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA8, w, h); const tex = gl.createTexture(); 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.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); const drb = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, drb); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT16, w, h); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, drb); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, rb); const ofb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, ofb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { resize: (nw,nh)=>{ w = nw, h = nh; gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA8, w, h); gl.bindRenderbuffer(gl.RENDERBUFFER, drb); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT16, w, h); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); }, render: e=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.depthMask(true); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.depthMask(false); e(); gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fb); gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, ofb); gl.blitFramebuffer(0, 0, w, h, 0, 0, w, h, gl.COLOR_BUFFER_BIT, gl.NEAREST); gl.bindFramebuffer(gl.FRAMEBUFFER, null); }, use: _=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); return { texture: textureIndex }; } }; }; const LoopBuffer = _=>{ const buffers = [RenderBuffer(), RenderBuffer()]; resizeCallback.push((nw,nh)=>{ buffers[1].resize(nw,nh); buffers[1].render(_=>{ clone.texture(buffers[0].use()); clone(); }); buffers[0].resize(nw,nh); buffers[0].render(_=>{ clone.texture(buffers[1].use()); clone(); }); }); return { render: e=>{ const target = buffers.pop(); target.render(e); buffers.unshift(target); }, use: _=>{ return buffers[0].use(); } }; }; // Text Canvas const textCanvas = document.getElementById("text"); const ctx = textCanvas.getContext("2d"); ctx.font = "10px 'Heebo'"; ctx.measureText("M"); // Trigger font loading resizeCallback.push((w,h)=>{ textCanvas.width = w; textCanvas.height = h; }); const CanvasTexture = (canvas,render)=>{ const textureIndex = lastTexture++; let w = textCanvas.width, h = textCanvas.height; const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 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.LINEAR); 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); const o = { render: _=>{ ctx.font = "10px 'Heebo'"; if(Math.abs(ctx.measureText("M").width - 8.764) < 0.01) { const proc = _=>{ render(canvas); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.generateMipmap(gl.TEXTURE_2D); }; o.render = proc; proc(); } }, use: _=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); return { texture: textureIndex }; } }; resizeCallback.push((nw,nh)=>{ w = nw, h = nh; o.render(); }); return o; }; let displayTime = currentTime; function renderText(canvas) { const w = canvas.width, h = canvas.height; ctx.fillStyle = "#000000"; ctx.fillRect(0,0,w,h); ctx.fillStyle = "#ff00ff"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowColor = "#00ffff"; ctx.shadowBlur = w*0.012; ctx.font = Math.floor(w*0.07) + "px 'Heebo'"; const now = displayTime; function pad(n){ return n < 10 ? "0" + n : n; } let nowStr = ""; nowStr += now.getFullYear() + "-" + pad(now.getMonth()+1) + "-" + pad(now.getDate()) + " "; nowStr += pad(now.getHours()) + ":" + pad(now.getMinutes()) + ":" + pad(now.getSeconds()); ctx.fillText(nowStr,w/2,h/2); } // Main Program resize(); const color = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec3 color; void main() { gl_FragColor = vec4(color,1); } `,rect,["color"]); const background = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec2 resolution; uniform vec4 randoms; uniform float time; uniform vec3 phase; uniform sampler2D text; uniform sampler2D screen; uniform sampler2D self; uniform float trigger; uniform float type; float rand(vec2 co){ return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453); } vec3 hue(float x) { // x: [0,1] float palette = mod(floor(phase.y/15.),2.); // [0,2) float h = phase.z/12. + palette*0.5; return pow(cos((vec3(1,0,-1)/3.+h+(x-0.5)*0.2)*3.1415926535*2.)*0.5+0.5,vec3(1./1.5)); } float sdBox(vec2 p, float s) { vec2 q = abs(p) - s; return length(max(q,0.)) + min(max(q.x,q.y),0.); } float saturate(float x) { return clamp(x,0.,1.); } vec2 umod(vec2 v, vec2 s) { return v - floor(v/s) * s; } void main() { vec2 uv = coord * 0.5 + 0.5; vec2 pos = coord * resolution; vec3 textData = texture2D(text, uv).rgb; vec2 screenPos = pos; vec3 col = vec3(1.); float strength = mod(phase.x,10.)/9.; // [0,1] float level = floor(phase.x/10.); // [0,6) float growth = mod(phase.y,5.)/4.; // [0,1] float effect = mod(floor(phase.y/5.),3.); // [0,3) float palette = mod(floor(phase.y/15.),2.); // [0,2) // display on a cube (mod(floor(phase.y/15.),2.)) if(type < 0.5) { // square // static, slide, store, move, scale, rotate float size = mix(0.05,0.2,growth*strength); if(level>1.5) size *= 1.-pow(1.-saturate(time*8.),2.); vec2 center = vec2(rand(randoms.xy+0.),rand(randoms.xy+1.))*2.-1.; center *= max(min(1., level), growth) * 0.5 * resolution; float da = floor(rand(randoms.xy+2.)*4.)*3.1415926535/2.; vec2 dc = vec2(cos(da),sin(da)) * 2. * size * (level>3.5 ? pow(saturate(time*2.),6.) : smoothstep(0.,1.,time)); if(level>3.5) dc *= level>4.5 ? 2. : 1.5; if(level>0.5) center += dc; float sizeScaled = size; if(level>3.5) sizeScaled *= 1. + (1.-pow(1.-saturate(time*2.-1.),2.))*(level>4.5 ? 2. : 1.); float d = sdBox(pos-center,sizeScaled); float removed = 1.0; vec3 base = texture2D(screen, screenPos/resolution*0.5+0.5).rgb; if(level>2.5) { if(d < 0.) { screenPos = (screenPos-center)*size/sizeScaled + center; screenPos -= dc; col *= mix(vec3(1.),base,0.5); } else { if(level>4.5) { float fac = 1.-pow(time,5.); float rot = sign(rand(randoms.xy+3.)-0.5) * (1.-pow(fac,2.)); rot *= (rand(randoms.xy+4.)*0.8+0.2) * mix(1.,3.,pow(strength,2.)) * mix(0.2,1.,growth); screenPos *= mat2(cos(rot),-sin(rot),sin(rot),cos(rot)); screenPos /= 1.+(1.-fac)*mix(0.05,0.2,growth); } removed = sdBox(pos-center+dc,size); } } col *= texture2D(screen, screenPos/resolution*0.5+0.5).rgb; if(removed<0.) col = vec3(1.-exp(removed*200.)*0.5); vec3 hc = hue(randoms.w); if(level<0.5) hc = mix(vec3(1.), hc, strength); if(d < 0.) col *= hc; else col *= mix(vec3(1.), 0.5 * hc, exp(-d*100.)); if(level<1.5) col = mix(vec3(1.), col, 1.-pow(time,2.)); } else if(type < 1.5) { // grids // glow, pattern, slide, half, rotate, turn // TODO: growth float scale = level<2.5 ? 7.6 : mix(5.,11.,rand(randoms.zw+3.)); scale *= mix(1.,5.,growth); vec2 mpos = pos*scale; if(level>2.5) mpos += vec2(rand(randoms.zw+0.), rand(randoms.zw+1.)); float rota = 0., rotaDif = 0.; vec2 gridpos = mpos; if(level>3.5) { rota = rand(randoms.zw+2.)*3.1415926535*2.; if(level>4.5) rotaDif = mix(0., sign(rand(randoms.zw+3.)-0.5)*3.1415926535*0.5, pow(time,6.)); float a = rota + rotaDif; gridpos *= mat2(cos(a),-sin(a),sin(a),cos(a)); a = rota; mpos *= mat2(cos(a),-sin(a),sin(a),cos(a)); } vec2 ip = floor(gridpos+0.5); vec2 lp = fract(gridpos+0.5); bool dir = rand(randoms.xy) < 0.5; float moveScale = floor(growth*4.)+1.; float move = pow(time,3.) * (floor(randoms.z)*moveScale+moveScale) * sign(randoms.x-0.5); bool shift = false; vec2 shiftVal = vec2(0.); if(level>1.5) { if(dir) { shift = rand(randoms.yx + ip.y) < mix(0.2,0.8,strength); if(shift) shiftVal = vec2(move,0); } else { shift = rand(randoms.yx + ip.x) < mix(0.2,0.8,strength); if(shift) shiftVal = vec2(0,move); } } vec2 up = floor(mpos+0.5); bool ushift = false; if(level>1.5) { if(dir) { ushift = rand(randoms.yx + up.y) < mix(0.2,0.8,strength); } else { ushift = rand(randoms.yx + up.x) < mix(0.2,0.8,strength); } } if(shift) { ushift = false; float a = rotaDif; mpos *= mat2(cos(a),-sin(a),sin(a),cos(a)); mpos += shiftVal; screenPos *= mat2(cos(a),-sin(a),sin(a),cos(a)); a = rota; screenPos += shiftVal*mat2(cos(a),sin(a),-sin(a),cos(a))/scale; } ip = floor(mpos+0.5); lp = fract(mpos+0.5); float d = sdBox(lp-0.5,0.49); if(trigger<0.5 || mod(phase.x,10.)>8.5 || level>2.5) col *= 1.-exp(min(0.,d)*50.)*0.2; if((d < 0. || level > 2.5) && !ushift) col *= texture2D(screen, screenPos/resolution*0.5+0.5).rgb; if(d < 0.) { bool active = false; if(level<0.5) active = rand(ip + randoms.x) < strength * 0.5; else if(level<1.5) { vec2 size = floor(vec2(rand(randoms.yz+0.),rand(randoms.yz+1.))*3.)+2.; vec2 offset = floor(vec2(rand(randoms.yz+2.),rand(randoms.yz+3.))*size); vec2 dp = umod(ip + offset, size); active = rand(dp + randoms.x) < mix(0.1,0.9,strength); if(dp.x < 0.5 && dp.y < 0.5) active = true; if(dp.x > size.x-1.5 && dp.y > size.y-1.5) active = false; } else active = shift && rand(ip + randoms.x) < 0.5; if(active) { float coef = (1.-exp(d*50.)) * (level<1.5 ? 1. : 1.-pow(1.-saturate(time*3.),2.)); col = mix(col, mix(vec3(1.), col, 0.5), coef); col *= mix(vec3(1.), hue(randoms.w), coef); } } if(level<1.5) col = mix(vec3(1.), col, 1.-pow(time,2.)); } else if(type < 2.5) { // slicing cube // cube, slice, remain, background, scale, recur col = mix(vec3(1.), texture2D(screen, screenPos/resolution*0.5+0.5).rgb, exp(-time*0.2)); if(level<1.5) col = mix(vec3(1.), col, 1.-pow(time,2.)); } gl_FragColor = vec4(col,1); } `,rect,["text","screen","self","type","trigger"]); const object = buildMaterial(` attribute vec3 vertex; attribute vec3 normal; varying vec3 coord; varying vec4 firstPos; varying vec4 projPos; varying vec3 n; uniform vec2 resolution; uniform float time; uniform vec3 phase; uniform vec4 randoms; uniform vec4 randoms10; uniform float type; uniform float count; float rand(vec2 co){ return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453); } float ssf(float x) { return -pow(x,3.) + 2.*pow(x,2.); } vec3 sampleSphere(vec2 seed) { float r0 = rand(seed+0.); float r1 = rand(seed+1.); float r2 = rand(seed+2.); float th = r0 * 3.1415926535 * 2. + r2; float u = r1 * 2. - 1.; vec3 pos = vec3(sqrt(1.-u*u)*vec2(cos(th),sin(th)), u); float a = r2 * 3.1415926535 * 2.; pos.yz *= mat2(cos(a),sin(a),-sin(a),cos(a)); return pos; } mat3 axisAngle(vec3 a, float t) { float s = sin(t); float c = cos(t), u = 1. - c; float x = a.x, y = a.y, z = a.z; return mat3( c+x*x*u, x*y*u-z*s, y*s+x*z*u, z*s+x*y*u, c+y*y*u, -x*s+y*z*u, -y*s+x*z*u, x*s+y*z*u, c+z*z*u ); } float saturate(float x) { return clamp(x,0.,1.); } vec4 proj(vec3 v, float b, float t) { float strength = mod(phase.x,10.)/9.; // [0,1] float level = floor(phase.x/10.); // [0,6) float growth = mod(phase.y,5.)/4.; // [0,1] float effect = mod(floor(phase.y/5.),3.); // [0,3) float palette = mod(floor(phase.y/15.),2.); // [0,2) if(type < 1.5) return vec4(0,0,0,1); vec4 worldPos = vec4(v,1); float locA = mod(b,10.)+t; locA = locA < 1. ? ssf(locA) : locA; if(level>2.5) locA = randoms.z * 100. + pow(saturate(t*1.5-0.5),2.)*mix(3.,6.,growth); float a = locA * 3.1415926535*2./60.*3.; worldPos.y *= 0.33; worldPos.y += 0.33*2.*(count-1.); worldPos.xyz *= 1. + t * exp(-t*20.) * 3.; if(level>2.5) worldPos.xyz *= 0.8 + randoms.y * 0.4; if(level>3.5) worldPos.xyz *= 1. + (1.-pow(t,2.))*mix(0.3,0.6,growth); float rotPos = floor(randoms.z*3.); if(level>0.5 && abs(count-rotPos) < 0.5) { float r = smoothstep(0.,1.,smoothstep(0.,1.,t))*2.*3.1415926535/2.; worldPos.xz *= mat2(cos(r),-sin(r),sin(r),cos(r)); } if(randoms.x*3.<1.) worldPos.xy *= mat2(0,-1,1,0); else if(randoms.x*3.<2.) worldPos.zy *= mat2(0,-1,1,0); worldPos.xyz *= mix(0.1,0.35,max(growth,0.3*level/5.)); vec4 baseSeed = level>2.5 ? randoms : randoms10; a *= 0.8 + rand(baseSeed.xy+1.)*0.4; vec3 axis = sampleSphere(baseSeed.zw+1.); worldPos.xyz *= axisAngle(axis, a); a *= 0.8 + rand(baseSeed.xy+2.)*0.4; axis = sampleSphere(baseSeed.zw+2.); worldPos.xyz *= axisAngle(axis, a); vec4 viewPos = worldPos - vec4(0,0,-0.2,0); float near = 0.01; float far = 10.; float fovy = 3.1415926535 * 0.5; float f = 1. / tan(fovy / 2.); return viewPos * mat4( f / resolution.x, 0, 0, 0, 0, f / resolution.y, 0, 0, 0,0,2./(far-near),0, 0,0,(far+near)/(far-near),1 ); } void main() { coord = vertex; n = normal; projPos = proj(vertex, phase.x, time); firstPos = proj(vertex, phase.x, 0.); gl_Position = projPos; } `,` varying vec3 coord; varying vec3 n; varying vec4 projPos; varying vec4 firstPos; uniform vec2 resolution; uniform float time; uniform float count; uniform float trigger; uniform vec3 phase; uniform vec4 randoms; uniform sampler2D screen; uniform sampler2D self; vec3 hue(float x) { // x: [0,1] float palette = mod(floor(phase.y/15.),2.); // [0,2) float h = phase.z/12. + palette*0.5; return pow(cos((vec3(1,0,-1)/3.+h+(x-0.5)*0.2)*3.1415926535*2.)*0.5+0.5,vec3(1./1.5)); } float sdBox(vec2 p, vec2 s) { vec2 q = abs(p) - s; return length(max(q,0.)) + min(max(q.x,q.y),0.); } float ssf(float x) { return -pow(x,3.) + 2.*pow(x,2.); } void main() { float strength = mod(phase.x,10.)/9.; // [0,1] float level = floor(phase.x/10.); // [0,6) float growth = mod(phase.y,5.)/4.; // [0,1] float effect = mod(floor(phase.y/5.),3.); // [0,3) float palette = mod(floor(phase.y/15.),2.); // [0,2) vec3 normal = n; float b = phase.x + time; float t = time; float locA = mod(b,10.); float a = (locA < 1. ? ssf(locA) : locA) * 3.1415926535*2./60.*3.; float rotPos = floor(randoms.z*3.); if(level>0.5 && abs(count-rotPos) < 0.5) { float r = smoothstep(0.,1.,smoothstep(0.,1.,t))*2.*3.1415926535/2.; normal.xz *= mat2(cos(r),-sin(r),sin(r),cos(r)); } if(randoms.x*3.<1.) normal.xy *= mat2(0,-1,1,0); else if(randoms.x*3.<2.) normal.zy *= mat2(0,-1,1,0); normal.xy *= mat2(cos(a),sin(a),-sin(a),cos(a)); normal.xz *= mat2(cos(a),sin(a),-sin(a),cos(a)); vec2 screenPos = projPos.xy/projPos.w; vec2 uv = firstPos.xy/firstPos.w * 0.5 + 0.5; vec3 scr = texture2D(screen, uv).rgb; if(level>4.5) scr = mix(scr, texture2D(self, uv).rgb, 1.-pow(1.-time,2.)); vec3 col = vec3(1.); if(level>1.5) col *= scr; if(level>0.5 && abs(count-rotPos) < 0.5) { float coef = 1.-pow(1.-time,2.); col = mix(col, mix(vec3(1.), col, 0.5), coef); if(level<1.5) coef *= 1.-pow(time,7.); col *= mix(vec3(1.), hue(randoms.w), coef); } float shade = 1.; shade *= mix(1., dot(normal,normalize(vec3(0,1,2)))*0.5+0.5, 0.4); vec3 viewDir = normalize(vec3(screenPos*resolution,0.3)); shade *= mix(0.8,1.0,pow(abs(reflect(viewDir,normal).y),2.)); float borderDist = min(sdBox(coord.xy*vec2(1.,3.),vec2(1.,3.)), min(sdBox(coord.yz*vec2(3.,1.),vec2(3.,1.)), sdBox(coord.zx,vec2(1.)))); if(level>0.5) shade *= 1.- exp(borderDist*5.)*0.1; if(mod(phase.x,10.)<0.5) shade = mix(1., shade, 1.-pow(1.-time,2.)); if(trigger>0.5 && mod(phase.x,10.)<8.5 && level<2.5) shade = 1.0; shade = pow(shade, 0.5); col *= shade; gl_FragColor = vec4(col,1); } `,cube,["type","count","screen","trigger","self"]); const clock = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec2 resolution; uniform sampler2D text; void main() { vec2 uv = coord * 0.5 + 0.5; vec3 textData = texture2D(text, uv).rgb; gl_FragColor = vec4(vec3(0),textData.g); } `,rect,["text"]); const postprocess = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec2 resolution; uniform float time; uniform vec3 phase; uniform float trigger; uniform sampler2D text; uniform sampler2D texture; uniform vec4 randoms; float saturate(float x) { return clamp(x,0.,1.); } float rand(vec2 co){ return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453); } vec3 rand3(vec3 co){ return fract(sin(dot(co.xyz, vec3(12.9898,78.233,39.528)) * vec3(0.592,1.923,2.159)) * 43758.5453 + 0.582); } vec3 hue(float x) { // x: [0,1] float palette = mod(floor(phase.y/15.),2.); // [0,2) float h = phase.z/12. + palette*0.5; return pow(cos((vec3(1,0,-1)/3.+h+(x-0.5)*0.2)*3.1415926535*2.)*0.5+0.5,vec3(1./1.5)); } vec3 noise(vec3 seed) { vec3 u = floor(seed); vec3 f = fract(seed); vec3 p000 = rand3(u+vec3(0,0,0)); vec3 p001 = rand3(u+vec3(0,0,1)); vec3 p010 = rand3(u+vec3(0,1,0)); vec3 p011 = rand3(u+vec3(0,1,1)); vec3 p100 = rand3(u+vec3(1,0,0)); vec3 p101 = rand3(u+vec3(1,0,1)); vec3 p110 = rand3(u+vec3(1,1,0)); vec3 p111 = rand3(u+vec3(1,1,1)); f = smoothstep(0.,1.,f); return mix( mix(mix(p000,p001,f.z), mix(p010,p011,f.z), f.y), mix(mix(p100,p101,f.z), mix(p110,p111,f.z), f.y), f.x ); } vec3 of(vec3 seed) { return (noise(seed) + noise(seed*2.)/2.) / 1.5; } void main() { float strength = mod(phase.x,10.)/9.; // [0,1] float level = floor(phase.x/10.); // [0,6) float growth = mod(phase.y,5.)/4.; // [0,1] float effect = mod(floor(phase.y/5.),3.); // [0,3) float palette = mod(floor(phase.y/15.),2.); // [0,2) vec2 uv = coord * 0.5 + 0.5; vec2 posCoord = coord*resolution*10.; if(effect > 1.5) posCoord = floor(posCoord*1.3); vec2 di = of(vec3(posCoord,randoms.x*1000.)).xy*2.-1.; if(effect > 0.5) { uv += di * 0.01 * pow(saturate(time*2.-1.),2.); } vec3 col = texture2D(texture, uv).rgb; if(trigger<0.5) { vec3 textData = texture2D(text, uv).rgb; if(mod(phase.x,10.) < 0.5) col *= 1.-textData.g*pow(1.-time,2.); float dist = 3.; float vignette = pow(normalize(vec3(coord*resolution,dist)).z,4.); col *= mix(1., vignette, mix(0.6, 1., pow(time,0.2))); if(palette>0.5) col = 1.-col; } else if(mod(phase.y,15.)>13.5 && phase.x>54.5) col = 1.-col; // TODO: verify gl_FragColor = vec4(col,1); } `,rect,["texture", "text", "phase", "trigger"]); const screenBuffer = LoopBuffer(); const mainBuffer = LoopBuffer(); const canvasTexture = CanvasTexture(textCanvas, renderText); screenBuffer.render(_=>{ color.color(1,1,1); color(); }); const animationTypes = 3; let type = 0; function shuffleType() { type += 1 + Math.floor(Math.random()*(animationTypes-1)); type %= animationTypes; } shuffleType(); function render() { const now = new Date(); const trigger = currentTime.getSeconds() != now.getSeconds(); if(trigger) { onPeriod(_=>{ let secs = Math.floor(now / 1000); let triggerLevel = (_=>{ if(secs%10 != 0) return 0; secs/=10; // strength if(secs%6 != 0) return 1; secs/=6; // pattern & level if(secs%5 != 0) return 2; secs/=5; // growth if(secs%3 != 0) return 3; secs/=3; // glitchy if(secs%4 != 0) return 4; secs/=4; // color palette return 5; // hue })(); // Update if(triggerLevel >= 1) { displayTime = now; canvasTexture.render(); } // Screen screenBuffer.render(_=>{ // Background background.type(type); background.text(canvasTexture.use()); background.screen(screenBuffer.use()); background.self(mainBuffer.use()); background.trigger(1); background(); // Object gl.depthMask(true); object.screen(screenBuffer.use()); object.self(mainBuffer.use()); object.trigger(1); object.type(type); for(let i=0;i<3;i++) { object.count(i); object(); } gl.depthMask(false); if(triggerLevel >= 1) { // Text gl.enable(gl.BLEND); gl.disable(gl.DEPTH_TEST); clock.text(canvasTexture.use()); clock(); gl.disable(gl.BLEND); gl.enable(gl.DEPTH_TEST); } }); screenBuffer.render(_=>{ // PostProcess postprocess.texture(screenBuffer.use()); postprocess.text(canvasTexture.use()); postprocess.trigger(1); postprocess(); }); shuffleRandom(); if(triggerLevel >= 1) { shuffleType(); shuffleRandom10(); } }); } currentTime = now; mainBuffer.render(_=>{ // Background background.type(type); background.text(canvasTexture.use()); background.screen(screenBuffer.use()); background.self(mainBuffer.use()); background.trigger(0); background(); // Object gl.depthMask(true); object.screen(screenBuffer.use()); object.self(mainBuffer.use()); object.trigger(0); object.type(type); for(let i=0;i<3;i++) { object.count(i); object(); } gl.depthMask(false); }); // PostProcess postprocess.texture(mainBuffer.use()); postprocess.text(canvasTexture.use()); postprocess.trigger(0); postprocess(); requestAnimationFrame(render); } render();

Then / old style