const vs = ` attribute vec3 aPosition; varying vec2 vUv; uniform float uAspect; void main(){ vUv = aPosition.xy * 2.0; // 今回は±1～±1で。 vUv.x *= uAspect; gl_Position = vec4(aPosition * 2.0, 1.0); } `; const fs = ` precision mediump float; varying vec2 vUv; uniform float uTime; uniform sampler2D uTex; // hsb2rgb. vec3 hsb2rgb(float h, float s, float b){ vec3 c = vec3(h, s, b); vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); rgb = rgb * rgb * (3.0 - 2.0 * rgb); return c.z * mix(vec3(1.0), rgb, c.y); } void main(){ float y = length(vUv); float x = (atan(vUv.y, vUv.x) + 3.14159) / 6.28318; // ちょっとしたトリックを追加 y *= 1.0+0.2*sin(12.0*3.14159*x); y=pow(y, 0.25); // ここをいじるとおかしくなる。 y -= uTime*0.1; x += uTime*0.03; vec4 col = texture2D(uTex, vec2(fract(2.0*x), fract(2.0*y))); // 中心付近を暗くする処理 col.a *= pow(length(vUv), 0.5); gl_FragColor = col * vec4(vec3(col.a), 1.0); } `; let myShader; let f=0; let gr; const spiralScale = 48; const maxDiam = 200; const span = 120; const expansionFactor = maxDiam/span; const spiralOffset = Math.random(); let myFont; function preload(){ myFont = loadFont("https://inaridarkfox4231.github.io/assets/HuiFont29.ttf"); } function setup(){ createCanvas(windowWidth, windowHeight, WEBGL); pixelDensity(1); gr = createGraphics(800, 800); gr.background(0); gr.colorMode(HSB, 1); gr.noStroke(); myShader = createShader(vs, fs); textFont(myFont); } function draw(){ if(f <= span){ iteration(gr); background(0); textSize(48); fill(255); noStroke(); const dotsPattern = [".", "..", "..."]; const dots = dotsPattern[floor((f%60)/20)]; textAlign(LEFT, CENTER); text("now drawing" + dots, -160, -26); const progress = floor(f*100/span); textAlign(CENTER, CENTER); text(progress + "%", 0, 26); }else{ background(0); shader(myShader); myShader.setUniform("uTex", gr); myShader.setUniform("uTime", millis()/1000); myShader.setUniform("uAspect", width/height); plane(0); } } function iteration(g){ for(let i=0; i<160; i++){ const u = i + spiralOffset; const r = spiralScale*sqrt(u); const x = g.width/2 + r*cos(2.4*u); const y = g.height/2 + r*sin(2.4*u); const t = (span-f)/span; g.fill(fract(noise(i) * 3), sqrt(t), 1-sqrt(t)); drawCircle(gr, x, y, maxDiam - expansionFactor*f); } f++; } function drawCircle(g, x, y, d){ const w = g.width; const h = g.height; if(x<0 || x>w || y<0 || y>h){ return; } g.circle(x, y, d); if(x < maxDiam/2){ g.circle(x + g.width, y, d); } if(w-x < maxDiam/2){ g.circle(x - w, y, d); } if(y < maxDiam/2){ g.circle(x, y + h, d); } if(h-y < maxDiam/2){ g.circle(x, y - h, d); } if(mag(x, y) < maxDiam/2){ g.circle(x + w, y + h, d); } if(mag(w-x, y) < maxDiam/2){ g.circle(x - w, y + h, d); } if(mag(x, h-y) < maxDiam/2){ g.circle(x + w, y - h, d); } if(mag(w-x, h-y) < maxDiam/2){ g.circle(x - w, y - h, d); } }

expansion voronoi