p5.disableFriendlyErrors = true; var vts=` precision mediump float; varying vec2 vTexCoord; attribute vec3 aPosition; attribute vec2 aTexCoord; void main() { vTexCoord=aTexCoord; vec4 po=vec4(aPosition,1.0); po.xy=po.xy*2.0-1.0; gl_Position=po; } `; var fgs=` precision mediump float; varying vec2 vTexCoord; uniform sampler2D ut; uniform float asp_rt; float rand(vec2 p){ return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453); } void main() { vec2 xy = vTexCoord; xy.y=1.0-xy.y; float size = 9.0; vec2 xy2; xy2.x = floor(xy.x * size * asp_rt) / (size * asp_rt ); xy2.y = floor(xy.y * size) / size; gl_FragColor = texture2D(ut, xy2); } `; var fgs2=` precision mediump float; varying vec2 vTexCoord; uniform sampler2D ut; uniform float time; float rand(vec2 p){ return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453); } void main() { vec2 xy = vTexCoord; xy.y=1.0-xy.y; gl_FragColor = texture2D(ut, xy)*0.9+rand(xy*sin(time))*0.1; } `; class point{ constructor(){ this.x=0; this.y=0; this.vx=0; this.vy=0; this.rx=0; this.ry=0; this.sz=0; this.hue=0; this.sat=0; this.bri=0; this.alp=0; } } const DW=11012;//window.innerWidth; const DW13=2408;//window.innerWidth; const DW24=3098;//window.innerWidth; const DH=1080;//window.innerHeight; const DI=Math.min(DW,DH); var fi1,fi2,fi313,fi324; var sc1,sc2,sc3,sc4,sc1bg,sc3bg; var sd113,sd213,sd124,sd224; var p1=[]; const p1_n = 100; var p2=[]; const p2_n = 50; var p3=[]; const p3_n = 100; var p4=[]; const p4_n = 160; const lgt_ssz = 300; var fmvlx = fmvly = 0; var fdfg = false; var fdx = 0; var fdy = 0; var lgt_sc; const sc_rt = 0.1; const sc_rt2 = 0.5; var count=0; function setup(){ createCanvas(DW,DH); noStroke(); imageMode(CENTER); fi2=createGraphics(DW,DH);//壁 fi2.noStroke(); fi313=createGraphics(DW13*sc_rt2,DH*sc_rt2,WEBGL); fi313.noStroke(); fi324=createGraphics(DW24*sc_rt2,DH*sc_rt2,WEBGL); fi324.noStroke(); sd113 = fi313.createShader(vts,fgs); sd213 = fi313.createShader(vts,fgs2); sd124 = fi324.createShader(vts,fgs); sd224 = fi324.createShader(vts,fgs2); sc1=createGraphics(DW13*sc_rt,DH*sc_rt); sc1.colorMode(HSB,255); sc1.noStroke(); sc1bg=createGraphics(DW13*sc_rt,DH*sc_rt); sc1bg.colorMode(HSB,255); sc1bg.noStroke(); sc2=createGraphics(DW24*sc_rt,DH*sc_rt); sc2.colorMode(HSB,255); sc2.noStroke(); sc3=createGraphics(DW13*sc_rt,DH*sc_rt); sc3.colorMode(HSB,255); sc3.noStroke(); sc3bg=createGraphics(DW13*sc_rt,DH*sc_rt); sc3bg.colorMode(HSB,255); sc3bg.noStroke(); sc4=createGraphics(DW24*sc_rt,DH*sc_rt); sc4.colorMode(HSB,255); sc4.noStroke(); frameRate(20); noiseSeed(random(0,1000)); drawWall(); drawSc1Bg(); drawSc3Bg(); //点初期化 for( let n = 0; n < p1_n; n++ ){ p1[n] = new point(); p1[n].x = random(0,DW13)*sc_rt; p1[n].y = random(0,DH)*sc_rt; p1[n].vx = random(-30,30)*sc_rt; p1[n].vy = 10*sc_rt;//random(3,6); p1[n].rx = random(0,6.28); p1[n].ry = random(0,6.28); p1[n].sz = random(100,600)/3*sc_rt; p1[n].hue = random(230,255); p1[n].sat = random(0,75); p1[n].bri = 255; p1[n].alp = random(150,255); } for( let n = 0; n < p2_n; n++ ){ p2[n] = new point(); p2[n].x = random(0,DW24)*sc_rt; p2[n].y = random(0,DH)*sc_rt; p2[n].vx = random(1,5)/3*sc_rt; p2[n].vy = 0; p2[n].rx = 0; p2[n].ry = 0; p2[n].sz = random(150,500)*sc_rt; p2[n].hue = 0; p2[n].sat = 0; p2[n].bri = random(220,255); p2[n].alp = 255; } for( let n = 0; n < p3_n; n++ ){ p3[n] = new point(); p3[n].x = random(0,DW13)*sc_rt; p3[n].y = random(0,DH)*sc_rt; p3[n].vx = random(-30,30)*sc_rt; p3[n].vy = 5;//random(3,6); p3[n].rx = random(0,6.28); p3[n].ry = random(0,6.28); p3[n].sz = random(5,200)*sc_rt; p3[n].hue = random(0,50); p3[n].sat = random(150,255); p3[n].bri = random(150,255); p3[n].alp = 255; } for( let n = 0; n < p4_n; n++ ){ p4[n] = new point(); p4[n].x = random(0,DW24)*sc_rt; p4[n].y = random(0,DH)*sc_rt; p4[n].vx = random(-30,30)*sc_rt; p4[n].vy = 10*sc_rt;//random(3,6); p4[n].rx = 0; p4[n].ry = 0; p4[n].sz = random(40,100)*sc_rt; p4[n].hue = 0; p4[n].sat = 0; p4[n].bri = 255;//random(150,255); p4[n].alp = random(100,255); } } function draw(){ clear(); drawSc1(); drawSc2(); drawSc3(); drawSc4(); drawingContext.filter = 'blur(20px)'; image(sc4,DW13/2, DH/2,DW13*0.8,DH*0.8); image(sc1,DW13+DW24/2, DH/2,DW24*0.8,DH*0.8); image(sc2,DW13+DW24+DW13/2, DH/2,DW13*0.8,DH*0.8); image(sc3,DW13+DW24+DW13+DW24/2,DH/2,DW24*0.8,DH*0.8); drawingContext.filter = 'blur(0px)'; blendMode(BURN); applySd(fi313,sc4,sd113,sd213,2.2296,DW13,0); applySd(fi324,sc1,sd124,sd224,2.8685,DW24,DW13); applySd(fi313,sc2,sd113,sd213,2.2296,DW13,DW13+DW24); applySd(fi324,sc3,sd124,sd224,2.8685,DW24,DW13+DW24+DW13); blendMode(BLEND); image(fi2,DW/2,DH/2); count++ if(count>10)count=5; } function drawSc1Bg(){ for(let i=0;i<10;i++){ sc1bg.fill(60,150,200,50); sc1bg.rect(-50,sc1bg.height*(0.7+i/20),sc1bg.width+100,sc1bg.height*0.7); } for(let i=0;i<1000;i++){ sc1bg.fill(random(230,255),random(0,75),255,100); sc1bg.ellipse(random(DW13*sc_rt),random(DH*sc_rt*0.7,DH*sc_rt),5,5) } sc1bg.stroke(20,20,180); for(let i=0;i<2;i++){ sc1bg.strokeWeight(DW13*random(0.01,0.02)); sc1bg.line(random(DW13*sc_rt),0,0,DH); } } function drawSc3Bg(){ for(let i=0;i<10;i++){ sc3bg.fill(20,50,200,50); sc3bg.rect(-50,sc3bg.height*(0.5+i/20),sc3bg.width+100,sc3bg.height*0.5); } for(let i=0;i<100;i++){ sc3bg.fill(random(0,40),random(210,250),random(230,255),10); sc3bg.ellipse(random(DW13*sc_rt),random(DH*sc_rt),random(20,40),random(20,40)) } } function applySd(tfi,tsc,tsd1,tsd2,tasp,tDW,tDx){ tfi.clear(); tfi.background(255); tfi.shader(tsd1); tsd1.setUniform('ut', tsc ); tsd1.setUniform('asp_rt', tasp ); tfi.rect(0,0,tDW*sc_rt2,DH*sc_rt2); tfi.resetShader(); tfi.shader(tsd2); tsd2.setUniform('ut', tfi ); tsd2.setUniform('time', count*0.1); tfi.rect(0,0,tDW*sc_rt2,DH*sc_rt2); tfi.resetShader(); image(tfi,tDx+tDW/2,DH/2,tDW*0.8,DH*0.8); image(tfi,tDx+tDW/2,DH/2,tDW*0.8,DH*0.8); } function drawWall(){ fi2.rectMode(CENTER); fi2.imageMode(CENTER); fi2.background(50); let tmptx = createGraphics(10,1080); tmptx.noStroke(); tmptx.background(200); tmptx.fill(100); tmptx.rect(0,0,10,100); tmptx.strokeWeight(1); for(let k=0;k<100;k++){ tmptx.stroke(100+k); tmptx.line(0,100.5+k,10,100.5+k); } tmptx.strokeWeight(2); for(let k=0;k<55;k++){ tmptx.stroke(255-k); tmptx.line(0,1080-k*2,10,1080-k*2); } fi2.fill(230); let fmsz = 120; fi2.image(tmptx,DW13/2, DH/2,DW13*0.8+fmsz,DH*0.8+fmsz*0.6); fi2.image(tmptx,DW13+DW24/2, DH/2,DW24*0.8+fmsz,DH*0.8+fmsz*0.6); fi2.image(tmptx,DW13+DW24+DW13/2, DH/2,DW13*0.8+fmsz,DH*0.8+fmsz*0.6); fi2.image(tmptx,DW13*2+DW24+DW24/2,DH/2,DW24*0.8+fmsz,DH*0.8+fmsz*0.6); fi2.fill(50); fmsz = 20; fi2.rect(DW13/2, DH/2,DW13*0.8+fmsz,DH*0.8+fmsz); fi2.rect(DW13+DW24/2, DH/2,DW24*0.8+fmsz,DH*0.8+fmsz); fi2.rect(DW13+DW24+DW13/2, DH/2,DW13*0.8+fmsz,DH*0.8+fmsz); fi2.rect(DW13*2+DW24+DW24/2,DH/2,DW24*0.8+fmsz,DH*0.8+fmsz); fi2.erase(); fi2.rect(DW13/2, DH/2,DW13*0.8,DH*0.8); fi2.rect(DW13+DW24/2, DH/2,DW24*0.8,DH*0.8); fi2.rect(DW13+DW24+DW13/2, DH/2,DW13*0.8,DH*0.8); fi2.rect(DW13*2+DW24+DW24/2,DH/2,DW24*0.8,DH*0.8); fi2.noErase(); } function drawSc1(){ sc1.background(140,50,255); sc1.image(sc1bg,0,0); for( let n=0; n< p1_n; n++ ){ sc1.push(); sc1.fill( p1[n].hue, p1[n].sat, p1[n].bri, p1[n].alp ); sc1.translate(p1[n].x, p1[n].y); sc1.rotate(p1[n].rx) sc1.ellipse( 0,0, p1[n].sz, p1[n].sz*sin(p1[n].ry) ); sc1.pop(); let dx = (noise(n*0.01,p1[n].sz*0.01,frameCount*0.01)-0.5)*30*sc_rt;//p1[n].vx; let dy = p1[n].vy*p1[n].sz*0.01/sc_rt; p1[n].x += dx; p1[n].y += dy; p1[n].rx += dx*0.001/sc_rt; p1[n].ry += dy/p1[n].sz; if(p1[n].y>DH*sc_rt+p1[n].sz)p1[n].y=-p1[n].sz; if(p1[n].x<-p1[n].sz) p1[n].x=DW13*sc_rt+p1[n].sz; if(p1[n].x>DW13*sc_rt+p1[n].sz) p1[n].x=-p1[n].sz; } } function drawSc2(){ sc2.background(140,150,255); for( let n=0; n< p2_n; n++ ){ sc2.push(); sc2.fill( p2[n].hue, p2[n].sat, p2[n].bri ); let tmp_x = p2[n].x; if(p2[n].y>DH*sc_rt*0.7 && n%2==0 )tmp_x = DW24*sc_rt - p2[n].x; sc2.translate( tmp_x, p2[n].y + Math.sin(p2[n].x*0.1+n*0.1)*5); sc2.ellipse( 0,0, p2[n].sz, p2[n].sz*0.5); sc2.pop(); p2[n].x += p2[n].vx; if(p2[n].y>DH*sc_rt*0.7){ p2[n].x += p2[n].vx*10; } if(p2[n].x>DW24*sc_rt+p2[n].sz)p2[n].x=-p2[n].sz; } sc2.fill(140,255,255); sc2.rect(-50,sc2.height*0.6,sc2.width+100,sc2.height*0.15); sc2.fill(35,50,255); sc2.rect(-50,sc2.height*0.8,sc2.width+100,sc2.height*0.3); } function drawSc3(){ sc3.background(30,20,255); sc3.image(sc3bg,0,0); sc3.ellipseMode(CORNER); for( let n=0; n< p3_n; n++ ){ sc3.push(); sc3.fill( p3[n].hue, p3[n].sat, p3[n].bri ); sc3.translate(p3[n].x, p3[n].y); sc3.rotate(p3[n].rx) sc3.ellipse( p3[n].sz, p3[n].sz/2, p3[n].sz, p3[n].sz*sin(p3[n].ry) ); sc3.pop(); let dx = (noise(n*0.01,p3[n].sz*0.01,frameCount*0.01)-0.5)*30*sc_rt;//p1[n].vx; let dy = p3[n].vy*p3[n].sz*0.01; p3[n].x += dx; p3[n].y += dy; p3[n].rx += dx*0.01/sc_rt; p3[n].ry += dy/p3[n].sz; if(p3[n].y>DH*sc_rt+p3[n].sz)p3[n].y=-p3[n].sz; if(p3[n].x<-p3[n].sz) p3[n].x=DW13*sc_rt+p3[n].sz; if(p3[n].x>DW13*sc_rt+p3[n].sz) p3[n].x=-p3[n].sz; } } function drawSc4(){ sc4.background(140,0,190); for( let n=0; n< p4_n; n++ ){ sc4.push(); sc4.fill( p4[n].hue, p4[n].sat, p4[n].bri, p4[n].alp ); sc4.translate(p4[n].x, p4[n].y); sc4.circle( 0,0, p4[n].sz); sc4.pop(); let dx = (noise(n*0.01,p4[n].sz*0.01,frameCount*0.01)-0.5)*30*sc_rt;//p1[n].vx; let dy = p4[n].vy*pow(p4[n].sz,3)*0.0002/sc_rt; p4[n].x += dx; p4[n].y += dy; p4[n].rx += dx*0.01/sc_rt; p4[n].ry += dy/p4[n].sz*10; if(p4[n].y>DH*sc_rt+p4[n].sz) p4[n].y=-p4[n].sz; if(p4[n].x<-p4[n].sz) p4[n].x=DW24*sc_rt+p4[n].sz; if(p4[n].x>DW24*sc_rt+p4[n].sz) p4[n].x=-p4[n].sz; } sc4.fill(0,0,255); sc4.rect(0,sc4.height*0.8,sc4.width,sc4.height*0.2); }