var startTime; var graphictime; function myClickListener() { /*********************************************************** */ //SoundShader //circular progressionがついてる soundshader=` float PI = 3.141592; float bpm = 132.0; mat2 rot(float r){ return mat2(cos(r),sin(r),-sin(r),cos(r)); } float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); vec2 u = f * f * (3.0 - 2.0 * f); return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } #define OCTAVES 4 float fbm (in vec2 st) { float value = 0.0; float amplitude = .5; float frequency = 0.; for (int i = 0; i < OCTAVES; i++) { value += amplitude * noise(st); st *= 2.; amplitude *= .5; } return value; } float calf(float i){ return pow(2.0,i/12.0); } float fm(float t,float f,float i,float r){ return sin(PI*2.0*t*f + i*sin(PI*2.0*t*f*r)); } float hurin(float time,float p){ float h = (fm(time,p*1760.0*calf(-4.0),exp(-time*8.0)*0.2,3.5) +0.8*fm(time,p*1760.0*calf(-4.03),exp(-time*10.0)*0.2,3.5) +0.03*sin(1760.0*time*PI*2.0) +0.03*sin(time*PI*p*2.0*1760.0*calf(1.0))) *log(time*1e3+1.0)*exp(-time*4.0)*(0.85+0.15*sin(time*80.0)); return h; } vec2 mainSound(float time){ float ftime = (int(floor(time))%2==0)?fract(time):1.0-fract(time); //wind float wind = (random(vec2(time,time))*0.04 +fbm(vec2(fract(time)*1e3,sin(time*0.7))))*pow(fbm(vec2(time*.4,sin(time*.4))),5.0); //hurin float ltime1 = fract(time/9.0-0.15)*9.0; float ltime2 = fract(time/13.0-0.2)*13.0; float ltime3 = fract(time/13.0-0.208)*13.0; float ltime4 = fract(time/17.0-0.3)*17.0; vec2 o = vec2(0); o += wind*0.55; o += hurin(ltime1,1.0)*0.05; o += hurin(ltime2,1.0)*0.02; o += hurin(ltime3,1.0)*0.05; o += hurin(ltime4,1.0)*0.05; o += random(vec2(time,time))*0.0005; return o; } ` /*********************************************************** */ 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; precision highp float; float PI = 3.141592; mat2 rot(float r){ return mat2(cos(r),sin(r),-sin(r),cos(r)); } float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); vec2 u = f * f * (3.0 - 2.0 * f); return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } #define OCTAVES 6 float fbm (in vec2 st) { float value = 0.0; float amplitude = .5; float frequency = 0.; for (int i = 0; i < OCTAVES; i++) { value += amplitude * noise(st); st *= 2.; amplitude *= .5; } return value; } float cylin( vec3 p, float h, float r ) { p.y -= clamp( p.y, 0.0, h ); return length( p ) - r; } float hashira(vec3 p,vec2 s){ vec2 q = abs(p.xz); vec2 m = max(s-q,0.); return length(max(q-s,0.))-min(m.x,m.y); } float box(vec3 p,vec3 s){ vec3 q = abs(p); vec3 m = max(s-q,0.); return length(max(q-s,0.))-min(min(m.x,m.y),m.z); } float cup(vec3 p){ p.xy *= rot(PI); p.y += 0.4; float sd = abs(length(p)-0.4)-0.01; float bd = box(p-vec3(0,-0.45,0),vec3(0.9,0.2,0.9)); return max(sd,-bd); } // The MIT License // Copyright © 2019 Inigo Quilez float dot2( in vec2 v ) { return dot(v,v); } vec4 sdJoint3DSphere( in vec3 p, in float l, in float a, in float w) { // if perfectly straight if( abs(a)<0.001 ) return vec4( length(p-vec3(0,clamp(p.y,0.0,l),0))-w, p ); // parameters vec2 sc = vec2(sin(a),cos(a)); float ra = 0.5*l/a; // recenter p.x -= ra; // reflect vec2 q = p.xy - 2.0*sc*max(0.0,dot(sc,p.xy)); float u = abs(ra)-length(q); float d2 = (q.y<0.0) ? dot2( q+vec2(ra,0.0) ) : u*u; float s = sign(a); return vec4( sqrt(d2+p.z*p.z)-w, (p.y>0.0) ? s*u : s*sign(-p.x)*(q.x+ra), (p.y>0.0) ? atan(s*p.y,-s*p.x)*ra : (s*p.x<0.0)?p.y:l-p.y, p.z ); } vec4 rope1(vec3 p){ p.y += 1.; p.x -= 1.; p.yz *= rot(PI); float an2 = 0.1*sin(time*1.9)*exp(fract(time*1.9/(PI*2.)))-0.2; float le2 = 0.6; float wi2 = 0.01; vec4 d4 = sdJoint3DSphere(p, le2, an2, wi2 ); p.xy*= rot(-an2); p -= vec3(0,le2/an2*sin(an2),0); p.xy*= rot(-an2); return vec4(p,d4.x); } vec4 cup1(vec3 p1){ vec4 rope1obj = rope1(p1); vec3 p = rope1obj.xyz; float d4 = rope1obj.w; float scup = 1.6; float d0 = cup(p*scup)/scup; return vec4(p,min(d0,d4)); } vec4 rope2(vec3 p1){ vec4 cupobj = cup1(p1); vec3 p = cupobj.xyz; float d0 = cupobj.w; p.xy *= rot(0.1*sin(time)); float an = 0.1*sin(time*2.)*exp(fract(time*2./(PI*2.)))-0.15; float le = 1.2; float wi = 0.01; vec4 d1 = sdJoint3DSphere(p, le, an, wi ); p.xy*= rot(-an); p -= vec3(0,le/an*sin(an),0); p.xy*= rot(-an); p.xz *= rot(time*4.+pow(abs(sin(time)),4.)*time*6.); return vec4(p,min(d1.x,d0)); } vec4 paper1(vec3 p1){ vec4 rope2obj = rope2(p1); vec3 p = rope2obj.xyz; float d1 = rope2obj.w; float planex = 0.4; float d2 = box(p-vec3(0,planex,0),vec3(0.01,planex,0.1)); return vec4(p,min(d2,d1)); } float hurin(vec3 p){ vec4 paper1obj = paper1(p); p = paper1obj.xyz; float d2 = paper1obj.w; //p.yz *= rot(time); return d2; } float ueno(vec3 p){ vec3 sp = p; sp.xy *=rot(0.5*PI); sp.x = abs(sp.x)-0.8; float d1 = hashira(sp,vec2(0.2,0.2)); sp = p; float spkx = 2.6; sp.x = mod(sp.x,spkx)-0.5*spkx; float d2 = box(sp,vec3(0.1,0.8,0.2)); float d3 = box(p-vec3(0,1.8,0),vec3(100,0.2,3)); return min(min(d1,d2),d3); } float door(vec3 sp){ return box(sp-vec3(-7,-4,0),vec3(5,3,0.15)); } float ana(vec3 p){ p.x += 0.2; p.y +=0.15; float k = 0.9; p.xy = mod(p.xy,k)-0.5*k; p.z = abs(p.z)-1.; float d0 = box(p,vec3(0.38,0.38,0.95)); return d0; } float dist(vec3 p){ float d0 = ueno(p); float d3 = door(p); d3 = max(d3,-ana(p)); return min(min(d0,d3),hurin(p)); } vec3 getNormal(vec3 p){ vec2 e = vec2(0.001,0.); return normalize(vec3( dist(p+e.xyy)-dist(p-e.xyy), dist(p+e.yxy)-dist(p-e.yxy), dist(p+e.yyx)-dist(p-e.yyx) )); } vec3 woodoorlight(vec3 p,vec3 ld,vec3 normal,vec3 vd){ float alp = .5; float dif = pow((alp*max(dot(normal,ld),0.)+(1.-alp)),2.); float nof = fbm(p.xy*1.+p.z*0.3); float nof2 = fbm(20.+p.xy*2.+.4*p.z); vec3 alb = vec3(218.,143.,143.)/255.*(0.2+0.8*nof); if(mod(nof*10.0,2.0)<0.2||mod(nof2*10.0,2.0)<0.2){ alb =vec3(0,0,0); } return dif*alb; } vec3 wooduplight(vec3 p,vec3 ld,vec3 normal,vec3 vd){ float alp = .5; float dif = pow((alp*max(dot(normal,ld),0.)+(1.-alp)),2.); float nof = fbm(40.+p.xy*1.+p.z*0.3); float nof2 = fbm(30.+p.xy*2.+.4*p.z); vec3 alb = 0.4*vec3(288.,143.,143.)/255.*(0.2+0.8*nof); if(mod(nof*10.0,2.0)<0.2){ alb =vec3(0,0,0); } return dif*alb; } vec3 paperlight(vec3 p,vec3 ld,vec3 normal,vec3 vd){ float alp = .1; float dif = pow((alp*max(dot(normal,ld),0.)+(1.-alp)),2.); vec3 alb = vec3(1.0); return dif*alb; } vec3 sky(vec3 vd,vec3 ld){ float dalp = pow(dot(ld,vd),6.); vec3 blue = normalize(vec3(0.1,0.2,1.)); vec3 white = vec3(1); vec3 scol= mix(blue,white,dalp); float fbmem = fbm(6.*vd.yx+time*0.1); return mix(vec3(0.1,0.3,0.9),scol+fbmem,clamp(vd.y*2.,0.,1.0)); } void main(){vec2 r=u_resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); vec2 uv = gl_FragCoord.xy/r; vec2 pix = vec2(min(u_resolution.x,u_resolution.y)/64.); vec3 ta = vec3(0,-2,0); vec3 ro = vec3(2,-3,5); ro -= 1.0*(ta-ro); vec3 cdir = normalize(ta-ro); vec3 side = cross(cdir,vec3(0,1,0)); vec3 up = cross(side,cdir); float fov = 3.0; vec3 fcol = vec3(0); vec2 glv =floor(gl_FragCoord.xy/2.); #define bokashi 5 for(int i = 0;imaxdis)break; } vec3 col = vec3(0); vec3 sp = ro+rd*t; vec3 ld = normalize(vec3(0.5,1,-1)); vec3 vd = rd; vec3 nor = getNormal(sp); if(dabs(sp.z)&&(ana(sp)0.9)){ col = paperlight(sp,ld,nor,vd); } }; if(ueno(sp) 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