// Title: LED Cube 2 — Falling Mirror Balls and Expanding White Spheres // Output: 1536 x 768 pixels; five synchronized 384 x 384 views. // A=WEST, B=SOUTH, C=EAST, D=NORTH; E=BOTTOM directly below B. p5.disableFriendlyErrors = true; const OUTPUT_W=1536,OUTPUT_H=768,FACE_SIZE=384; const pageStyleElement = document.createElement("style"); pageStyleElement.textContent = `html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;}canvas#mainCanvas{display:block;width:min(100vw,calc(100vh * ${OUTPUT_W/OUTPUT_H}));height:min(100vh,calc(100vw * ${OUTPUT_H/OUTPUT_W}));}`; document.head.appendChild(pageStyleElement); const ANIMATION_SPEED = 5.0; const MAX_BALLS = 24; const CUBE_HALF_SIZE = 1.0; const BALL_RADIUS = 0.35; const BALL_REFLECTIVITY = 0.80; const EDGE_RADIUS = 0.007; const GRAVITY = -0.4; const FIXED_STEP = 1 / 60; const SOLVER_ITERATIONS = 8; const BALL_RESTITUTION = 0.95; const FLOOR_RESTITUTION = 0.52; const WALL_RESTITUTION = 0.34; const MIN_IMPACTS_BEFORE_SETTLE = 3; const SETTLE_SPEED = 0.09; const SETTLE_HOLD_SECONDS = 0.45; const MAX_DROP_SECONDS = 6.2; const NEXT_BALL_DELAY = 0.20; const FADE_IN_SECONDS = 1.5; const SHRED_HOLD_SECONDS = 1.5; const SHRED_SPEED = 0.04; const BLACK_SECONDS = 0.7; const VIEW_SCALE = 1.0; // Full cube face fills each LED panel. const ORTHOGRAPHIC_CAMERA_DISTANCE = 4.0; const TARGET_FRAME_RATE = 30; const MAX_FRAME_STEP_SECONDS = 0.05; let mirrorBallShader; let balls = []; let sequencePhase = "fadeIn"; let phaseElapsed = 0; let sceneAlpha = 0; let physicsAccumulator = 0; let settleElapsed = 0; let currentDropElapsed = 0; let sceneIsFull = false; const vertexShaderSource = ` precision highp float; attribute vec3 aPosition; attribute vec2 aTexCoord; varying vec2 vTexCoord; void main() { vTexCoord = aTexCoord; gl_Position = vec4(aPosition, 1.0); } `; const fragmentShaderSource = ` precision highp float; varying vec2 vTexCoord; uniform vec2 uResolution; uniform float uCellSize; uniform float uSceneAlpha; uniform float uBallCount; uniform float uTime; uniform vec4 uBalls[${MAX_BALLS}]; #define MAX_BALLS ${MAX_BALLS} #define NUM_WHITE_SPHERES 4 const float CUBE_HALF_SIZE = ${CUBE_HALF_SIZE.toFixed(6)}; const float BALL_RADIUS = ${BALL_RADIUS.toFixed(6)}; const float EDGE_RADIUS = ${EDGE_RADIUS.toFixed(6)}; const float BALL_REFLECTIVITY = ${BALL_REFLECTIVITY.toFixed(6)}; const float FAR_DISTANCE = 1000.0; bool insideView(vec2 p, vec2 vO){ return p.x >= vO.x && p.x < vO.x + uCellSize && p.y >= vO.y && p.y < vO.y + uCellSize; } float iSphere(vec3 ro, vec3 rd, vec3 c, float r){ vec3 oc = ro - c; float b = dot(oc, rd); float d = b*b - dot(oc, oc) + r*r; if(d < 0.0) return -1.0; float t = -b - sqrt(d); return t > 0.001 ? t : -1.0; } bool inCube(vec3 p){ float t = 0.005; return abs(p.x) <= CUBE_HALF_SIZE+t && abs(p.y) <= CUBE_HALF_SIZE+t && abs(p.z) <= CUBE_HALF_SIZE+t; } float iVisibleSphere(vec3 ro, vec3 rd, vec3 c, float r){ vec3 oc = ro - c; float b = dot(oc, rd); float d = b*b - dot(oc, oc) + r*r; if(d < 0.0) return FAR_DISTANCE; float s = sqrt(d); float t1 = -b - s, t2 = -b + s; if(t1 > 0.001 && inCube(ro + rd * t1)) return t1; if(t2 > 0.001 && inCube(ro + rd * t2)) return t2; return FAR_DISTANCE; } float iCapsule(vec3 ro, vec3 rd, vec3 a, vec3 b, float r){ vec3 ba = b-a, oa = ro-a; float baba=dot(ba,ba), rdba=dot(rd,ba), oaba=dot(oa,ba), rdoa=dot(rd,oa), oaoa=dot(oa,oa); float a_v=baba-rdba*rdba; float b_v=baba*rdoa-oaba*rdba; float c_v=baba*oaoa-oaba*oaba-r*r*baba; float h=b_v*b_v-a_v*c_v; if(h >= 0.0 && abs(a_v) > 1e-6){ float t = (-b_v - sqrt(h)) / a_v; float y = oaba + t * rdba; if(y > 0.0 && y < baba && t > 0.001) return t; } float d1 = iSphere(ro, rd, a, r); float d2 = iSphere(ro, rd, b, r); float res = FAR_DISTANCE; if(d1 > 0.001) res = d1; if(d2 > 0.001 && d2 < res) res = d2; return res; } float iEdges(vec3 ro, vec3 rd){ float h = CUBE_HALF_SIZE, d = FAR_DISTANCE; d=min(d, iCapsule(ro,rd,vec3(-h,-h,-h),vec3(-h,h,-h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(h,-h,-h),vec3(h,h,-h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,-h,h),vec3(-h,h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(h,-h,h),vec3(h,h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,-h,-h),vec3(h,-h,-h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,h,-h),vec3(h,h,-h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,-h,h),vec3(h,-h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,h,h),vec3(h,h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,-h,-h),vec3(-h,-h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(h,-h,-h),vec3(h,-h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(-h,h,-h),vec3(-h,h,h),EDGE_RADIUS)); d=min(d, iCapsule(ro,rd,vec3(h,h,-h),vec3(h,h,h),EDGE_RADIUS)); return d; } float iBalls(vec3 ro, vec3 rd, out vec3 hC, out float hH){ float res = FAR_DISTANCE; for(int i = 0; i < MAX_BALLS; i++){ if(float(i) < uBallCount){ float d = iVisibleSphere(ro, rd, uBalls[i].xyz, BALL_RADIUS); if(d < res){ res = d; hC = uBalls[i].xyz; hH = uBalls[i].w; } } } return res; } vec3 hsvRgb(vec3 c){ vec4 K = vec4(1., 2./3., 1./3., 3.); vec3 p = abs(fract(c.xxx + K.xyz) * 6. - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } vec3 maxSaturation(vec3 c){ float hi = max(c.r, max(c.g, c.b)); float lo = min(c.r, min(c.g, c.b)); float chroma = hi - lo; if(chroma < 0.00001) return c; return (c - vec3(lo)) * (hi / chroma); } vec3 bDiff(vec3 n, float h){ vec3 k = normalize(vec3(-.55, .88, .62)), f = normalize(vec3(.72, .28, -.58)); return hsvRgb(vec3(h, 1., 1.)) * (0.28 + max(dot(n, k), 0.0) * 0.62 + max(dot(n, f), 0.0) * 0.18); } vec3 bHigh(vec3 n, vec3 v){ vec3 l1 = normalize(vec3(-.55, .88, .62)), l2 = normalize(vec3(0.68, 0.46, 0.56)); float s1 = pow(max(dot(reflect(-l1, n), v), 0.0), 110.0); float s2 = pow(max(dot(reflect(-l2, n), v), 0.0), 180.0); return vec3(1., .98, .94) * s1 * 1.25 + vec3(.72, .88, 1.0) * s2 * 0.8; } vec3 traceL2(vec3 ro, vec3 rd){ vec3 hC; float hH; float bd = iBalls(ro, rd, hC, hH), ed = iEdges(ro, rd); if(ed < bd && ed < FAR_DISTANCE) return vec3(0.0); if(bd < FAR_DISTANCE){ vec3 n = normalize((ro + rd * bd) - hC); return bDiff(n, hH) + bHigh(n, -rd); } return vec3(0.0); } vec3 traceL1(vec3 ro, vec3 rd){ vec3 hC; float hH; float bd = iBalls(ro, rd, hC, hH), ed = iEdges(ro, rd); if(ed < bd && ed < FAR_DISTANCE) return vec3(0.0); if(bd < FAR_DISTANCE){ vec3 p = ro + rd * bd, n = normalize(p - hC); return mix(bDiff(n, hH), traceL2(p + n * 0.005, reflect(rd, n)), BALL_REFLECTIVITY) + bHigh(n, -rd); } return vec3(0.0); } void main(){ // Texture UV is top-origin in the supplied full-screen triangles. vec2 pPos = vTexCoord * uResolution; bool found = false; vec2 vO=vec2(0.0); vec3 camD=vec3(0.0),upD=vec3(0.0); // Directions and pixel origins match the LED Cube 2 template exactly. if(insideView(pPos,vec2(0.0,0.0))){ found=true;vO=vec2(0.0,0.0);camD=vec3(-1.0,0.0,0.0);upD=vec3(0.0,-1.0,0.0); }else if(insideView(pPos,vec2(384.0,0.0))){ found=true;vO=vec2(384.0,0.0);camD=vec3(0.0,0.0,1.0);upD=vec3(0.0,-1.0,0.0); }else if(insideView(pPos,vec2(768.0,0.0))){ found=true;vO=vec2(768.0,0.0);camD=vec3(1.0,0.0,0.0);upD=vec3(0.0,-1.0,0.0); }else if(insideView(pPos,vec2(1152.0,0.0))){ found=true;vO=vec2(1152.0,0.0);camD=vec3(0.0,0.0,-1.0);upD=vec3(0.0,-1.0,0.0); }else if(insideView(pPos,vec2(384.0,384.0))){ found=true;vO=vec2(384.0,384.0);camD=vec3(0.0,-1.0,0.0);upD=vec3(0.0,0.0,-1.0); } if(!found){ gl_FragColor = vec4(0.,0.,0.,1.); return; } vec2 uv = (pPos - vO) / uCellSize; vec2 sP = vec2(uv.x - 0.5, uv.y - 0.5) * 2.0 * ${VIEW_SCALE.toFixed(6)}; vec3 rd = -camD; vec3 rD = normalize(cross(upD, rd)); vec3 ro = camD * ${ORTHOGRAPHIC_CAMERA_DISTANCE.toFixed(6)} + rD * sP.x + upD * sP.y; // ★ 白い中空球体の計算 (スピード 1/2 = 10秒周期) vec3 whiteSpheresCol = vec3(0.0); float period = 10.0; for(int j = 0; j < NUM_WHITE_SPHERES; j++){ float offset = float(j) * (period / float(NUM_WHITE_SPHERES)); float age = mod(uTime + offset, period); float progress = age / period; float maxR = CUBE_HALF_SIZE * 1.732; float rOuter = progress * maxR; if(rOuter < 0.01) continue; float lifeAlpha = sin(progress * 3.1415926); vec3 oc = ro; float b = dot(oc, rd); float cOuter = dot(oc, oc) - rOuter * rOuter; float hOuter = b * b - cOuter; if(hOuter >= 0.0){ float tOuter = -b - sqrt(hOuter); if(tOuter > 0.001){ vec3 hitP = ro + rd * tOuter; vec3 absP = abs(hitP); float limit = CUBE_HALF_SIZE + 0.001; // 立方体境界によるカット if(absP.x <= limit && absP.y <= limit && absP.z <= limit){ vec3 norm = normalize(hitP); float rim = 1.0 - abs(dot(norm, rd)); // ★ 共通透明度計算式 float alpha = (pow(rim, 2.5) * 0.8 + 0.1) * lifeAlpha * 0.5; vec3 lightDir = normalize(vec3(0.3, 0.8, 0.5)); float diff = max(abs(dot(norm, lightDir)), 0.0) * 0.4 + 0.6; whiteSpheresCol += vec3(diff) * alpha; } } } } vec3 hC; float hH; float bd = iBalls(ro, rd, hC, hH), ed = iEdges(ro, rd); vec3 col = vec3(0.); if(bd < ed && bd < FAR_DISTANCE){ vec3 p = ro + rd * bd, n = normalize(p - hC); col = mix(bDiff(n, hH), traceL1(p + n * 0.005, reflect(rd, n)), BALL_REFLECTIVITY) + bHigh(n, -rd); col = pow(1.0 - exp(-col * 1.15), vec3(0.4545)); col = maxSaturation(col); // 彩度100%、色相と最大輝度を保持 // カラー球の色の強さを100%に設定 col *= 1.0; } else if(ed < FAR_DISTANCE) col = vec3(0.0); // 白い球体を加算 col += whiteSpheresCol; if(bd < ed && bd < FAR_DISTANCE){ col = maxSaturation(col); float peak = max(col.r, max(col.g, col.b)); if(peak > 0.00001){ // 中間色成分を締めて、原色寄りの強い発色にする。 col = pow(max(col / peak, vec3(0.0)), vec3(1.6)) * min(peak, 1.0); } } gl_FragColor = vec4(col * uSceneAlpha, 1.0); } `; function setup() { pixelDensity(1); const mainCanvas = createCanvas(OUTPUT_W, OUTPUT_H, WEBGL); mainCanvas.id("mainCanvas"); frameRate(TARGET_FRAME_RATE); noStroke(); mirrorBallShader = createShader(vertexShaderSource, fragmentShaderSource); resetScene(); } function draw() { const elapsed = Math.min(Math.max(deltaTime * 0.001, 0), MAX_FRAME_STEP_SECONDS) * ANIMATION_SPEED; updateSequence(elapsed); const packed = new Array(MAX_BALLS * 4).fill(0); for (let i = 0; i < balls.length; i++) { const o = i * 4; packed[o] = balls[i].x; packed[o + 1] = balls[i].y; packed[o + 2] = balls[i].z; packed[o + 3] = balls[i].hue; } background(0); shader(mirrorBallShader); mirrorBallShader.setUniform("uResolution", [width, height]); mirrorBallShader.setUniform("uCellSize", FACE_SIZE); mirrorBallShader.setUniform("uSceneAlpha", sceneAlpha); mirrorBallShader.setUniform("uBallCount", balls.length); mirrorBallShader.setUniform("uBalls", packed); mirrorBallShader.setUniform("uTime", millis() * 0.001); beginShape(TRIANGLES); vertex(-1, -1, 0, 0, 1); vertex( 1, -1, 0, 1, 1); vertex( 1, 1, 0, 1, 0); vertex(-1, -1, 0, 0, 1); vertex( 1, 1, 0, 1, 0); vertex(-1, 1, 0, 0, 0); endShape(); } function updateSequence(elapsed) { phaseElapsed += elapsed; if (sequencePhase === "fadeIn") { sceneAlpha = smoothCurve(Math.min(phaseElapsed / FADE_IN_SECONDS, 1)); if (phaseElapsed >= FADE_IN_SECONDS) { sceneAlpha = 1; spawnNextBall(); } } else if (sequencePhase === "dropping") { physicsAccumulator += elapsed; while (physicsAccumulator >= FIXED_STEP && sequencePhase === "dropping") { simulatePhysics(FIXED_STEP); physicsAccumulator -= FIXED_STEP; } } else if (sequencePhase === "pause") { if (sceneIsFull) { if (phaseElapsed >= SHRED_HOLD_SECONDS) { sequencePhase = "shredding"; phaseElapsed = 0; } } else { if (phaseElapsed >= NEXT_BALL_DELAY) { spawnNextBall(); } } } else if (sequencePhase === "shredding") { let allHidden = true; for (const b of balls) { b.y -= SHRED_SPEED * elapsed; if (b.y > -(CUBE_HALF_SIZE + BALL_RADIUS + 0.01)) allHidden = false; } if (allHidden) { sceneAlpha = 0; clearCycleState(); sequencePhase = "black"; phaseElapsed = 0; } } else if (sequencePhase === "black") { if (phaseElapsed >= BLACK_SECONDS) { sceneIsFull = false; sequencePhase = "fadeIn"; phaseElapsed = 0; } } } function clearCycleState() { balls.length = 0; sceneIsFull = false; physicsAccumulator = 0; settleElapsed = 0; currentDropElapsed = 0; } function spawnNextBall() { const lim = CUBE_HALF_SIZE - BALL_RADIUS - 0.032; balls.push({ x: random(-lim, lim), y: CUBE_HALF_SIZE + BALL_RADIUS + 0.001, z: random(-lim, lim), vx: random(-0.028, 0.028), vy: 0, vz: random(-0.028, 0.028), hue: random(), entered: false, impactCount: 0 }); sequencePhase = "dropping"; phaseElapsed = 0; physicsAccumulator = 0; settleElapsed = 0; currentDropElapsed = 0; } function simulatePhysics(step) { currentDropElapsed += step; for (const b of balls) { b.vy += GRAVITY * step; b.x += b.vx * step; b.y += b.vy * step; b.z += b.vz * step; b.vx *= 0.9995; b.vy *= 0.9995; b.vz *= 0.9995; if (!b.entered && b.y <= CUBE_HALF_SIZE - BALL_RADIUS) b.entered = true; } for (let it = 0; it < SOLVER_ITERATIONS; it++) { for (const b of balls) solveBoundary(b); for (let i = 0; i < balls.length; i++) for (let j = i + 1; j < balls.length; j++) solveCollision(balls[i], balls[j]); } let maxS = 0; for (const b of balls) { solveBoundary(b); maxS = Math.max(maxS, Math.sqrt(b.vx * b.vx + b.vy * b.vy + b.vz * b.vz)); } const nb = balls[balls.length - 1], ns = Math.sqrt(nb.vx * nb.vx + nb.vy * nb.vy + nb.vz * nb.vz); if (nb.entered && nb.impactCount >= MIN_IMPACTS_BEFORE_SETTLE && ns < SETTLE_SPEED && maxS < 0.18) settleElapsed += step; else settleElapsed = Math.max(0, settleElapsed - step * 0.4); if (nb.entered && (settleElapsed >= SETTLE_HOLD_SECONDS || currentDropElapsed >= MAX_DROP_SECONDS)) finishDrop(); else if (!nb.entered && currentDropElapsed >= MAX_DROP_SECONDS) { sceneIsFull = true; finishDrop(); } } function solveBoundary(b) { const lim = CUBE_HALF_SIZE - BALL_RADIUS; if (b.x < -lim) { b.x = -lim; if (b.vx < 0) b.vx = -b.vx * WALL_RESTITUTION; } if (b.x > lim) { b.x = lim; if (b.vx > 0) b.vx = -b.vx * WALL_RESTITUTION; } if (b.z < -lim) { b.z = -lim; if (b.vz < 0) b.vz = -b.vz * WALL_RESTITUTION; } if (b.z > lim) { b.z = lim; if (b.vz > 0) b.vz = -b.vz * WALL_RESTITUTION; } if (b.y < -lim) { b.y = -lim; if (b.vy < 0) { if (b.vy < -0.18) b.impactCount++; b.vy = -b.vy * FLOOR_RESTITUTION; } if (Math.abs(b.vy) < 0.068) b.vy = 0; b.vx *= 0.92; b.vz *= 0.92; } if (b.entered && b.y > lim) { b.y = lim; if (b.vy > 0) b.vy = -b.vy * WALL_RESTITUTION; } } function solveCollision(b1, b2) { let dx = b2.x - b1.x, dy = b2.y - b1.y, dz = b2.z - b1.z, d2 = dx * dx + dy * dy + dz * dz, minD = BALL_RADIUS * 2; if (d2 >= minD * minD) return; let d = Math.sqrt(d2) || 0.0001, nx = dx / d, ny = dy / d, nz = dz / d, corr = (minD - d) * 0.505; b1.x -= nx * corr; b1.y -= ny * corr; b1.z -= nz * corr; b2.x += nx * corr; b2.y += ny * corr; b2.z += nz * corr; let rvx = b2.vx - b1.vx, rvy = b2.vy - b1.vy, rvz = b2.vz - b1.vz, nv = rvx * nx + rvy * ny + rvz * nz; if (nv < 0) { if (nv < -0.18) { b1.impactCount++; b2.impactCount++; } let impulse = -(1 + BALL_RESTITUTION) * nv * 0.5; b1.vx -= nx * impulse; b1.vy -= ny * impulse; b1.vz -= nz * impulse; b2.vx += nx * impulse; b2.vy += ny * impulse; b2.vz += nz * impulse; } } function finishDrop() { for (const b of balls) { b.vx = 0; b.vy = 0; b.vz = 0; } let top = -Infinity; for (const b of balls) top = Math.max(top, b.y + BALL_RADIUS); if (balls.length >= MAX_BALLS || (balls.length >= 34 && top >= CUBE_HALF_SIZE - 0.032)) sceneIsFull = true; sequencePhase = "pause"; phaseElapsed = 0; } function resetScene() { clearCycleState(); sequencePhase = "fadeIn"; phaseElapsed = 0; sceneAlpha = 0; } function smoothCurve(v) { return v * v * (3 - 2 * v); } // Fixed output resolution; preview scaling is handled by CSS. function keyPressed(){if(key==='s'||key==='S')saveCanvas('led-cube-2-balls','png');}