// Title: LED Cubes — Three Works in One Sketch // p5.js JavaScript. Paste this entire file into the JavaScript editor. // LED1: ?debug=false&cubeType=type1 (2000 x 1440) // LED2: ?debug=false&cubeType=type2 (1536 x 768) // LED3: ?debug=false&cubeType=type3 (672 x 480) // If the URL already contains ?, append &cubeType=typeN instead. // Parameters must reach the page running this sketch (including an iframe URL). // No cubeType: LED1. Unknown cubeType: explicit error. // Only the selected factory runs; names and state are local to each work. // debug is accepted in the URL; these original works do not add a debug UI. p5.disableFriendlyErrors = true; let ledUnifiedArtwork; function ledReadCubeType() { let selected = new URLSearchParams(window.location.search).get('cubeType'); if (selected === null) { // Read an embedding page only when browser same-origin rules permit it. try { if (window.parent !== window) { selected = new URLSearchParams(window.parent.location.search).get('cubeType'); } } catch (ledParentAccessError) {} } if (selected === null) return 'type1'; if (!['type1', 'type2', 'type3'].includes(selected)) { throw new Error('cubeType must be type1, type2 or type3; received: ' + selected); } return selected; } function setup() { const selected = ledReadCubeType(); if (selected === 'type1') ledUnifiedArtwork = ledCreateType1(); else if (selected === 'type2') ledUnifiedArtwork = ledCreateType2(); else ledUnifiedArtwork = ledCreateType3(); ledUnifiedArtwork.setup(); } function draw() { if (ledUnifiedArtwork) ledUnifiedArtwork.draw(); } function keyPressed() { if (ledUnifiedArtwork) return ledUnifiedArtwork.keyPressed(); } function ledCreateType1() { // Title: LED Cube 1 — Five Synchronized PLATEAU Views // 2000 x 1440: A WEST right crop / B SOUTH / C EAST / D NORTH left crop / E BOTTOM // Four colored horizontal city layers are spaced by one third of the cube height. // Three base planes remain inside; entering roof tips may appear before the next base plane. // Building heights are doubled above each building's ground, with ground levels aligned. // Source: MLIT Project PLATEAU, Setagaya 2023; extracted and converted. // https://www.mlit.go.jp/plateau/ (attribution only; no network requests) p5.disableFriendlyErrors=true; const OUTPUT_W=2000,OUTPUT_H=1440,FACE_PIXELS=720; const TEST_CUBE_HALF=180; // Camera coordinates use the original p5.js scene: negative Y is up. const LED_VIEWS=[ {x:0,y:0,w:200,h:720,cropX:520,eye:[-1080,0,0],up:[0,1,0],view:[-1,0,0]}, {x:200,y:0,w:720,h:720,cropX:0,eye:[0,0,1080],up:[0,1,0],view:[0,0,1]}, {x:920,y:0,w:720,h:720,cropX:0,eye:[1080,0,0],up:[0,1,0],view:[1,0,0]}, {x:1640,y:0,w:360,h:720,cropX:0,eye:[0,0,-1080],up:[0,1,0],view:[0,0,-1]}, {x:200,y:720,w:720,h:720,cropX:0,mirrorX:true,mirrorY:true,eye:[0,1080,0],up:[0,0,1],view:[0,1,0]} ]; const LAYER_INTERVAL_SECONDS=12; const TEST_LOOP_SECONDS=LAYER_INTERVAL_SECONDS*4; // 1周48秒 const CYCLE_SECONDS=TEST_LOOP_SECONDS; // 1周（4枚）で切り替え const FADE_SECONDS=3.0; // フェードにかかる秒数 const BOTTOM_ZOOM=Math.sqrt(2); const TOP_ZOOM=3; const ROTATION_SECONDS=TEST_LOOP_SECONDS; let cityMinY=0,cityMaxY=0; // 初期値（実行時にランダムな虹色で上書きされます） const CITY_LAYERS=[ {color:[1,0,0],opacity:0.85}, {color:[0,1,0],opacity:0.85}, {color:[0,0,1],opacity:0.85}, {color:[1,1,0],opacity:0.85} ]; let cycleStartMillis=0,currentDirection=0,layerShader,sphereShader,cityModel; let directionOrder = []; // 発生方向の順番を管理する配列 // HSVをRGBに変換する関数 function hsv2rgb(h, s, v) { let r, g, b, i = Math.floor(h * 6), f = h * 6 - i; let p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: r = v, g = t, b = p; break; case 1: r = q, g = v, b = p; break; case 2: r = p, g = v, b = t; break; case 3: r = p, g = q, b = v; break; case 4: r = t, g = p, b = v; break; case 5: r = v, g = p, b = q; break; } return [r, g, b]; } // 4層の色をランダムな高彩度の虹色に再設定する関数 function randomizeColors() { let baseH = Math.random(); // 基準となる色相をランダムに決定 for (let i = 0; i < 4; i++) { CITY_LAYERS[i].color = hsv2rgb((baseH + i * 0.25) % 1.0, 1.0, 1.0); } } // 4つの方向（0,1,2,3）をシャッフルして順番に取り出す関数 function getNextDirection() { if (directionOrder.length === 0) { directionOrder = [0, 1, 2, 3]; for (let i = directionOrder.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [directionOrder[i], directionOrder[j]] = [directionOrder[j], directionOrder[i]]; } } return directionOrder.pop(); } // 建築物レイヤー用シェーダー const vs=` precision highp float; attribute vec3 aPosition; attribute vec3 aNormal; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; uniform float uLayerY; uniform float uZoom; uniform float uAngle; uniform float uDirection; varying vec3 vNormal; varying vec3 vWorldPos; void main(){ vec3 p=aPosition*uZoom; p.y = p.y * 1.0; float c=cos(uAngle),s=sin(uAngle); vec3 pos=vec3(c*p.x-s*p.z,p.y+uLayerY,s*p.x+c*p.z); vec3 norm=vec3(c*aNormal.x-s*aNormal.z,aNormal.y,s*aNormal.x+c*aNormal.z); vec3 fPos=pos; vec3 fNorm=norm; if (uDirection>0.5 && uDirection<1.5) { fPos=vec3(pos.x,pos.z,-pos.y); fNorm=vec3(norm.x,norm.z,-norm.y); } else if (uDirection>1.5 && uDirection<2.5) { fPos=vec3(pos.y,-pos.x,pos.z); fNorm=vec3(norm.y,-norm.x,norm.z); } else if (uDirection>2.5) { fPos=vec3(-pos.y,pos.x,pos.z); fNorm=vec3(-norm.y,norm.x,norm.z); } vWorldPos=fPos; vNormal=fNorm; gl_Position=uProjectionMatrix*uModelViewMatrix*vec4(fPos,1.0); }`; const fs=` precision highp float; varying vec3 vNormal; varying vec3 vWorldPos; uniform vec3 uColor; uniform float uOpacity; uniform float uCubeHalf; uniform float uGlobalAlpha; void main(){ if(any(greaterThan(abs(vWorldPos),vec3(uCubeHalf))))discard; vec3 lightDir=normalize(vec3(0.4,-0.8,0.45)); float diff=abs(dot(normalize(vNormal),lightDir)); float bright = 0.2 + 0.8 * pow(diff, 2.0); gl_FragColor=vec4(uColor*bright*uGlobalAlpha,uOpacity*uGlobalAlpha); }`; // ★ 中空球体用シェーダー（面を超えた部分をdiscardでカット） const sphereVs=` precision highp float; attribute vec3 aPosition; attribute vec3 aNormal; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; uniform float uRadius; varying vec3 vNormal; varying vec3 vWorldPos; void main(){ vec3 pos = aPosition * uRadius; vWorldPos = pos; vNormal = aNormal; gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos, 1.0); }`; const sphereFs=` precision highp float; varying vec3 vNormal; varying vec3 vWorldPos; uniform float uCubeHalf; uniform float uAlpha; uniform vec3 uViewDirection; void main(){ if(any(greaterThan(abs(vWorldPos), vec3(uCubeHalf)))) discard; vec3 norm = normalize(vNormal); // View-aligned illumination keeps sphere brightness symmetric on every face. vec3 viewDir = normalize(uViewDirection); float facing = clamp(abs(dot(norm, viewDir)), 0.0, 1.0); float diff = facing * 0.4 + 0.6; float rim = 1.0 - facing; // ★ 共通計算式：(pow(rim, 2.5) * 0.8 + 0.1) に透明度係数 0.5 を掛け算 float alpha = (pow(rim, 2.5) * 0.8 + 0.1) * uAlpha * 0.5; gl_FragColor = vec4(vec3(diff) * alpha, alpha); }`; function setup(){ pixelDensity(1); const ledCanvas=createCanvas(OUTPUT_W,OUTPUT_H,WEBGL); ledCanvas.id('mainCanvas'); frameRate(30); const css=document.createElement('style'); css.textContent=`html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;display:flex;align-items:flex-start;justify-content:flex-start;}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(css); layerShader=createShader(vs,fs); sphereShader=createShader(sphereVs,sphereFs); // 球体用シェーダー作成 buildCityModel(); for(const p of CITY_VERTICES){cityMinY=Math.min(cityMinY,p[1]);cityMaxY=Math.max(cityMaxY,p[1]);} randomizeColors(); cycleStartMillis=millis(); currentDirection = getNextDirection(); } function draw(){ const gl=drawingContext; gl.disable(gl.SCISSOR_TEST); gl.viewport(0,0,OUTPUT_W,OUTPUT_H); gl.depthMask(true); background(0); let elapsed=(millis()-cycleStartMillis)*0.001; if(elapsed >= CYCLE_SECONDS) { const cycles = Math.floor(elapsed / CYCLE_SECONDS); cycleStartMillis += cycles * CYCLE_SECONDS * 1000; elapsed -= cycles * CYCLE_SECONDS; currentDirection = getNextDirection(); randomizeColors(); } let fadeAlpha = 1.0; if (elapsed < FADE_SECONDS) { fadeAlpha = elapsed / FADE_SECONDS; } else if (elapsed > CYCLE_SECONDS - FADE_SECONDS) { fadeAlpha = (CYCLE_SECONDS - elapsed) / FADE_SECONDS; } prepareLEDFrame(elapsed,fadeAlpha); // Advance animation only once; every face receives the same time and colors. for(const ledView of LED_VIEWS){ const viewportY=OUTPUT_H-ledView.y-ledView.h; gl.enable(gl.SCISSOR_TEST); gl.scissor(ledView.x,viewportY,ledView.w,ledView.h); gl.depthMask(true); gl.clear(gl.DEPTH_BUFFER_BIT); push(); const h=TEST_CUBE_HALF; const left=h*(2*ledView.cropX/FACE_PIXELS-1); const right=h*(2*(ledView.cropX+ledView.w)/FACE_PIXELS-1); camera(...ledView.eye,0,0,0,...ledView.up); // Apply the requested horizontal and vertical flips only to the bottom face. ortho(ledView.mirrorX?right:left,ledView.mirrorX?left:right,ledView.mirrorY?h:-h,ledView.mirrorY?-h:h,1,2160); gl.viewport(ledView.x,viewportY,ledView.w,ledView.h); drawLEDScene(elapsed,fadeAlpha,ledView.view); pop(); } gl.disable(gl.SCISSOR_TEST); gl.viewport(0,0,OUTPUT_W,OUTPUT_H); gl.depthMask(true); } // Cache identical animation state once for all five views. const frameLayers=Array.from({length:8},()=>({y:0,zoom:1,index:0})); const frameSpheres=Array.from({length:4},()=>({radius:0,alpha:0})); let frameLayerCount=0,frameAngle=0; function prepareLEDFrame(elapsed,globalAlpha){ const spacing=2*TEST_CUBE_HALF/3; const phase=(elapsed/LAYER_INTERVAL_SECONDS)%4; frameAngle=TWO_PI*((elapsed%ROTATION_SECONDS)/ROTATION_SECONDS); frameLayerCount=0; for(let i=0;i<4;i++){ const slot=((phase-i)%4+4)%4; for(let pass=0;pass<2;pass++){ const continuousSlot=slot-pass*4; const layerY=TEST_CUBE_HALF-continuousSlot*spacing; const progress=Math.max(0,Math.min(1,continuousSlot/3)); const zoom=BOTTOM_ZOOM*Math.pow(TOP_ZOOM/BOTTOM_ZOOM,progress); if(layerY+cityMinY*zoom>=TEST_CUBE_HALF || layerY+cityMaxY*zoom<=-TEST_CUBE_HALF)continue; const item=frameLayers[frameLayerCount++]; item.y=layerY;item.zoom=zoom;item.index=i; } } for(let i=0;i<4;i++){ const sphereAge=(elapsed%2.5)+i*2.5; const progress=sphereAge/10.0; let alpha=1.0; if(progress<0.15)alpha=progress/0.15; else if(progress>0.85)alpha=(1.0-progress)/0.15; frameSpheres[i].radius=progress*(TEST_CUBE_HALF*1.75); frameSpheres[i].alpha=alpha*globalAlpha; } } function drawLEDScene(elapsed,fadeAlpha,viewDirection){ const gl=drawingContext; gl.enable(gl.DEPTH_TEST); gl.depthMask(true); push();fill(255);noStroke();blendMode(ADD);shader(layerShader); layerShader.setUniform('uCubeHalf',TEST_CUBE_HALF); layerShader.setUniform('uAngle',frameAngle); layerShader.setUniform('uDirection',currentDirection); layerShader.setUniform('uGlobalAlpha',fadeAlpha); for(let i=0;i= 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)); // カラー球の色の強さ100%、彩度100% col = maxSaturation(col); } 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); packed.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", resolutionUniform); 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');} return { setup, draw, keyPressed }; } function ledCreateType3() { // Title: LED Cube 3 — Four-Face Hollow & Transparent Spheres with Central White Expanding Spheres p5.disableFriendlyErrors = true; const OUTPUT_W = 672; const OUTPUT_H = 480; const TARGET_FRAME_RATE = 30; 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:flex-start;justify-content:flex-start;}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); let projectionShader; const resolutionUniform = [OUTPUT_W, OUTPUT_H]; 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: SOUTH 288 x 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: WEST 192 x 288, uncompressed crop 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: EAST 192 x 288, uncompressed crop 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: BOTTOM 288 x 192, uncompressed crop 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); 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; } } 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 { 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", resolutionUniform); 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"); } } return { setup, draw, keyPressed }; }

なんこたまがぁ？にこっ！