const vert = ` attribute vec3 aPosition; attribute vec2 aTexCoord; varying vec2 vTexCoord; void main() { vTexCoord = aTexCoord; vec4 positionVec4 = vec4(aPosition, 1.0); positionVec4.xy = positionVec4.xy * 2.0; gl_Position = positionVec4; } `; const frag = ` precision highp float; varying vec2 vTexCoord; uniform vec2 u_resolution; uniform float u_time; uniform vec3 u_spheres[90]; uniform int u_count; // ボール float smin(float a, float b, float k) { float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); } // 3D計算 float map(vec3 p) { float d = 1e5; for (int i = 0; i < 90; i++) { if (i >= u_count) break; vec3 pos = u_spheres[i]; // 粒々の半径 float r = 0.26; float sd = length(p - pos) - r; // くっつき具合 d = smin(d, sd, 0.25); } return d; } // 法線計算 vec3 calcNormal(vec3 p) { vec2 e = vec2(0.001, 0.0); return normalize(vec3( map(p + e.xyy) - map(p - e.xyy), map(p + e.yxy) - map(p - e.yxy), map(p + e.yyx) - map(p - e.yyx) )); } void main() { vec2 st = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y); st.y = -st.y; // カメラ位置 vec3 ro = vec3(0.0, 0.0, 4.8); vec3 rd = normalize(vec3(st, -1.8)); // レイマーチング float t = 0.0; for (int i = 0; i < 64; i++) { vec3 p = ro + rd * t; float d = map(p); if (d < 0.001 || t > 10.0) break; t += d; } // 背景 vec3 bgColor = vec3(0.98, 0.98, 0.98); vec3 color = bgColor; if (t < 10.0) { vec3 p = ro + rd * t; vec3 n = calcNormal(p); // ライティング vec3 lightDir1 = normalize(vec3(1.0, 1.5, 1.2)); vec3 lightDir2 = normalize(vec3(-1.0, -1.0, -0.5)); float diff1 = max(dot(n, lightDir1), 0.0); float diff2 = max(dot(n, lightDir2), 0.0) * 0.4; // 粘土の色 vec3 clayColor = vec3(0.12, 0.13, 0.15); color = clayColor * (diff1 * 1.0 + diff2 + 0.15); // エッジハイライト float rim = pow(1.0 - max(dot(-rd, n), 0.0), 3.5); color += vec3(0.35) * rim; } gl_FragColor = vec4(color, 1.0); } `; let clayShader; let targets = []; let particles = []; const numParticles = 65; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); pixelDensity(1); clayShader = createShader(vert, frag); generateStylishIDDPoints(); for (let i = 0; i < numParticles; i++) { particles.push({ pos: createVector(random(-3.5, 3.5), random(-2.5, 2.5), random(-2, 2)), noiseSeed: random(1000) }); } } function draw() { background(250); shader(clayShader); let time = millis() * 0.001; let flatSpheres = []; // 合体 ↔ 散らばり let morphProgress = sin(time * 0.8) * 0.5 + 0.5; // 回転 let rotY = time * 1.2; for (let i = 0; i < numParticles; i++) { let p = particles[i]; let target = targets[i % targets.length]; // うねうね let noiseX = (noise(p.noiseSeed + time * 0.5, 0) - 0.5) * 0.12; let noiseY = (noise(p.noiseSeed + time * 0.5, 100) - 0.5) * 0.12; let noiseZ = (noise(p.noiseSeed + time * 0.5, 200) - 0.5) * 0.12; let currentTargetX = lerp(p.pos.x, target.x + noiseX, morphProgress); let currentTargetY = lerp(p.pos.y, target.y + noiseY, morphProgress); let currentTargetZ = lerp(p.pos.z, target.z + noiseZ, morphProgress); // 回転計算 let rx = currentTargetX * cos(rotY) - currentTargetZ * sin(rotY); let rz = currentTargetX * sin(rotY) + currentTargetZ * cos(rotY); flatSpheres.push(rx, currentTargetY, rz); } clayShader.setUniform("u_resolution", [width, height]); clayShader.setUniform("u_time", time); clayShader.setUniform("u_spheres", flatSpheres); clayShader.setUniform("u_count", numParticles); noStroke(); plane(width, height); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function generateStylishIDDPoints() { targets = []; // 'I' for (let y = -0.9; y <= 0.9; y += 0.25) { targets.push(createVector(-1.6, y, 0)); } // 1つ目の 'D' for (let y = -0.9; y <= 0.9; y += 0.25) targets.push(createVector(-0.8, y, 0)); for (let x = -0.8; x <= -0.3; x += 0.25) { targets.push(createVector(x, 0.9, 0)); targets.push(createVector(x, -0.9, 0)); } for (let a = -HALF_PI; a <= HALF_PI; a += PI / 6) { targets.push(createVector(-0.3 + cos(a) * 0.6, sin(a) * 0.9, 0)); } // 2つ目の 'D' for (let y = -0.9; y <= 0.9; y += 0.25) targets.push(createVector(0.5, y, 0)); for (let x = 0.5; x <= 1.0; x += 0.25) { targets.push(createVector(x, 0.9, 0)); targets.push(createVector(x, -0.9, 0)); } for (let a = -HALF_PI; a <= HALF_PI; a += PI / 6) { targets.push(createVector(1.0 + cos(a) * 0.6, sin(a) * 0.9, 0)); } }

Information flexibility