// Title: LED Cube 3 — Four-Face Hollow & Transparent Spheres with Central White Expanding Spheres // Output: 672 x 480 pixels // Canvas origin: top-left of the screen (0, 0) // Layout: [WEST:192] [SOUTH:288] [EAST:192] // BOTTOM: 288 x 192, directly below SOUTH p5.disableFriendlyErrors = true; const OUTPUT_W = 672; const OUTPUT_H = 480; const TARGET_FRAME_RATE = 30; // キャンバスを画面左上（0, 0）に固定 const pageStyleElement = document.createElement("style"); pageStyleElement.textContent = ` html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } canvas#mainCanvas { display: block; position: fixed; top: 0; left: 0; margin: 0; width: min(100vw, calc(100vh * ${OUTPUT_W / OUTPUT_H})); height: min(100vh, calc(100vw * ${OUTPUT_H / OUTPUT_W})); } `; document.head.appendChild(pageStyleElement); let projectionShader; 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 uTime; #define NUM_SPHERES 24 #define NUM_WHITE_SPHERES 4 #define CUBE_HALF_SIZE 0.9 #define BIRTH_RAINBOW_SECONDS 48.0 vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } bool getSurfaceRay( vec2 pixel, out vec3 surfPos, out vec3 rayDir, out float depthMax ) { float x = pixel.x; float y = pixel.y; float S = CUBE_HALF_SIZE; // B：南面 (288x288) [x: 192~480, y: 0~288] if (x >= 192.0 && x < 480.0 && y >= 0.0 && y < 288.0) { float u = (x - 192.0) / 288.0; float v = y / 288.0; surfPos = vec3((u - 0.5) * 2.0 * S, (0.5 - v) * 2.0 * S, S); rayDir = vec3(0.0, 0.0, -1.0); depthMax = S; return true; } // A：西面 (192x288) [x: 0~192, y: 0~288] if (x >= 0.0 && x < 192.0 && y >= 0.0 && y < 288.0) { float u = (x + 96.0) / 288.0; float v = y / 288.0; surfPos = vec3(-S, (0.5 - v) * 2.0 * S, (u - 0.5) * 2.0 * S); rayDir = vec3(1.0, 0.0, 0.0); depthMax = S; return true; } // C：東面 (192x288) [x: 480~672, y: 0~288] if (x >= 480.0 && x < 672.0 && y >= 0.0 && y < 288.0) { float u = (x - 480.0) / 288.0; float v = y / 288.0; surfPos = vec3(S, (0.5 - v) * 2.0 * S, (0.5 - u) * 2.0 * S); rayDir = vec3(-1.0, 0.0, 0.0); depthMax = S; return true; } // E：下面 (288x192) [x: 192~480, y: 288~480] if (x >= 192.0 && x < 480.0 && y >= 288.0 && y < 480.0) { float u = (x - 192.0) / 288.0; float v = (y - 288.0) / 288.0; surfPos = vec3((u - 0.5) * 2.0 * S, -S, (0.5 - v) * 2.0 * S); rayDir = vec3(0.0, 1.0, 0.0); depthMax = S; return true; } return false; } vec3 getSphereDir(int i) { float fi = float(i); float phi = fi * 2.399963229728653; float y = 1.0 - (fi + 0.5) / float(NUM_SPHERES) * 2.0; float r = sqrt(max(0.0, 1.0 - y * y)); return normalize(vec3(cos(phi) * r, y, sin(phi) * r)); } float getSphereSpeed(int i) { return 0.18 + 0.12 * fract(sin(float(i) * 12.9898) * 43758.5453); } float getSphereRadius(int i) { float cubeSide = CUBE_HALF_SIZE * 9.0; float ratio = 0.09 + 0.15 * fract(sin(float(i) * 78.233) * 43758.5453); return (cubeSide * ratio) * 0.5; } vec3 shadeSphere(vec3 baseColor, vec3 normal, vec3 rayDir) { vec3 lightDir = normalize(vec3(0.4, 0.7, 0.6)); float diff = max(dot(normal, lightDir), 0.0); float ambient = 0.45; return baseColor * (ambient + diff * 0.95); } void main() { vec2 pixel = vec2(vTexCoord.x * uResolution.x, vTexCoord.y * uResolution.y); vec3 surfPos; vec3 rayDir; float depthMax; bool foundFace = getSurfaceRay(pixel, surfPos, rayDir, depthMax); if (!foundFace) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; } vec3 accumColor = vec3(0.0); // 1. 虹色ランダム球体の合成 for (int i = 0; i < NUM_SPHERES; i++) { vec3 dir = getSphereDir(i); float speed = getSphereSpeed(i); float radius = getSphereRadius(i); float birthOffset = float(i) * 1.35; float maxDist = CUBE_HALF_SIZE + radius * 1.5; float totalTravel = uTime * speed + birthOffset; float currentDist = mod(totalTravel, maxDist); vec3 spherePos = dir * currentDist; float pulse = 1.0 + 0.035 * sin(uTime * 2.5 + float(i)); float rOuter = radius * pulse; float rInner = rOuter * 0.82; vec3 oc = surfPos - spherePos; float distToCenter = length(oc); float alpha = 0.0; vec3 normal = vec3(0.0); if (distToCenter <= rOuter && distToCenter >= rInner) { float t = (distToCenter - rInner) / (rOuter - rInner); alpha = sin(t * 3.1415926) * 0.9; normal = normalize(oc); } else { float b = dot(oc, rayDir); float cOuter = dot(oc, oc) - rOuter * rOuter; float hOuter = b * b - cOuter; if (hOuter >= 0.0) { float tOuter = -b - sqrt(hOuter); if (tOuter >= 0.0 && tOuter <= depthMax) { vec3 hitP = surfPos + tOuter * rayDir; normal = normalize(hitP - spherePos); float rim = 1.0 - abs(dot(normal, rayDir)); alpha = pow(rim, 2.2) * 0.85 + 0.08; } } } if (alpha > 0.0) { float birthTime = uTime - (currentDist / speed); float birthHue = fract(birthTime / BIRTH_RAINBOW_SECONDS); vec3 baseColor = hsv2rgb(vec3(birthHue, 1.0, 1.0)); vec3 shaded = shadeSphere(baseColor, normal, rayDir); accumColor += shaded * alpha * 1.3; } } // 2. 立方体中央から順次発生・拡大する白い中空球体 vec3 whiteSpheresColor = 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; float shellThickness = 0.03; float rInner = max(0.0, rOuter - shellThickness); if (rOuter < 0.01) continue; float lifeAlpha = sin(progress * 3.1415926); // フェードイン/アウト float distToCenter = length(surfPos); // 面上の断面リング（球殻が直接立方体の壁面に触れている箇所） if (distToCenter <= rOuter && distToCenter >= rInner) { float t = (distToCenter - rInner) / max(0.001, rOuter - rInner); float ringAlpha = sin(t * 3.1415926) * 0.85 * lifeAlpha; vec3 norm = normalize(surfPos); vec3 lightDir = normalize(vec3(0.4, 0.7, 0.6)); float diff = max(dot(norm, lightDir), 0.0) * 0.5 + 0.5; whiteSpheresColor += vec3(diff) * ringAlpha; } else { // 内部の3D空間における球殻とのレイ交差 vec3 oc = surfPos; float b = dot(oc, rayDir); float cOuter = dot(oc, oc) - rOuter * rOuter; float hOuter = b * b - cOuter; if (hOuter >= 0.0) { float tOuter = -b - sqrt(hOuter); if (tOuter >= 0.0 && tOuter <= depthMax) { vec3 hitP = surfPos + tOuter * rayDir; // 立方体の面の境界を超えた部分をカット 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, rayDir)); float alpha = (pow(rim, 2.5) * 0.85 + 0.1) * lifeAlpha; vec3 lightDir = normalize(vec3(0.3, 0.8, 0.5)); float diff = max(abs(dot(norm, lightDir)), 0.0) * 0.4 + 0.6; whiteSpheresColor += vec3(diff) * alpha * 0.75; } } } } } accumColor += whiteSpheresColor; // 白飛び防止のトーンマッピング accumColor = vec3(1.0) - exp(-accumColor * 1.2); gl_FragColor = vec4(accumColor, 1.0); } `; function setup() { pixelDensity(1); const mainCanvas = createCanvas(OUTPUT_W, OUTPUT_H, WEBGL); mainCanvas.id("mainCanvas"); frameRate(TARGET_FRAME_RATE); noStroke(); projectionShader = createShader(vertexShaderSource, fragmentShaderSource); } function draw() { background(0); shader(projectionShader); projectionShader.setUniform("uResolution", [width, height]); projectionShader.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 keyPressed() { if (key === "s" || key === "S") { saveCanvas("led-cube-3-hollow-spheres", "png"); } }

LED Cube 3 — Four-Face Projection Test