const GL = _=>{ const o = {}; const randSeed = Math.random() * Math.PI * 2; const startTime = new Date(); const canvas = document.getElementById("canvas"); o.canvas = canvas; const container = document.getElementById("container"); const gl = canvas.getContext("webgl2"); gl.getExtension("EXT_color_buffer_float"); gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE,gl.ONE,gl.ONE); gl.disable(gl.CULL_FACE); gl.enable(gl.DEPTH_TEST); gl.depthMask(false); gl.clearColor(0.2,0.2,0.2,1); let width = 1, height = 1; const resizeCallback = []; o.resize = _=>{ width = container.clientWidth; height = container.clientHeight; canvas.width = width; canvas.height = height; gl.viewport(0,0,width,height); resizeCallback.forEach(cb=>{ cb(width,height); }); }; window.addEventListener("resize", o.resize); o.resize(); // 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); function buildMaterial(vs,fs,mesh,params) { const prec = "#version 300 es\nprecision 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("randSeed"); params.forEach(pa=>{ locs[pa] = gl.getUniformLocation(p,pa); }); function setting(name, ix, n, args) { if(args.length == 1 && args[0].texture !== undefined) { gl.activeTexture(gl.TEXTURE0 + ix); gl.bindTexture(gl.TEXTURE_2D, args[0].texture); gl.uniform1i(locs[name], ix); } else { const func = "uniform" + n + "fv"; const as = []; for(let i=0;i{ gl.useProgram(p); task.forEach(t=>{t();}); task = []; setting("resolution", 0, 2, [width/height,1]); const sec = (new Date() - startTime) / 1000; setting("time", 0, 1, [sec]); setting("randSeed", 0, 1, [randSeed]); gl.bindAttribLocation(p,0,"vertex"); gl.bindAttribLocation(p,1,"normal"); mesh(); }; for(let i=0;i{setting(l, j, arguments.length, arguments);}); }; o[l].v2 = function(a) { task.push(_=>{setting(l, j, 2, a);}); } } return o; } // FrameBuffers const clone = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` in vec2 coord; uniform sampler2D tex; out vec4 fragColor; void main() { vec2 uv = coord * 0.5 + 0.5; vec3 col = texture(tex, uv).rgb; fragColor = vec4(col,1); } `,rect,["tex"]); const RenderBuffer = _=>{ const rb = gl.createRenderbuffer(); let w = width, h = 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.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 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.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: _=>{ return { texture: tex }; }, copyCanvas: _=>{ gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, front); gl.generateMipmap(gl.TEXTURE_2D); } }; }; const LoopBuffer = _=>{ const buffers = [RenderBuffer(), RenderBuffer()]; resizeCallback.push((nw,nh)=>{ buffers[1].resize(nw,nh); buffers[1].render(_=>{ clone.tex(buffers[0].use()); clone(); }); buffers[0].resize(nw,nh); buffers[0].render(_=>{ clone.tex(buffers[1].use()); clone(); }); }); return { render: e=>{ const target = buffers.pop(); target.render(e); buffers.unshift(target); }, use: _=>{ return buffers[0].use(); } }; }; o.front = RenderBuffer(); o.copyCanvas = o.front.copyCanvas; resizeCallback.push((nw,nh)=>{ o.front.resize(nw,nh); }); o.LoopBuffer = LoopBuffer; // Data Buffer const DataBuffer = (w,h)=>{ const rb = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA32F, w, h); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, w, h, 0, gl.RGBA, gl.FLOAT, 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.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 { render: e=>{ gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.clear(gl.COLOR_BUFFER_BIT); gl.disable(gl.DEPTH_TEST); gl.viewport(0,0,w,h); e(); gl.viewport(0,0,width,height); gl.enable(gl.DEPTH_TEST); 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: _=>{ return { texture: tex }; }, pixels: (yi,hi)=>{ const b = new Float32Array(w*hi*4); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.readPixels(0, yi, w, hi, gl.RGBA, gl.FLOAT, b); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return b; } }; }; o.DataBuffer = DataBuffer; const DataLoopBuffer = (w,h)=>{ const buffers = [DataBuffer(w,h), DataBuffer(w,h)]; return { render: e=>{ const target = buffers.pop(); target.render(e); buffers.unshift(target); }, use: _=>{ return buffers[0].use(); }, pixels: (yi,hi)=>{ return buffers[0].pixels(yi,hi); } }; }; o.DataLoopBuffer = DataLoopBuffer; const library = ` uniform vec2 resolution; uniform float time; uniform float randSeed; 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 + randSeed); } float noise(float t, float s) { float lv = rand(vec2(floor(t+0.)*0.01,s)); float uv = rand(vec2(floor(t+1.)*0.01,s)); return mix(lv,uv,smoothstep(0.,1.,fract(t)))*2.-1.; } `; o.clone = clone; o.color = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` in vec2 coord; uniform vec4 color; out vec4 fragColor; void main() { fragColor = color; } `,rect,["color"]); o.main = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` in vec2 coord; out vec4 fragColor; ${library} uniform vec2 notes[32]; uniform float head; float n2(vec2 uv) { vec2 e = vec2(1,0); float a00 = rand(floor(uv)+e.yy); float a01 = rand(floor(uv)+e.yx); float a10 = rand(floor(uv)+e.xy); float a11 = rand(floor(uv)+e.xx); vec2 f = smoothstep(0.,1.,fract(uv)); return mix(mix(a00,a01,f.y),mix(a10,a11,f.y),f.x) - 0.5; } float on(vec2 uv) { mat2 m = mat2(0.6,-0.3,0.3,0.6)*2.; float a = 0.; float t = time*0.2; uv.x += t; a += n2(uv); uv.y += t*1.5; uv *= m; a += n2(uv)*1.4; uv.x -= t*2.; uv *= m; a += n2(uv)*0.5; uv.y -= t*2.; uv *= m; a += n2(uv)*0.3; uv.x += t*3.; uv *= m*1.7; a += n2(uv)*0.4; uv.y += t*4.; uv *= m; a += n2(uv)*0.3; return a; } vec3 sky(vec2 p, vec3 d) { float s = pow(saturate(pow(abs(d.y),0.3)*0.4+0.5), 3.) * 0.4; vec3 col = mix(vec3(0.4,0.8,1), vec3(0,0,1), s); col = mix(col, vec3(1,1,1), (on(p * 0.05)*0.5+0.5) * exp(-length(p)*0.005)); return col; } // https://stackoverflow.com/questions/15095909/from-rgb-to-hsv-in-opengl-glsl vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } vec3 overlay(vec3 a, vec3 b) { vec3 d = 2.*a*b; vec3 l = 1.-2.*(1.-a)*(1.-b); return vec3( a.x < 0.5 ? d.x : l.x, a.y < 0.5 ? d.y : l.y, a.z < 0.5 ? d.z : l.z ); } void main() { vec3 eye = vec3(0,0,0); vec3 dir = vec3(coord*resolution,4); vec3 mdir = dir; mdir.xy /= mix(length(mdir.xy), 1., 0.9); float a = -0.3; dir.yz *= mat2(cos(a),-sin(a),sin(a),cos(a)); mdir.yz *= mat2(cos(a),-sin(a),sin(a),cos(a)); float t = (20. - eye.y) / mdir.y; vec3 p = eye + mdir * t; vec3 col = vec3(1,1,1); if(t > 0.) col *= sky(p.xz, normalize(mdir)); col = clamp(col, vec3(0.), vec3(1.)); col = rgb2hsv(col); t = (25. - eye.y) / dir.y; p = eye + dir * t; float cd = length(p.xz-vec2(0.,60.)); float flip = 0.; for(int j=0;j<32;j++) { int i = int(floor(head+0.5))+1+j; if(i >= 32) i -= 32; vec2 n = notes[i]; if(n.x < 0.0001) continue; float r = pow(n.y*n.x, 0.6) * 30.; float h = 1./n.x * 3.; h *= 1. - exp(-(10.-n.y)*1.); float u = distance(cd, r-h) - h; if(coord.y < 0.38) { u = min(u, abs(coord.x) - 0.08/n.x/resolution.x*exp(-n.y*4.*(-coord.y*0.5+4.))); } float r2 = 0.08/n.x*exp(-n.y*4.*(-0.38*0.5+4.)); if(length(cd) < r2 * 16.) { u = -1.0; } if(u < 0.) { float hh = fract(log2(n.x)+0.5) - 0.6; col.r += hh * 0.3 * (pow(1.+u/h,2.) * 0.5 + 0.5); col.b *= pow(1.+u/h,2.) * 0.1 + 0.9; if(n.x < 1.) col.r += 0.5; flip = 1.-flip; } else if(length(cd) < r-h) { float hh = fract(log2(n.x)+0.5) - 0.6; col.r += hh * 0.4 * exp(-n.y*n.x); col.g *= 1. - exp(-n.y); if(n.x < 1.) col.r += 0.5; col.r += 0.5; } } col = hsv2rgb(col); col = mix(col, 1.-col, flip); fragColor = vec4(col,1); } `,rect,["notes","head"]); o.postprocess = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` in vec2 coord; uniform sampler2D tex; out vec4 fragColor; ${library} void main() { vec3 col = vec3(0.), weight = vec3(0.0); col = texture(tex, coord*0.5+0.5).rgb; float dist = 2.5; vec2 res = resolution.x > 1.0 ? resolution / resolution.x : resolution; float vignette = pow(normalize(vec3(coord*res,dist)).z,4.); col *= vignette; col = floor(col*255.+rand(coord))/255.; fragColor = vec4(col,1); } `,rect,["tex"]); o.initSound = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` #define tau (2.*3.1415926535) #define sampleRate 48000. in vec2 coord; out vec4 fragColor; ${library} float noiseR(float t) { return noise(t, 1.); } float inst(float f, float t, float m, float o) { o *= 0.7; float rep = 1./f; float fac = mod(t,rep); float mult = m; float offset = t*o; return mix( noiseR(fac*mult + offset), noiseR((fac+rep)*mult + offset), smoothstep(0.,1.,1.-fac/rep)); } float wave(float t) { float v = 0.; float f = 440.; float a = 1.0; for(int i=0;i<4;i++) { v += inst(f,t/2.,1900.,40.) * a; f *= 1.5; f += 10.; a *= 0.4; } v += inst(440.,t/1.3,2000.,40.) * 0.5; v += inst(440.*2.,t/1.3,2000.,40.) * 0.4; v += inst(440.*3.,t/1.3,2000.,40.) * 0.3; v += inst(445.,t,1900.,40.) * 0.2; return v; } void main() { vec2 res = vec2(2048,128); int x = int((coord.x*0.5+0.5)*res.x); int y = int((coord.y*0.5+0.5)*res.y); float t = float((x + y * 2048) * 4) / sampleRate; float dt = 1. / sampleRate; vec4 ts = t + vec4(0,1,2,3) * dt; vec4 result = vec4(wave(ts.x), wave(ts.y), wave(ts.z), wave(ts.w)); fragColor = result; } `,rect,[]); o.synthParams = (samples, unitNotes, grains)=>{ if(samples/4*grains < unitNotes*grains*4) { console.error("Unit Limit Exceeded"); } o.granular = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` #define tau (2.*3.1415926535) #define sampleRate 48000. #define window 1. #define samples ${samples}. #define unitNotes ${unitNotes} #define grains ${grains} in vec2 coord; uniform sampler2D tex; uniform sampler2D audio; uniform float baseGrainDur; uniform float offset; uniform float offsetRandom; uniform float basePlaybackRate; uniform float audioIndex; uniform vec2 randoms; uniform vec2 notes[32]; out vec4 fragColor; float rand(vec2 co){ return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453); } float sampleAudio(float t, int i, int ch) { float s = t * sampleRate; int s0 = int(s), s1 = int(s) + 1; float f = s - floor(s); ivec2 base = ivec2(0, (i*2+ch)*64); int sw = 2048; float m0 = texelFetch(audio, base + ivec2(s0/4%sw, s0/4/sw), 0)[s0%4]; float m1 = texelFetch(audio, base + ivec2(s1/4%sw, s1/4/sw), 0)[s1%4]; if(s0 < 0 || s0 >= 524288) m0 = 0.; if(s1 < 0 || s1 >= 524288) m1 = 0.; return mix(m0, m1, smoothstep(0., 1., f)); } float wave(float t) { return sampleAudio(t, int(audioIndex), 0); } vec4 grain(vec4 p, vec4 q, vec4 t) { // p: Offset, Duration, PlayOffset, PlayDuration // q: Volume, WindowWidthRatio, 0, 0 if(p.w == 0.) return vec4(0.); vec4 r = (t - p.z) / p.w; vec4 u = abs(r - 0.5); vec4 w = smoothstep(0., 0.5*q.y, 0.5-u); vec4 tt = p.x + p.y*r; vec4 waves = vec4(wave(tt.x), wave(tt.y), wave(tt.z), wave(tt.w)); return waves * q.x * w; } void gen(float t, float d, int waveIx, vec2 note, out vec4 p, out vec4 q) { float dur = samples / sampleRate; vec2 seed = vec2(float(waveIx), t); float rate = basePlaybackRate * note.x; p = vec4(offset + rand(seed+1.)*offsetRandom, d*rate, t, d); q = vec4(1.0, window, 0., 0.); } void main() { float dur = samples / sampleRate; float res = samples/4.; int x = int((coord.x*0.5+0.5)*res); int y = int((coord.y*0.5+0.5)*float(unitNotes*grains)); float t = (coord.x*0.5+0.5) * dur; bool wave = true; int dataInRow = int(res/4.); int waveIx = y; if(y < grains) { t = dur; wave = false; waveIx = x/4 + y*dataInRow; } float dt = 1. / sampleRate; vec4 ts = t + vec4(0,1,2,3) * dt; vec4 result = vec4(0.); ivec2 dataOffset = ivec2(waveIx%dataInRow*4, waveIx/dataInRow); vec4 p0 = texelFetch(tex, dataOffset + ivec2(0, 0), 0); vec4 q0 = texelFetch(tex, dataOffset + ivec2(1, 0), 0); vec4 p1 = texelFetch(tex, dataOffset + ivec2(2, 0), 0); vec4 q1 = texelFetch(tex, dataOffset + ivec2(3, 0), 0); vec2 note = notes[waveIx/8], prevNote = q1.zw; float grainDur = baseGrainDur/note.x; float startTime = p1.z + p1.w * mix(1.0, 0.5, q1.y); float singleDur = mix(1.0, 0.5, window) * grainDur; if(p1.w > grainDur) startTime = p1.z + p1.w - (grainDur - singleDur); startTime += rand(vec2(waveIx,0) + randoms)*grainDur; // randomize phase // ^ TODO if(distance(note.x, prevNote.x) > 0.00001) { // Prepare for the next note q0.x = q1.x = 0.; startTime = 0.; } startTime = max(0., startTime); // may occur from sudden grainDur decreasing if(startTime < t) { float i = floor((t-startTime) / singleDur); p0 = p1, q0 = q1; gen(startTime+i*singleDur, grainDur, waveIx, note, p1, q1); if(i > 0.5) { i--; gen(startTime+i*singleDur, grainDur, waveIx, note, p0, q0); } } if(wave) { vec4 v = grain(p0, q0, ts) + grain(p1, q1, ts); result = v*8.*mix(prevNote.y, note.y, coord.x*0.5+0.5); } else { p0.z -= dur, p1.z -= dur; q1.zw = note; int xi = x%4; if(xi == 0) result = p0; if(xi == 1) result = q0; if(xi == 2) result = p1; if(xi == 3) result = q1; } fragColor = result; } `,rect,["tex","audio","baseGrainDur","offset","offsetRandom","basePlaybackRate","randoms","audioIndex","notes"]); o.accum = buildMaterial(` in vec2 vertex; out vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` #define samples ${samples}. #define unitNotes ${unitNotes} #define grains ${grains} in vec2 coord; uniform sampler2D tex; out vec4 fragColor; void main() { float res = samples/4.; int x = int((coord.x*0.5+0.5)*res); int y = int((coord.y*0.5+0.5)*float(unitNotes*grains)); if(y < unitNotes*grains-2) { fragColor = texelFetch(tex, ivec2(x,y), 0); } else { vec4 result = vec4(0.); int yp = y/2*2 - 1; float str = 0.3; if(y%2 == 0) str = 1. - str; for(int i=yp;i>=grains;i--) { result += texelFetch(tex, ivec2(x,i), 0) * str; str = 1. - str; } result /= float(grains); fragColor = result; } } `,rect,["tex"]); }; return o; }; const bpm = 160; let running = false; const Kino = G=>{ const X = new AudioContext(); const tx = document.getElementById("tx"); const run = _=>{ if(X.state == "running" && running) return; tx.classList.add("fo"); setTimeout(_=>{ X.resume().then(_=>{ running = true; // console.log("Running"); }); },1000); }; G.canvas.addEventListener("click", run); const master = X.createGain(); master.gain.value = 0.2; master.connect(X.destination); const comp = X.createDynamicsCompressor(); const lpf = X.createBiquadFilter(); lpf.type = "lowpass"; lpf.frequency.value = 4000.0; const hpf = X.createBiquadFilter(); hpf.type = "highpass"; hpf.frequency.value = 60.0; const reverb = X.createConvolver(); (_=>{ const b = X.createBuffer(2, X.sampleRate*4.5, X.sampleRate); const f0 = b.getChannelData(0); const f1 = b.getChannelData(1); let u = Math.PI/4; for(let i=0;i 0) amp += Math.exp(-t2*40) * Math.exp(-j*2); } amp += Math.exp(-t*1) * 0.4 * (Math.cos(t*300.) * 0.5 + 0.5); amp *= 1 - Math.exp(-(4.5-t) * 2); f0[i] = amp * Math.cos(u); f1[i] = amp * Math.sin(u); u += (Math.random() * 2 - 1) * 0.4; } reverb.buffer = b; })(); lpf.connect(hpf).connect(reverb).connect(comp).connect(master); const outNode = lpf; const samples = 2048; const unitNotes = 32; // minus 1 const grains = 8; G.synthParams(samples, unitNotes, grains); const audioBuffer = G.DataLoopBuffer(2048,128); audioBuffer.render(_=>{ G.initSound(); }); const loopBuffers = []; const noteCandidates = []; function createSynth() { const loopBuffer = G.DataLoopBuffer(samples/4, unitNotes*grains); loopBuffer.render(_=>{ G.color.color(0,0,0,0); G.color(); }); loopBuffers.push(loopBuffer); const n = X.createScriptProcessor(samples, 0, 2); const notes = new Float32Array(unitNotes*2); // (freq, gain) for(let i=0;i{ loopBuffer.render(_=>{ G.granular.tex(loopBuffer.use()); G.granular.audioIndex(aix); G.granular.offset(0.0); G.granular.offsetRandom(0.5); G.granular.baseGrainDur((Math.random()+0.5)*2); G.granular.basePlaybackRate(1); G.granular.notes.v2(notes); G.granular.audio(audioBuffer.use()); G.granular.randoms(Math.random(), Math.random()); G.granular(); }); loopBuffer.render(_=>{ G.accum.tex(loopBuffer.use()); G.accum(); }); const b = loopBuffer.pixels(unitNotes*grains-2, 2); const c0 = e.outputBuffer.getChannelData(0); const c1 = e.outputBuffer.getChannelData(1); c0.set(b.subarray(0, samples)); c1.set(b.subarray(samples, samples*2)); }; n.connect(outNode); for(let i=1;i{ notes[j*2+0] = f / 440; }, gain: g=>{ notes[j*2+1] = g; }, atten: u=>{ notes[j*2+1] *= u; } }); } // console.log("New Synth Acquired."); } function createNote(f) { if(noteCandidates.length == 0) createSynth(); const note = noteCandidates.pop(); note.freq(f); return { gain: note.gain, atten: note.atten, disconnect: _=>{ note.gain(0); setTimeout(_=>{ noteCandidates.push(note); }, 100); } }; } return { X, comp, note: createNote }; }; window.onload = _=>{ const G = GL(); const K = Kino(G); const freqs = [ 1/2, 9/8, 1, 2/3, 8/9, 3/2, 3/4, 4/3, 2, 3 ]; const noteQueue = new Float32Array(64); let queueHead = 0; const notes = freqs.map(f=>{ const n = [K.note(f*440), K.note(f*880), K.note(f*1320)]; return { atten: dt=>{ n[0].atten(Math.exp(-dt*1)); n[1].atten(Math.exp(-dt*2*2)); n[2].atten(Math.exp(-dt*3*4)); }, ring: _=>{ setTimeout(_=>{ n[0].gain(1); n[1].gain(1.5); n[2].gain(2); }, 20); noteQueue[queueHead*2+0] = f; noteQueue[queueHead*2+1] = 0; queueHead++; if(queueHead >= 32) queueHead = 0; } }; }); const mainBuffer = G.LoopBuffer(); const Auto = (_=>{ let hist0 = 7, hist1 = 8; let lastBeat = 0; let lastNextWait = 0; let nextWait = 0; let waitRandom = 0; let shortCount = 0; let selectNeighbor = false; let firstCount = 3; const o = {}; o.play = _=>{ if(!running) return; let beat = Math.floor(K.X.currentTime * bpm / 60); if(lastBeat != beat) { if(nextWait > 0) nextWait--; else { let i = Math.floor(Math.pow(Math.random(),1.5)*(notes.length-2)); if(i >= Math.min(hist0,hist1)) i++; if(i >= Math.max(hist0,hist1)) i++; if(selectNeighbor) { if(i > hist1 + 1) i = hist1 + 1; if(i < hist1 - 1) i = hist1 - 1; } notes[i].ring(); hist0 = hist1; hist1 = i; waitRandom += Math.random() * 0.3; waitRandom %= 1; lastNextWait = nextWait; nextWait = Math.pow(2, Math.floor(Math.pow(waitRandom,2)*4)); if(firstCount > 0) { if(firstCount == 3) nextWait = 12; else nextWait = 8; firstCount--; } if(nextWait <= 2) { shortCount++; if(shortCount >= 3) nextWait = lastNextWait == 1 ? 8 : 12; } else shortCount = 0; nextWait--; if(nextWait == 0) selectNeighbor = true; else selectNeighbor = false; } } lastBeat = beat; }; return o; })(); let prevTime = new Date(); function render() { const curTime = new Date(); const dt = (curTime - prevTime) / 1000; mainBuffer.render(_=>{ G.main.notes.v2(noteQueue); G.main.head(queueHead); G.main(); }); G.postprocess.tex(mainBuffer.use()); G.postprocess(); for(let i=0;i