var time = 0.0; var fps = 1000/30; var time = 0.0; var fps = 1000 / 30; function CreateAudioBuffer() { const DURATION = 180; // seconds const WIDTH = 512; const HEIGHT = 512; const audioCTX = new AudioContext(); const audioBuffer = audioCTX.createBuffer(2, audioCTX.sampleRate * DURATION,audioCTX.sampleRate); const canvas = document.createElement('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const sgl = canvas.getContext('webgl2'); sgl.clearColor(0.0,0.0,0.0,1.0); sgl.clear(sgl.COLOR_BUFFER_BIT); var VERTEXSHADER = `#version 300 es in vec3 position; void main(void){ gl_Position = vec4(position,1.0); } `; var FRAGMENTSHADER = `#version 300 es precision highp float; out vec4 o_color; uniform float u_sampleRate; uniform float u_blockOffset; uniform vec2 u_resolution; #define pi 3.141592 #define tau 6.283184 #define bpm 160. #define mu -10000000 float n(float t){ return fract(1e6 * sin(t * 1e5)) * 2.0 - 1.0; } float sn(float t,float f){ return sin(t * f * tau); } float fm(float t, float f0,float f1){ return sin(t * tau * f0 + sin(t * tau * f1)); } float calf(float i){ return pow(2.0,i/12.0); } float env(float t, float a,float r){ return smoothstep(0.0,a,t) * exp(- r * t); } vec2 rotate(vec2 i, float p){ float c = cos(p * pi),s = sin(p * pi); return mat2(c,s,-s,c) * i; } const int seq[3] = int[](182,5,8); float euclid(float t, int seq, float steps){ int beat = int(mod(floor(t),steps)); return float((seq >> beat) & 1); } const int mseq0[8] = int[](0,2,5,7,4,mu,2,-3); const int mseq1[8] = int[](12,14,mu,12,mu,mu,mu,mu); const int mseq2[16] = int[](24,26,mu,22,mu,26,mu,24,26,22,mu,31,mu,29,mu,27); const int msq1[4] = int[](2,5,mu,7); // const const int hsq[8] = int[](1,0,1,1,0,1,1,1); const int hsq1[8] = int[](1,0,0,1,0,1,1,1); const float bar = 60.0/bpm; float clip(float t, float start, float end){ return step(start*bar, t) * (1.0 - step(end * bar,t)); } vec2 mainSound(float time){ float track = time; float t = time * bpm /60.0; // track += 128. * bar; vec2 o = vec2(0.0); // vec2 mo0 = vec2(0.); for(int i = 0; i < 7; i++){ float dt = float(i) * bar * 3.0; float tm = fract(t + dt) * bar; int ts = int(mod(t + dt,8.)); float s = sn(tm,442.0 * calf(float(mseq0[ts]))) * env(tm,0.,3.); mo0 += rotate(vec2(s),tm/bar) * pow(2.,-float(i*2)) * 0.25; } o += vec2(mo0) * 0.55 * clip(track,0.,256.); // vec2 mo1 = vec2(0.); for(int i = 0; i < 5; i++){ float dt = float(i) * bar * 4.0; float tm = fract(t + dt) * bar; int ts = int(mod(t + dt,8.)); float s = fm(tm,440.0 * calf(float(mseq1[ts])),1000.0 * calf(float(mseq1[ts] + 5))) * env(tm,0.,3.); mo1 += rotate(vec2(s),tm/bar) * pow(2.,-float(i*2)) * 0.25; } o += vec2(mo1) * 0.35 * clip(track,128.,288.); vec2 mo2 = vec2(0.); for(int i = 0; i < 3; i++){ float dt = float(i) * bar * 1.0; float tm = fract(t + dt) * bar; int ts = int(mod(t + dt,16.)); float s = sn(tm,440.0 * calf(float(mseq2[ts]))) * env(tm,0.,10.); mo2 += rotate(vec2(s),tm/bar) * pow(2.,-float(i*3)) * 0.25; } o += vec2(mo2) * 0.15 * clip(track,192.,288.); // float tp = mod(t,2.0); int ts1 = int(mod(t,8.))/2; float ms10 = calf(float(msq1[ts1])); float ms11 = calf(float(msq1[ts1]) + 5.0); float ms12 = calf(float(msq1[ts1]) + 12.0); float s1 = (fm(tp,440.*ms10,440.*ms10)*0.5 + fm(tp,440.*ms11,440.*ms11) * 0.15 + sn(tp,440.*ms12) * 0.15) * env(tp,0.1,0.8); o += rotate(vec2(clamp(s1,-1.0,1.0)*0.1),0.5) * (clip(track,32.,192.) + clip(track,224.,256.)); // Kick float tk = mod(t,1.); float k = clamp(fm(tk,13.,1.)*1.2 + sn(tk,5.)*0.1,-1.0,1.0) * env(tk,0.001,3.); float ek = euclid(t,180,8.); k *= ek; o += vec2(k) * 0.8 * (clip(track,64.0,192.) + clip(track,224.,256.)); // hat int sq1 = int(mod(floor(t * 2.0),8.)); float th = fract(t); float h0 = (n(th) * 0.6 + sn(th,4400.)*0.4) * env(fract(t),0.01,12.) * float(hsq[sq1]); o += rotate(vec2(h0),0.05) * 0.25 * (clip(track,96.,192.) + clip(track,224.,256.)); vec2 so = vec2(0.); for(int j = 0; j < 3; j++){ float dt = float(j) * bar; float th0 = fract(t + dt); int sq0 = int(mod(floor(t * 2.0 + dt),8.)); float s2 = sn(th0,1320.) * env(fract(t) + dt,0.01,12.) * float(hsq1[sq0]); so += rotate(vec2(s2),th0 - 0.5) * pow(2.,-float(j)); } o += so * 0.1 * (clip(track,96.,192.) + clip(track,224.,256.)); float se = (fm(time,1e2,1.)+ n(fract(t/16.0)) * 0.125) * env(fract(t/16.0),bar,5.); o += rotate(vec2(se*0.3),sin(track)) * clip(track,0.0,32.); return o; } void main(void) { vec2 coord = floor(gl_FragCoord.xy); float time = u_blockOffset + (coord.x + coord.y * u_resolution.x) / u_sampleRate; vec2 sound = clamp(mainSound(time), -1.0, 1.0); // 16ビット精度になるように左右それぞれ一つに対してvec4のうちの２つの要素を使う vec2 v = floor((0.5 + 0.5 * sound) * 65536.0); vec2 vl = mod(v, 256.0) / 255.0; vec2 vh = floor(v / 256.0) / 255.0; o_color = vec4(vl.x, vh.x, vl.y, vh.y); } ` var vp = [ -1.0,-1.0,0.0, -1.0,1.0,0.0, 1.0,1.0,0.0, -1.0,-1.0,0.0, 1.0,-1.0,0.0, 1.0,1.0,0.0 ]; var vshader = screate_shader(sgl.createShader(sgl.VERTEX_SHADER),VERTEXSHADER); var fshader = screate_shader(sgl.createShader(sgl.FRAGMENT_SHADER),FRAGMENTSHADER); var sprg = screate_program(vshader,fshader); sgl.useProgram(sprg); var vAttlocation = sgl.getAttribLocation(sprg,'position'); var uniform_sampleRate = sgl.getUniformLocation(sprg,'u_sampleRate'); var uniform_blockOffset = sgl.getUniformLocation(sprg,'u_blockOffset'); var uniform_resolution = sgl.getUniformLocation(sprg,'u_resolution'); const samples = WIDTH * HEIGHT; const numBlocks = Math.ceil((audioCTX.sampleRate * DURATION)/samples); const pixels = new Uint8Array(WIDTH * HEIGHT * 4); const outputL = audioBuffer.getChannelData(0); const outputR = audioBuffer.getChannelData(1); var pvbo = screate_vbo(vp); sgl.bindBuffer(sgl.ARRAY_BUFFER, pvbo); sgl.enableVertexAttribArray(vAttlocation); sgl.vertexAttribPointer(vAttlocation, 3, sgl.FLOAT, false, 0, 0); sgl.uniform1f(uniform_sampleRate,audioCTX.sampleRate); sgl.uniform2f(uniform_resolution,WIDTH,HEIGHT); for(var i = 0; i < numBlocks; i++){ sgl.uniform1f(uniform_blockOffset,i * samples / audioCTX.sampleRate); sgl.drawArrays(sgl.TRIANGLES,0,6); sgl.readPixels(0,0,WIDTH,HEIGHT,sgl.RGBA,sgl.UNSIGNED_BYTE,pixels); for(var j = 0; j < samples; j++){ outputL[i * samples + j] = (pixels[j * 4 + 0] + 256 * pixels[j * 4 + 1])/65536 * 2 - 1; outputR[i * samples + j] = (pixels[j * 4 + 2] + 256 * pixels[j * 4 + 3])/65536 * 2 - 1; } } const node = audioCTX.createBufferSource(); const analyser = audioCTX.createAnalyser(); analyser.fftSize = 128; analyser.smoothingTimeConstant = 0.8; node.connect(audioCTX.destination); node.connect(analyser); node.buffer = audioBuffer; node.loop = false; node.start(); const array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); function screate_shader(shader,source){ sgl.shaderSource(shader, source); sgl.compileShader(shader); if(sgl.getShaderParameter(shader, sgl.COMPILE_STATUS)){ return shader; } else { alert(sgl.getShaderInfoLog(shader)); } } function screate_program(vs, fs){ var program = sgl.createProgram(); sgl.attachShader(program,vs); sgl.attachShader(program,fs); sgl.linkProgram(program); if(sgl.getProgramParameter(program, sgl.LINK_STATUS)){ return program; } else { alert(sgl.getProgramInfoLog(program)); } } function screate_vbo(data){ var vbo = sgl.createBuffer(); sgl.bindBuffer(sgl.ARRAY_BUFFER,vbo); sgl.bufferData(sgl.ARRAY_BUFFER, new Float32Array(data),sgl.STATIC_DRAW); sgl.bindBuffer(sgl.ARRAY_BUFFER, null); return vbo; } // Canvas2 const c = document.getElementById('canvas'); var cw = window.innerWidth; var ch = window.innerHeight; var size = Math.min(cw,ch); c.width = size; c.height = size; const gl = c.getContext('webgl2'); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); const FRAGMENTSHADER2 = `#version 300 es precision highp float; out vec4 o_color; uniform vec2 u_resolution; uniform float time; uniform float sound; uniform sampler2D backBuffer; #define PI acos(-1.0) #define r3 sqrt(3.0) #define bpm 160. vec2 rotate(vec2 p, float a){ float c =cos(a),s = sin(a); return mat2(c,s,-s,c) * p; } vec2 pmod(vec2 p , float n, out float i){ float a = atan(p.y,p.x) + PI/n; float r = 2.0 *PI / n; a = floor(a/r) * r; i = floor(a/r); return rotate(p,-a); } float circle(vec2 p, float r){ return length(p) - r; } float box(vec2 p, vec2 s){ vec2 d = abs(p) - s; return length(max(d,0.0)) + min(max(d.x,d.y),0.0); } float tri(vec2 p){ p.x = abs(p.x) - 1.0; p.y = p.y + 1.0/r3; if(p.x+ r3*p.y > 0.0) p = vec2(p.x - r3*p.y,-r3*p.x - p.y)/2.0; p.x -= clamp(p.x,-2.,0.); return -length(p)*sign(p.y); } vec2 opU(vec2 a, vec2 b){ return a.x < b.y ? a : b; } float render(float s){ return smoothstep(0.0001,0.0,s); } const float bar = 60.0/bpm; float clip(float t, float start, float end){ return step(start*bar, t) * (1.0 - step(end * bar,t)); } vec3 draw(vec2 p){ vec2 q0 = p - vec2(0.2,0.1); vec2 q1 = p - vec2(0.0,0.2); vec2 q2 = p - vec2(0.0,0.1); vec2 q3 = p - vec2(0.15,0.); vec2 q5 = p - vec2(0.3,0.2); float o = 1.0; // Main float b0 = box(q0,vec2(0.1 * sound)); float b1 = box(q1,vec2(0.25)); float b2 = box(p,vec2(0.1)); float b3 = box(p,vec2(0.05,0.01)); float s0 = circle(q2,0.45); float s1 = circle(q5,0.1); float a; q3 = pmod(p,6.,a); q3 -= vec2(0.25,0.05); q3 = rotate(q3,-time); float t = tri(q3/0.05); t = abs(t) - 0.1; b0 = max(b0,-t); b1 = max(b1,-b0); b0 = abs(b0) - 0.005; float b4 = 1.0; for(int i = 0; i < 3; i++){ vec2 q4 = p - vec2(float(i) * 0.025 * sound*0.1,0.1); q4 = rotate(q4,PI * float(i) * 0.3 * sound); float b40 = box(q4,vec2(float(i) * 0.1 * sound + 0.05)); b4 = min(b4,abs(b40) - 0.005); } b4 = max(b4,-b0); b4 = max(b4,-t); o = min(o,b0); o = min(o,abs(b1)-0.005); o = min(o,abs(b2)-0.005); o = min(o,b3); o = min(o,b4); o = min(o,abs(s0)-0.005); o = min(o,abs(s1) - 0.005); o = min(o,t); vec3 c0 = render(b0) * vec3(0.1,0.3,0.9); vec3 c1 = render(abs(b1) - 0.005) * vec3(0.1,0.5,0.9); vec3 c2 = render(abs(b2) - 0.005) * vec3(0.9,0.2,0.3); vec3 c3 = render(b3) * vec3(0.8,0.8,0.1); vec3 c4 = render(abs(s0) - 0.005) * vec3(0.1,0.6,0.2); vec3 c7 = render(abs(s1) - 0.005) * vec3(0.1,0.8,0.7); vec3 c5 = render(t) * vec3(0.5,0.5,0.9); vec3 c6 = render(b4) * vec3(0.9,0.6,0.4); vec3 bg = vec3(1.0 - render(o)) * vec3(0.01,0.2,0.3); vec3 oc = (c0 + c1 + c2 + c3 + c4 + c5 + c6 + c7) + bg; return oc * 1.2; } void main(){ vec2 r=u_resolution; vec2 p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); vec2 uv = p; p.y /= r3*0.5; vec2 i0 = floor(p); if(mod(i0.y,2.) == 1.){ p.x += 0.5; } vec2 i = floor(p); i.x *= 2.0; vec2 f = fract(p); int ref = 0; if(f.y*0.5 > f.x){ f.x += 0.5; f.y = abs(1.0 -f.y); i.x -= 1.; ref = 1; } else if( -f.y*0.5 < f.x - 1.0){ f.x-=0.5; f.y = abs(1.0 - f.y); i.x += 1.; ref = 1; } f.y *= r3*0.5; f.y -= r3/3.0 * 0.5; f.x -= 0.5; float id = 0.; f = pmod(f,6.0,id); if(mod(id,2.) == 1.)f.x *= -1.; vec2 f0 = rotate(f,time); f0 = abs(f0); vec3 o = draw(f0); float ra = clamp(length(uv + vec2(1.0,0.0))*0.5 - 0.2,0.0,1.0); o_color = vec4(mix(o,vec3(.3,0.9,1.0),ra),1.0); } `; var vs = create_shader(gl.createShader(gl.VERTEX_SHADER),VERTEXSHADER); var fs = create_shader(gl.createShader(gl.FRAGMENT_SHADER),FRAGMENTSHADER2); var prg = create_program(vs,fs); var fFront = create_buffer(ch,ch); var fBack = create_buffer(ch,ch); var temp = null; var pvbo = create_vbo(vp); var vAttlocation2 = gl.getAttribLocation(prg,'position'); var unilocation_res = gl.getUniformLocation(prg,'u_resolution'); var unilocation_time = gl.getUniformLocation(prg,'time'); var unilocation_sample = gl.getUniformLocation(prg,'sound'); var unilocation_prv = gl.getUniformLocation(prg,'backBuffer'); (function(){ analyser.getByteFrequencyData(array); var f = getFrequency(array); gl.useProgram(prg); gl.bindFramebuffer(gl.FRAMEBUFFER, fFront.f); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,fBack.t); gl.bindBuffer(gl.ARRAY_BUFFER, pvbo); gl.enableVertexAttribArray(vAttlocation2); gl.vertexAttribPointer(vAttlocation2, 3, gl.FLOAT, false, 0, 0); gl.uniform2f(unilocation_res,cw,ch); gl.uniform1f(unilocation_time,time); gl.uniform1f(unilocation_sample,f); gl.uniform1i(unilocation_prv,0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES,0,6); time += 1.0/fps; gl.useProgram(prg); gl.bindFramebuffer(gl.FRAMEBUFFER,null); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,fFront.t); gl.bindBuffer(gl.ARRAY_BUFFER, pvbo); gl.enableVertexAttribArray(vAttlocation2); gl.vertexAttribPointer(vAttlocation2, 3, gl.FLOAT, false, 0, 0); gl.uniform2f(unilocation_res,cw,ch); gl.uniform1f(unilocation_time,time); gl.uniform1f(unilocation_sample,f); gl.uniform1i(unilocation_prv,0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES,0,6); gl.bindTexture(gl.TEXTURE_2D,null); gl.flush(); temp = fFront; fFront = fBack; fBack = temp; setTimeout(arguments.callee,fps); })(); window.removeEventListener('click',CreateAudioBuffer); function getFrequency() { let f = 0; for(var i = 0,j = array.length; i < j; ++i){ f += (array[i]/255)/Math.log(i+2); } const range = Math.log(128); return f / (range * range); } function create_shader(shader,source){ gl.shaderSource(shader, source); gl.compileShader(shader); if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ return shader; } else { alert(gl.getShaderInfoLog(shader)); } } function create_program(vs, fs){ var program = gl.createProgram(); gl.attachShader(program,vs); gl.attachShader(program,fs); gl.linkProgram(program); if(gl.getProgramParameter(program, gl.LINK_STATUS)){ return program; } else { alert(gl.getProgramInfoLog(program)); } } function create_vbo(data){ var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data),gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); return vbo; } function create_buffer(width, height){ var framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); var depthbuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, depthbuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16 ,width, height); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthbuffer); var fTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, fTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 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.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fTexture, 0); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindRenderbuffer(gl.RENDERBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return {f : framebuffer, d : depthbuffer, t : fTexture}; } } function startText(){ document.getElementById('title').innerText = ' '; } window.addEventListener("load", function() { window.addEventListener("click",startText); window.addEventListener("click", CreateAudioBuffer); });