var startTime; var graphictime; function myClickListener() { /*********************************************************** */ //SoundShader soundshader=` #define bpm 88.0 #define pi2 6.2831 #define fin(a,b) smoothstep(a,b,gt) #define fout(a,b) (1.0-smoothstep(a,b,gt)) //effect 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; } mat2 rot(float r){ return mat2(cos(r),-sin(r),sin(r),cos(r)); } float gaus(float x,float m,float s){ return exp(-(x-m)*(x-m)/s); } //*********************************************// //shadertoy "Hash without Sine" by Dave_Hoskins //https://www.shadertoy.com/view/4djSRW float hash11(float p) { p = fract(p * .1031); p *= p + 33.33; p *= p + p; return fract(p); } float hash12(vec2 p) { vec3 p3 = fract(vec3(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } vec2 hash21(float p) { vec3 p3 = fract(vec3(p) * vec3(.1031, .1030, .0973)); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.xx+p3.yz)*p3.zy); } //*********************************************// float vnoise12(vec2 s){ vec2 i = floor(s); vec2 f = fract(s); float a = hash12(i); float b = hash12(i + vec2(1,0)); float c = hash12(i + vec2(0,1)); float d = hash12(i + vec2(1,1)); vec2 u = f*f*(3.0 - 2.0 * f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); } vec2 vnoise21(float s){ float i = floor(s); float f = fract(s); vec2 a = hash21(i); vec2 b = hash21(i + 1.0); float u = f*f*(3.0 - 2.0 * f); return mix(a,b,u); } float fbm12(vec2 s){ float f = 0.0; float a = 1.0; for(float i=0.0;i<4.0;i++){ f += a*(vnoise12(s/a)-0.5); a *= 0.3; } return f; } float gnsyn(float time,float freq,float seed){ float ntime = floor((mod(time,1.0/freq)+seed/freq)*48000.0)/48000.0; float gn = (fbm12(5e2*vec2(cos(ntime*pi2),sin(ntime*pi2)))); gn *= 0.5*pow((1.0 - cos(pi2*time*freq)),0.2); return gn; } float fm(float t,float f,float i,float r){ return sin(pi2*t*f + i*sin(pi2*t*f*r)); } float gnfm(float t,float f,float i,float r,float s){ return sin(pi2*t*f + i*gnsyn(t,f*r,s)); } 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 ssaw2(float t,float f){ return hash12(vec2(t)*1e4)*0.02+sfm(t,f,0.8,1.8,0.8,5.0)+sfm(t,f*1.008,0.8,1.8,0.8,7.0)+0.1*sfm(t,f*1.5,0.1,0.0,0.1,5.0); } float epiano(float t,float f,float a){ float ephh = sfm(t, 2.0*f*0.99, a*0.8, 2.0,a*0.4,12.9) +sfm(t, 2.0*f*1.01, a*0.8, 2.0,a*0.4,12.9) +0.4*sfm(t, 1.5*f*0.99, a*0.8, 2.0,a*0.4,11.9) +0.4*sfm(t, 1.5*f*0.99, a*0.8, 2.0,a*0.4,11.9); float eph = fm(t, f*0.99, a*0.8, 10.2) +fm(t, f*1.01, a*0.8, 10.2); float epl = fm(t, 0.5*f*0.99, a*0.4, 1.5); float epll = fm(t, 0.5*f*0.99, a*0.4, 1.0); float epa = fm(t, f*0.99, a*0.3, 1.14); float ep = ephh*0.18+eph*0.3 + epl*0.3 + epa*0.3; ep += vnoise12(vec2(t)*1e4)*a*0.13; ep += hash12(vec2(t)*1e4)*pow(a,2.0)*0.05; ep += sin(t*pi2*f*2.0)*0.32; ep += 0.5* (gnfm(t,f*0.99,a,2.0,13.9) + gnfm(t,f*1.01,a,2.0,12.9))*a; ep += gnfm(t,f*1.5,a,2.0,13.9)*0.35*a; ep += ssaw2(t,f)*0.09*a; ep *= (0.8 + 0.1 * fm(t,0.25*bpm/60.0,1.0,3.5) + 0.02*fm(t,4.0*bpm/50.0,0.6,2.0)); return ep*0.32*(0.5+0.5*pow(a,0.5)); } float snare2(float time){ float t = time*bpm/60.0; float snrhy = fract(t*2.0); float sn = sin(pi2*200.0*time); sn += 0.5*sin(pi2*200.0*1.5*time); sn += 0.25*sin(pi2*200.0*2.0*time); sn += 0.125*sin(pi2*200.0*3.0*time); sn += 0.125*sin(pi2*200.0*5.0*time); sn += 4.0*vnoise12(1e4*vec2(time*1e3,sin(time*5e3)))*exp(-2.0*snrhy); sn += 2.0*hash12(1e4*vec2(time,sin(time)))*exp(-2.0*snrhy); return sn*exp(-3.0*snrhy); } float calf(float i){ return pow(2.0,i/12.0); } vec2 mainSound(float time){ float t = time*bpm/60.0; float[184] ml1 = float[184](-3.,-3.,-3.,-3., -3.,-3.,-7.,-7., -5.,-5.,-5.,-5., -5.,-5.,-7.,-5., -3.,-3.,-3.,-3., -3.,-3.,-12., -12., -7.,-7.,-9.,-9., -9.,-9.,-2.,-2., -3.,-3.,-3.,-3., -3.,-3., 0., 0., -5.,-5.,-5.,-5., -5.,-5.,-7.,-5., -3.,-3.,-3.,-3., -3.,-3.,0., 0., -7.,-7.,-5.,-5., -5.,-5.,-5.,-5., -3.,-3.,-3.,-3., -3.,-3.,-7.,-7., -5.,-5.,-5.,-5., -5.,-5.,-7.,-5., -3.,-3.,-3.,-3., -3.,-3.,-12., -12., -7.,-7.,-9.,-9., -9.,-9.,-2.,-2., -3.,-3.,-3.,-3., -3.,-3., 0., 0., -5.,-5.,-5.,-5., -5.,-5.,-7.,-5., -3.,-3.,0., 0., 2., 2., 0., 0., -7.,-7.,-7.,-7., -7.,-7.,-5.,-5., -5.,-5.,-5.,-5., -7.,-7.,-7.,-7., -7.,-7.,-5.,-5., -5.,-5.,-5.,-5., -9.,-9.,-9.,-9., -7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -7.,-7.,-5.,-5., -5.,-5.,-5.,-5., -7.,-7.,-7.,-7., -7.,-7.,-5.,-5., -5.,-5.,-5.,-5., -9.,-9.,-9.,-9., -2.,-2.,-2.,-2.); float[184] mr1 = float[184](0., 0., 0., 0., 0., .1, 0., .3, 0., 0., 0., 0., 0., .1, 0., .1, 0., 0., 0., 0., 0., .3, 0., .5, 0., .3, 0., 0., 0., .1, 0., .3, 0., 0., 0., 0., 0., .1, 0., .3, 0., 0., 0., 0., 0., .1, 0., .1, 0., 0., 0., 0., 0., .3, 0., .5, 0., .3, 0., 0., 0., 0., 0., .3, 0., 0., 0., 0., 0., .1, 0., .3, 0., 0., 0., 0., 0., .1, 0., .1, 0., 0., 0., 0., 0., .3, 0., .5, 0., .3, 0., 0., 0., .1, 0., .3, 0., 0., 0., 0., 0., .1, 0., .3, 0., 0., 0., 0., 0., .1, 0., .1, 0., .1, 0., .1, 0., .1, 0., .1, 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1., 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1.); float[184] ma1 = float[184](1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 1., 1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 1., 0., 0., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 1., 1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 1., 1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 1., 0., 0., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 0., 1., 0., 0., 0., 0., 0., 1., 1., 1., 0., 1., 0., 1., 0., 1., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0.); float[124] ml2 = float[124] (-7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -9.,-12.,-12.,-12., -7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -11.,-9.,-9.,-9., -7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -7.,-7.,-7.,-7., -9.,-12.,-12.,-12., -5.,-5.,-5.,-5., -7.,-7.,-7.,-7., -7.,-4.,-5.,-7., -11.,-11.,-11.,-11., -11.,-11.,-9.,-9., -9.,-9.,-9.,-9., -11.,-11.,-11.,-11., -11.,-11.,-9.,-9., -9.,-9.,-9.,-9., -14.,-14.,-14.,-14., -12.,-12.,-12.,-12., -11.,-11.,-11.,-11., -11.,-11.,-9.,-9., -9.,-9.,-9.,-9., -11.,-11.,-11.,-11., -11.,-11.,-9.,-9., -9.,-9.,-9.,-9., -14.,-14.,-14.,-14., -7.,-7.,-7.,-7.); float[124] mr2 = float[124] (0., 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .2, 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .2, 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .2, 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .1, .1, .1, .1, 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1., 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1.); float[124] ma2 = float[124] (1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 1., 1., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0.); float[124] ml3 = float[124] (-12.,-12.,-12.,-12., -11.,-11.,-11.,-11., -12.,-12.,-12.,-12., -12.,-14.,-14.,-14., -12.,-12.,-12.,-12., -11.,-11.,-11.,-11., -12.,-12.,-12.,-12., -16.,-14.,-14.,-14., -12.,-12.,-12.,-12., -11.,-11.,-11.,-11., -12.,-12.,-12.,-12., -12.,-14.,-14.,-14., -10.,-10.,-10.,-10., -11.,-11.,-11.,-11., -12.,-9.,-9.,-9., -16.,-16.,-16.,-16., -16., -16.,-14.,-14., -14.,-14.,-14.,-14., -16., -16., -16.,-16., -16.,-16., -14.,-14., -14.,-14.,-14.,-14., -16.,-16.,-16.,-16., -14.,-14.,-14.,-14., -16.,-16.,-16.,-16., -16., -16.,-14.,-14., -14.,-14.,-14.,-14., -16., -16., -16.,-16., -16.,-16., -14.,-14., -14.,-14.,-14.,-14., -16.,-16.,-16.,-16., -12.,-12.,-12.,-12.); float[124] mr3 = float[124] (0., 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .2, 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .2, 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .2, 0., 0., .2, 0., 0., 0., .2, 0., 0., 0., .2, .1, .1, .1, .1, 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1., 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1.); float[124] ma3 = float[124] (1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 1., 1., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0.); float[124] ml4 = float[124] (-2.,-2.,-2.,-2., -4.,-4.,-4.,-4., -2.,-2.,-2.,-2., -4.,-4.,-4.,-4., -5.,-5.,-5.,-5., -3.,-3.,-3.,-3., -2.,-2.,-2.,-2., -9.,-4.,-4.,-4., -2.,-2.,-2.,-2., -4.,-4.,-4.,-4., -2.,-2.,-2.,-2., -4.,-4.,-4.,-4., -5.,-5.,-5.,-5., -4.,-4.,-4.,-4., -2.,-2.,-2.,-3., -5.,-5.,-5.,-5., -5.,-5.,-4.,-4., -4.,-4.,-4.,-4., -5.,-5.,-5.,-5., -5.,-5.,-4.,-4., -4.,-4.,-4.,-4., -11.,-11.,-11.,-11., -9.,-9.,-9.,-9., -5.,-5.,-5.,-5., -5.,-5.,-4.,-4., -4.,-4.,-4.,-4., -5.,-5.,-5.,-5., -5.,-5.,-4.,-4., -4.,-4.,-4.,-4., -11.,-11.,-11.,-11., -9.,-9.,-9.,-9.); float[124] mr4 = float[124] (0., 0., 0., .1, 0., 0., 0., .2, 0., 0., 0., .1, .2, 0., 0., .2, 0., 0., 0., .1, 0., 0., 0., .2, 0., 0., 0., .1, .2, 0., 0., .2, 0., 0., 0., .1, 0., 0., 0., .2, 0., 0., 0., .1, .2, 0., 0., .2, 0., 0., 0., .1, 0., 0., 0., .2, .1, .1, .1, .1, 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1., 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1.); float[124] ma4 = float[124] (1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 1., 1., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0.); float[124] ml5 = float[124] (2.,2.,2.,2., 3., 3., 3., 3., 2.,2.,2.,2., -2.,0., 0.,0., 2.,2.,2.,2., 3., 3., 3., 3., 2.,2.,2.,2., -2.,0., 0.,0., 2.,2.,2.,2., 3., 3., 3., 3., 2.,2.,2.,2., -2.,0., 0.,0., 4.,4.,4.,4., 3., 3., 3., 3., 2.,1.,0.,-1., -2.,-2.,-2.,-2., -2.,-2., 0.,0., 0.,0.,0.,0., -2.,-2.,-2.,-2., -2.,-2.,0.,0., 0.,0.,0.,0., -6.,-6.,-6.,-6., -4.,-4.,-4.,-4., -2.,-2.,-2.,-2., -2.,-2., 0.,0., 0.,0.,0.,0., -2.,-2.,-2.,-2., -2.,-2.,0.,0., 0.,0.,0.,0., -6.,-6.,-6.,-6., -4.,-4.,-4.,-4.); float[124] mr5 = float[124] (0., 0., 0., .1, 0., 0., 0., .2, 0., 0., 0., .1, .2, 0., 0., .2, 0., 0., 0., .1, 0., 0., 0., .2, 0., 0., 0., .1, .2, 0., 0., .2, 0., 0., 0., .1, 0., 0., 0., .2, 0., 0., 0., .1, .2, 0., 0., .2, 0., 0., 0., .1, 0., 0., 0., .2, .1, .1, .1, .1, 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1., 0., 0., .1, .1, -1.,-1.,0., 0., 0., 0., .1, -1., 0., 0., .1, .1, -1.,-1., 0., 0., 0., 0., .1, -1., 0., 0., 0., .1, 0., 0., 0., 1.); float[124] ma5 = float[124] (1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 1., 1., 1., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 1., 0., 0., 1., 0., 0., 0., 0., 0., 1., 0., 0., 0., 1., 0., 0., 0.); float[32] hha = float[32] (.5,0.,0.,0.,.1, 0., .3, 0., 0.,0.,0.,0.,.05,.1,.7,0., .5,0.,0.,0.,.1, 0., .3, 0., 0.,0.,0.,0.,.2,0.,0.,0.); float[120] bda = float[120] (.8,0.,0.,.2,0.,0.,0.,0., .8,0.,0.,0.,0.,0.,.3,0., .8,0.,0.,.2,0.,0.,0.,0., .8,0.,0.,0.,0.,0.,.3,.1, .8,0.,0.,.2,0.,0.,0.,0., .8,0.,0.,0.,0.,0.,.3,0., .8,0.,0.,.2,0.,0.,0.,0., .8,0.,.5,0.,0.,0.,.3,0., .8,0.,0.,.2,0.,0.,0.,0., .8,0.,0.,0.,0.,0.,.3,0., .8,0.,0.,.2,0.,0.,0.,0., .8,0.,0.,0.,0.,0.,.3,.1, .8,0.,0.,.2,0.,0.,0.,0., .8,0.,0.,0.,0.,0.,.3,0., .8,0.,.5,0.,.5,0.,.7,.3); float el1[3] = float[3](5.0,5.0,12.0); float el2[3] = float[3](7.0,5.0,12.0); float ea[3] = float[3](0.7,0.0,1.0); float gt = t; if(t<64.0){ t = mod(t,32.0); } else if(t<248.0){ t = mod(t-64.0,92.0); } else{ t = mod(t-248.0,32.0); } //rhythm int hht =int(mod(t*4.0,32.0)); float hhamp = 0.0; (t<60.0?hhamp=hha[hht]:hhamp=max(fract(-t*2.0)-0.5,0.0)*pow(fract(-t),2.0)); vec2 hh = (vnoise21(time*3e4))*pow(fract(-t*4.0),15.0); hh += vec2(sfm(time,1e3,fract(-t*4.0),17.0,1.0,15.0))*pow(fract(-t*4.0),20.0); hh += 0.08*hash21(time*1e4)*pow(fract(-t*4.0),5.0); hh *= 0.16*hhamp; int bdt = int(mod(t*2.0,120.0)); float bdamp = 0.0; (t<60.0?bdamp = bda[bdt]:bdamp=max(fract(-t)-0.75,0.0)); float bd = sin(370.*time - 40.0*exp(-3.0*fract(-t*2.0)))*pow(fract(-2.0*t),5.0); bd *= 0.8*bdamp; //echo int ect = int(mod(t*4.0,3.0)); float ecf = 440.0; (t<48.0?ecf*=calf(el1[ect]):ecf*=calf(el2[ect])); float ec = (0.7*gnsyn(time,ecf,12.1) +0.2*fm(time,ecf,1.0*fract(-t*4.0),2.0) +0.2*sin(time*pi2*ecf*1.005) +0.2*sin(time*pi2*ecf*calf(-2.0)) +0.4*ssaw2(time,ecf)) *pow(fract(-t*4.0),3.0)*ea[ect]*0.3; vec2 ec2 = vec2(ec)*rot(time*3.0)*pow(fract(-t/8.0),8.0)*fract(-t/16.0); //melody float vol = 0.4; if(t<60.0){ vol *= min(mod(t,8.0)*1.5,1.0); vol += 0.5*gaus(mod(t,8.0),0.5,1.5); vol += 0.5*gaus(mod(t,8.0),4.1,0.8); vol += 0.7*gaus(t,60.0,2.5); vol *= 1.0/(1.0 + 2.5*gaus(t,56.3,0.5)); } else{ vol = 1.0 - 0.3*fract(t*0.125); } if(gt<64.0){ vol *= ( 0.2 + 0.8*min((64.0 - gt)*0.25,1.0)); } int mt1 = 0; float s1 = 0.0; (mod(t*2.0,184.0)<120.0?mt1=int(mod(t*2.0,184.0)) :mt1=120+int(mod((t-60.0)*4.0,64.0))); (mod(t*2.0,184.0)<120.0?s1=2.0:s1=4.0); float a1 = 0.4+0.9*ma1[mt1]*pow(fract(-t*s1),1.0); float e1 = pow(fract(-t*s1),mr1[mt1]); (ma1[mt1]>0.?e1*=sigcomp1d(fract(t*s1),100.0):(mr1[mt1]<0.0?e1*=0.0:e1*=1.0)); float f1 = 440.0*calf(ml1[mt1]); float m1 = epiano(time,f1,a1)*e1*0.8; m1 += epiano(time,f1*1.5,a1)*e1*0.2; m1 = max(m1,-0.52); t += hash12(vec2(floor(t)))*0.04; float s2 = 0.0; int mt2 = 0; (mod(t,92.0)<60.0?mt2=int(mod(t,92.0)) :mt2=60+int(mod((t-60.0)*4.0,64.0))); (mod(t,92.0)<60.0?s2=1.0:s2=4.0); float a2 = 0.4+0.6*ma2[mt2]*pow(fract(-t*s2),2.5); float e2 = pow(fract(-t*s2),mr2[mt2]); (ma2[mt2]>0.?e2*=sigcomp1d(fract(t*s2),100.0):(mr2[mt2]<0.0?e2*=0.0:e2*=1.0)); float f2 = 440.0*calf(ml2[mt2]); float m2 = epiano(time,f2,a2)*e2; m2 = max(m2,-0.52); t += hash12(vec2(floor(t)))*0.03; int mt3 = 0; float s3 = 0.0; (mod(t,92.0)<60.0?mt3=int(mod(t,92.0)) :mt3=60+int(mod((t-60.0)*4.0,64.0))); (mod(t,92.0)<60.0?s3=1.0:s3=4.0); float a3 = 0.3+0.6*ma3[mt3]*pow(fract(-t*s3),2.5); float e3 = pow(fract(-t*s3),mr3[mt3]); (ma3[mt3]>0.?e3*=sigcomp1d(fract(t*s3),100.0):(mr3[mt3]<0.0?e3*=0.0:e3*=1.0)); float f3 = 440.0*calf(ml3[mt3]); float m3 = epiano(time,f3,a3)*e3; m3 = max(m3,-0.52); int mt4 = 0; float s4 = 0.0; (mod(t,92.0)<60.0?mt4=int(mod(t,92.0)) :mt4=60+int(mod((t-60.0)*4.0,64.0))); (mod(t,92.0)<60.0?s4=1.0:s4=4.0); float a4 = 0.2+0.6*ma4[mt4]*pow(fract(-t*s4),2.0); float e4 = pow(fract(-t*s4),mr4[mt4]); (ma4[mt4]>0.?e4*=sigcomp1d(fract(t*s4),80.0):(mr4[mt4]<0.0?e4*=0.0:e4*=1.0)); float f4 = 220.0*calf(ml4[mt4]); float m4 = epiano(time,f4,a4)*e4; m4 = max(m4,-0.52); int mt5 = 0; float s5 =0.0; (mod(t,92.0)<60.0?mt5=int(mod(t,92.0)) :mt5=60+int(mod((t-60.0)*4.0,64.0))); (mod(t,92.0)<60.0?s5=1.0:s5=4.0); float a5 = 0.3+0.9*ma5[mt5]*pow(fract(-t*s5),2.0); float e5 = pow(fract(-t*s5),mr5[mt5]); (ma5[mt5]>0.?e5*=sigcomp1d(fract(t*s5),70.0):(mr5[mt5]<0.0?e5*=0.0:e5*=1.0)); float f5 = 110.0*calf(ml5[mt5]); float m5 = (epiano(time,f5,a5) + epiano(time,f5*0.5,a5*0.5)*0.1)*e5; m5 += sin(pi2*time*f5*0.5)*0.2*e5;//sub m5 = max(m5,-0.58); vec2 m =vec2(0); m += vec2(m1)*1.3*fin(64.0,65.0)*fout(247.0,248.0); m += vec2(m2)*rot(-0.2)*0.8*(0.1+0.9*fin(0.0,32.0))*(0.5+0.5*fout(247.0,248.0)); m += vec2(m3)*rot(0.2)*0.7*fin(31.0,36.0)*(0.6+0.4*fout(247.0,248.0)); m += vec2(m4)*rot(-0.1)*0.7*(0.3+0.7*fin(0.0,16.0))*(0.6+0.4*fout(247.0,248.0)); m += vec2(m5)*rot(0.1)*1.2*(0.5+0.5*fin(0.0,6.0))*(0.7+0.3*fout(247.0,248.0)); m *= vol; vec2 o = vec2(0); o += bd*fin(123.9,124.0)*fout(247.0,248.0); o += hh*fin(63.9,64.1)*fout(247.0,248.0); o += sigcomp2d(m*0.5,2.0)*0.9; o += vnoise21(time*1e3)*(0.1+0.03*fm(time,0.3,1.0,1.0))*fout(64.0,72.0)*(0.3+0.7*fout(0.0,32.0)); o += ec2*fin(155.8,156.0)*fout(204.0,205.0); return o*0.4*(0.01+0.9*fin(0.0,16.0))*fout(280.0,312.0); } ` /*********************************************************** */ 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 88.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)) mat2 rot(float r){ return mat2(cos(r),-sin(r),sin(r),cos(r)); } 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.0-15.0*f+6.0*f*f); return mix(a,b,u.x)+(1.-u.x)*u.y*(c-a)+u.x*u.y*(d-b); } float fbm(vec2 st){ float v=0.; float a =0.5; for(int i =0;i<7;i++){ v += a*noise(st); st *= 2.; a *=0.55; } return v; } void main(){ vec2 r=u_resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); vec3 col = vec3(0.0,0.0,0.0); col+= 2.0*pow(fbm(vec2(p.x*2.0,p.y*5.0) + vec2(time*0.04+sin(-time*0.0006), time*0.01+cos(p.x+time*0.012))),4.0); p*=rot(0.3); if(abs(p.x)<0.11 || abs(p.x+0.14)<0.008){ col += vec3(0.5,0.65,0.93); } else if(abs(p.x+0.05)<0.05){ col += vec3(0.1,0.1,0.1); } else{ col = vec3(0.0,0.04,0.11)+0.1*vec3(0.8,0.9,1.0)/pow(abs(p.x),0.65)*(0.8+0.15*sin(0.3*time+sin(0.3*time*2.0))); col += 0.065*vec3(0.8,0.9,1.0)/pow(abs(p.x),0.8)*(0.75+0.2*sin(0.3*time+sin(0.3*time*2.0))); } col = vec3(0.0,0.04,0.11) + col*fin(2.0,64.0); o_color=vec4(col,1)*fout(280.0,312.0); } ` /*********************************************************** */ const DURATION = 220; //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{ const b = audioCtx.createBuffer(2, audioCtx.sampleRate*3.5, audioCtx.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*100) * 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); amp *= 0.15; f0[i] = amp * Math.cos(u); f1[i] = amp * Math.sin(u); u += (Math.random() * 2 - 1) * 0.1; } reverb.buffer = b; })(); var gainNode1 = audioCtx.createGain(); gainNode1.gain.value = 2.5; var gainNode2 = audioCtx.createGain(); gainNode2.gain.value = 1.5; const hpf = new BiquadFilterNode(audioCtx,{frequency:800, q:1,type:'highpass'}); const node = audioCtx.createBufferSource(); node.connect(gainNode1).connect(audioCtx.destination); node.connect(gainNode2).connect(hpf).connect(reverb).connect(audioCtx.destination); node.buffer = audioBuffer; node.loop = true; node.start(0) //**************************************************/ //*********************************** ***************/ //init visual window.removeEventListener("click", myClickListener); startTime = new this.Date().getTime(); window.addEventListener("resize", function(){ getSize(); }); function getSize(){ WIDTH = wrapper.clientWidth; HEIGHT = wrapper.clientHeight; c.width = WIDTH; c.height = HEIGHT; console.log("resize") gl.viewport(0, 0, WIDTH, HEIGHT); } //compile and link shaderes vs = create_vert_shader(vert2); fs = create_frag_shader(frag2); prg = create_program(vs,fs); //get uniform id uniform_resolution2 = gl.getUniformLocation(prg, 'u_resolution'); (function(){ graphictime = (new Date().getTime() - startTime)*0.001; gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); utgptime = gl.getUniformLocation(prg,'time'); //set uniforms to shader gl.uniform2fv(uniform_resolution2,[WIDTH,HEIGHT]); gl.uniform1f(utgptime,graphictime); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.flush(); // ループのために再帰呼び出し setTimeout(arguments.callee, 1000 / 30); /*********************************************************** */ })(); } window.addEventListener("load", function() { window.addEventListener("click", myClickListener); });