var startTime; var graphictime; function myClickListener() { /*********************************************************** */ //SoundShader soundshader=` #define bpm 172.0 #define pi2 6.2831 #define fin(a,b) smoothstep(a,b,time*bpm/60.0) #define fout(a,b) (1.0-smoothstep(a,b,time*bpm/60.0)) #define pow2(a,b) sign(a)*pow(abs(a),b) float calf(float i){ return pow2(2.0,i/12.0); } mat2 rot(float r){ return mat2(cos(r),sin(r),-sin(r),cos(r)); } float sigcomp1d(float w,float s){ return (1.0/(1.0+exp(-s*w)) -0.5)*2.0; } vec2 sigcomp2d(vec2 w,float s){ return (1.0/(1.0+exp(-s*w)) -0.5)*2.0; } float rand(vec2 st){ return fract(sin(dot(vec2(12.9898,78.233),st))*43758.894); } float noise(vec2 st){ vec2 i = floor(st); vec2 f = fract(st); float a = rand(i); float b = rand(i+vec2(1,0)); float c = rand(i+vec2(0,1)); float d = rand(i+vec2(1,1)); vec2 u = f*f*f*(10.-15.*f+6.*f*f); return mix(a,b,u.x)+(1.-u.x)*u.y*(c-a)+u.x*u.y*(d-b)-.5; } float fbm(vec2 st){ float v=0.; float a =.5; for(int i =0;i<6;i++){ v += noise(st); st *= 2.; a *=.5; } return v; } float fm(float t,float f,float i,float r){ return sin(pi2*t*f+i*sin(pi2*t*f*r)); } float sfm(float t,float f,float i1,float r1,float i2,float r2){ return sin(pi2*f*t+i1*fm(t,f,i2,r2)*r1); } float ssaw(float t,float f){ return rand(vec2(t))*0.02+sfm(t,f,.8,1.8,.8,7.)+sfm(t,f*1.008,.8,1.8,.8,6.)+.1*sfm(t,f,.1,0.,.1,3.); } float ssaw2(float t,float f){ return rand(vec2(t))*0.02+sfm(t,f,.8,1.8,.8,5.)+sfm(t,f*1.008,.8,1.8,.8,7.)+.1*sfm(t,f*1.5,.1,0.,.1,5.); } float snare2(float time){ float t = time*bpm/60.; float snrhy = fract(t*4.); float sn = .8*sin(pi2*195.*time); sn += .4*sin(pi2*195.*1.5*time); sn += .2*sin(pi2*195.*2.0*time); sn += .1*sin(pi2*195.*3.0*time); sn += 4.*fbm(vec2(fract(t*4.)*4e2,sin(fract(t*4.)*50.)))*exp(-3.*snrhy); sn += rand(vec2(fract(t*4.),sin(fract(t*4.))))*exp(-1.5*snrhy); return sn*exp(-1.4*snrhy)*.8; } float ride(float time,float t){ float r = fm(time,660.0,1.0,8.5)*exp(-2.0*fract(2.0*t))*0.06; r += fm(time,665.0,1.5,5.5)*exp(-2.0*fract(2.0*t))*0.06; r += fbm(vec2(fract(2.0*t)*5e3 - 5e2*pow2(fract(2.0*t),2.0),sin(fract(2.0*t)*5.0)))*exp(-2.2*fract(2.0*t))*0.15; r += rand(vec2(fract(2.0*t)))*exp(-2.0*fract(2.0*t))*0.1; r = sigcomp1d(r,10.0)*0.3; return r; } float clap(float time,float t){ float cp = 0.0; cp += fbm(vec2(fract(t*2.0)*6e2))*exp(-10.0*fract(t*2.0)); cp += 0.15*fbm(vec2(fract(t*2.0)*5e2))*exp(-10.0*fract(t*2.0-0.07)); cp += 0.4*fbm(vec2(fract(t*2.0)*4e2))*exp(-10.0*fract(t*2.0-0.22)); cp += 0.3*fbm(vec2(fract(t*2.0)*6e2))*exp(-10.0*fract(t*2.0-0.36)); cp += 0.3*rand(vec2(time))*exp(-6.0*fract(t*2.0)); return cp; } vec2 amen_raw(float time,float t){ int bdr[4] = int[](10620979,10620979,3149875,1179808); int snr[4] = int[](1124893440,1124893440,806126336,3255578636); float s = 4.; int i = int(floor(t*s)); float bd=float((bdr[(i>>4)&3]>>(i&15)*2)&3) *(sin(22.*fract(t*s)-30.*exp(-6.*fract(t*s))) *pow2(fract(-s*t),.5) *log(1e3*fract(t*s)+1.) +fbm(vec2(time*3e2,sin(time)))*fract(fract(-s*t))); float sn = float((snr[(i>>4)&3]>>(i&15)*2)&3)*snare2(time); vec2 ride2 = vec2(ride(time,t),ride(time+0.01,t+0.001)); float hh = fbm(vec2(fract(4.0*t)*3e3,sin(fract(t*4.0)))) *pow2(fract(-t+0.5),12.0); vec2 o = vec2(0); o += ride2*0.3; o += vec2(hh*0.3)*rot(0.3); o += bd*4e-2; o += sigcomp1d(sn*0.5,2.0)*0.2; o = sigcomp2d(o,3.0); return o; } vec2 amen(float time,float t){ vec2 o = vec2(0); for(float i=0.0;i<4.0;i++){ o+=0.8*pow2(4.0,-1.0*i)*amen_raw(time-0.001*i,t-0.5*i)*rot(-0.16+i*0.04); } return sigcomp2d(o,2.0); } vec2 pico(float time,float t){ float s = 4.; int i = int(floor(t*s)); float p = float((861197459>>(i&15)*2)&3) *pow2(fm(time,880.*calf(2.),.5*fract(-t*s),12.0),3.0); p *= log(3e2*fract(t*s)+1.)*pow2(fract(-t),0.5); return vec2(p)*rot(floor(t*4.0))*.015; } vec2 padraw(float time){ float t = time*bpm/120.0; float m=(t<64.)?.5:1.; float notes[12] = float[12](0.,2.,4.,7.,9.,12., 14.,16.,19.,23.,26.,18.); float pitch[4] = float[4](-5.,-7.,-5.,-2.); float cdf; int cdi,pi; vec2 cd = vec2(0); for(float i=0.0;i<64.0;i++){ cdi = int(rand(vec2(floor(t*4.)+i))*(8.0+mod(floor(t*.5*m),4.*m))); pi =int(mod(floor(t*0.5*0.25),4.0)); cdf = 220.0*calf(notes[cdi])*calf(pitch[pi]); cd += vec2(ssaw2(time,cdf))*rot(i*0.05); cd += vec2(ssaw(time,cdf*1.5))*rot(i*0.04)*0.3; cd += vec2(ssaw(time,cdf*1.01))*rot(i*0.05)*0.2; cd += vec2(fm(time,cdf*3.0,0.5,3.5))*rot(i*0.06)*0.2; } cd += (vec2(fm(time,cdf*1.5,1.0,12.0))*3.0 +vec2(fm(time,cdf,1.0,12.0))*3.0 +ssaw2(time,110.0*calf(-12.0))*2.0 +ssaw2(time,55.0*calf(-12.0))*1.5 +fm(time,27.5*calf(-7.0),0.2,1.0))*fin(64.,72.); return cd*.015; } vec2 riff(float time,float t,float sp){ time = mod(time,60.0/bpm); int riff[6] = int[](964349317,710391,996855107,642741,996855008,811734); int i = int(floor(t*4.)); float s = ((i&15)<12)?4.:2.; s*=sp; int j = ((i>>6)&1)*2+(((i>>3)*(i>>2))&1); j=((i&255)<224)?j:j+2; float f = 164.81*calf(float((riff[j] >>((int(fract(mod(sp*t,4.)*.667)*6.))*5))&31)); float p=sfm(time,f,.5*fract(-t*s),1.0,pow2(fract(-t*s),7.),1.14) +sfm(time,f,pow2(fract(-t*s),3.),2.5,pow2(fract(-t*s),8.),1.54) +fbm(vec2(t*4e2))*.1*pow2(fract(-t*s),3.); return vec2(p,p+sin(time))*log(1e3*fract(t*s)+1.)*pow2(fract(-s*t),.5)*.05; } vec2 bass(float time,float t){ int i = int(floor(t*4.)); float s=((i&15)<12)?3.0:1.0; float t2=mod(t,4.)*4./s; int bl[4]=int[](2660380194,2649595538,2087717888,2095873136); float f=98.*calf(float( (bl[(i>>5)&3]>>(int(t2)*4))&15)); float ft=fract(-t2); return sigcomp2d(vec2(pow2(sfm(time,f,ft,1.,pow2(ft,5.),2.5),3.) +pow2(sfm(time,f*.5,ft,3.5,pow2(ft,5.),3.5),3.)*.6 +sfm(time,f*2.,ft,1.,pow2(ft,5.),1.5)*.8)*sin(pi2*f*1.5*time)*pow2(ft,.5)*log(4e3*fract(t2)+1.)*.1,2.)*(.4+.4*fract(-t*4.)); } vec2 mainSound(float time){ float t = time*bpm/60.0; float tf = mod(t,1.0/pow(2.,floor(rand(vec2(floor(t)))*4.))); vec2 pad = vec2(0); for(float i=0.0;i<16.0;i++){ pad += padraw(time-i*.1)*0.1*rot(i*0.2)*(1.0+4.*fout(16.,40.)); pad += padraw(time-i*.01*cos(pi2*t/64.0))*0.3*rot(i*0.2)*fin(0.,32.); pad += .5*(padraw(time-i*1e-4*(sin(pi2*t/32.0)+0.2))*rot(i*0.1) +padraw(time-i*1e-4*(sin(pi2*t/32.0+0.1)+0.2))*rot(-i*0.1))*fin(40.,64.); } vec2 o = vec2(0); o += pico(time,t)*fin(124.,130.)*fout(188.,192.); o += riff(time,t,1.)*(.1*fin(127.9,128.)+.9*fin(128.,192.)); o += riff(time*calf(-2.),t,1.)*fin(248.,256.)*.5; o += riff(time*.5,t,.5)*fin(256.,256.1)*.5; o += fin(0.,32.)*fbm(vec2(time*3e2))*noise(vec2(time))*0.1+rand(vec2(time))*.02; o += fm(time,55.,.5,.5)*fin(0.,32.)*fout(64.,72.)*.1; o += amen(time,t)*fin(191.9,192.)*fout(254.,256.); o += amen(time,tf)*fin(256.,256.5)*fout(320.,320.1); o += sigcomp2d(pad*0.15,2.0)*(.2+.8*fout(188.0,192.0)); o += sigcomp2d(pad*0.15,2.0)*fin(192.5,192.51)*.7; o+=.2*vec2(rand(vec2(time)),fbm(vec2(time+10.)))*fin(122.,129.)*fout(128.,136.)*rot(time); o+=rand(vec2(time))*pow2(fin(186.0,192.0),2.0)*fout(192.0,192.1)*0.75; o+=rand(vec2(time))*pow2(fin(254.,256.),2.)*fout(256.,260.)*0.8; o+=vec2(rand(vec2(time))*pow2(fin(319.,320.),3.)*fout(320.,336.)*0.8)*rot(time); o+= bass(time,t)*fin(192.5,192.6)*fout(255.9,256.); o+= bass(time*.5,t)*fin(256.0,256.1)*fout(319.,320.); o+= bass(time,tf)*fin(256.,256.5)*fout(319.,320.)*.5; return sigcomp2d(o,2.)*fin(0.,12.)*fout(352.,384.); } ` /*********************************************************** */ function create_frag_shader(frag){ var shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(shader,frag); gl.compileShader(shader); if(gl.getShaderParameter(shader,gl.COMPILE_STATUS)){ return shader; } else{ alert(gl.getShaderInfoLog(shader)); } } function create_vert_shader(vert){ var shader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(shader,vert); 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)){ gl.useProgram(program); 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_ibo(data){ var ibo = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); return ibo; } function set_attribute(vbo, attL, attS){ for(var i in vbo){ // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, vbo[i]); // attributeLocationを有効にする gl.enableVertexAttribArray(attL[i]); // attributeLocationを通知し登録する gl.vertexAttribPointer(attL[i], attS[i], gl.FLOAT, false, 0, 0); } } /*********************************************************** */ var vertex_position = [ -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 vertex_index = [ 0, 1, 2, 1, 2, 3 ]; /*********************************************************** */ const vert =`#version 300 es in vec3 position; void main(void){ gl_Position = vec4(position, 1.0); }` const vert2 =`#version 300 es in vec3 position; void main(void){ gl_Position = vec4(position, 1.0); }` //***********************Reference************************* */ //`WebGLでSound Shaderの実装[2019.05.28@aa_debdeb]` //https://qiita.com/aa_debdeb/items/5e1204987236f7b52393 const frag = `#version 300 es precision highp float; uniform float u_sampleRate; uniform float u_blockOffset; uniform vec2 u_resolution; out vec4 o_color; ${soundshader} 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); 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); }` const frag2 = `#version 300 es precision highp float; uniform vec2 u_resolution; uniform float time; out vec4 o_color; #define bpm 172. #define pi2 6.2831 #define fin(a,b) smoothstep(a,b,time*bpm/60.0) #define fout(a,b) (1.0-smoothstep(a,b,time*bpm/60.0)) void main(){ vec2 r=u_resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); float t = time*bpm/60.; float c1 = .05/abs(length(p)-2.5*pow(fract(t*.25),5.))*fin(0.,128.); float c2 = .1/abs(length(p)-2.5*pow(fract(t),2.))*fin(192.,192.5)*fout(319.,320.); float c3 = (sin(t*pi2*.5)*.05)/pow(abs(length(p)),2.)*fin(128.,192.); o_color=vec4(c1+c2+c3)*.8*fout(320.,384.); } ` /*********************************************************** */ const DURATION = 180; //const WIDTH = screen.width; //const HEIGHT = screen.height; var starttext = document.getElementById('start'); starttext.innerHTML = ''; wrapper = document.getElementById('wrapper'); WIDTH = wrapper.offsetWidth; HEIGHT = wrapper.offsetHeight; //prepare webgl var c = document.getElementById('canvas'); c.width = WIDTH; c.height = HEIGHT; var gl = c.getContext('webgl2'); gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //compile and link shaderes var vs = create_vert_shader(vert); var fs = create_frag_shader(frag); var prg = create_program(vs,fs); //prepare webaudio const audioCtx = new AudioContext(); const audioBuffer = audioCtx.createBuffer(2,audioCtx.sampleRate*DURATION,audioCtx.sampleRate); //Calc const values for sound rendering const samples = WIDTH * HEIGHT; const numBlocks = Math.ceil((audioCtx.sampleRate*DURATION)/samples); //prepare output array const pixels = new Uint8Array(WIDTH*HEIGHT*4);//Rendered Canvas => Array const outputL = audioBuffer.getChannelData(0); const outputR = audioBuffer.getChannelData(1); //get uniform ids const uniform_sampleRate = gl.getUniformLocation(prg, 'u_sampleRate'); const unifrom_blockOffset = gl.getUniformLocation(prg, 'u_blockOffset'); const uniform_resolution = gl.getUniformLocation(prg, 'u_resolution'); //set uniforms to shader gl.uniform1f(uniform_sampleRate,audioCtx.sampleRate); gl.uniform2f(uniform_resolution,WIDTH,HEIGHT); //bind vertex var vPosition = create_vbo(vertex_position); var vIndex = create_ibo(vertex_index); var vAttLocation = gl.getAttribLocation(prg,'position'); gl.bindBuffer(gl.ARRAY_BUFFER, vPosition); gl.enableVertexAttribArray(vAttLocation); gl.vertexAttribPointer(vAttLocation, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vIndex); //rendering sound wave for (let i=0;i

pulsar