// 全体で60秒（30fps換算で1800フレーム）のループ const LOOP_DURATION = 60 * 30; let particles = []; let lastProgress = 0; let debugMode = false; // trueにすると各CUBEのLEDパネルガイド枠と中心点が表示されます // 各CUBEの設定（サイズ、中心座標） const CANVAS_SIZES = { LED_CUBE1: { width: 2000, height: 1440, centerX: 560, centerY: 360 }, LED_CUBE2: { width: 1536, height: 768, centerX: 576, centerY: 192 }, LED_CUBE3: { width: 672, height: 480, centerX: 336, centerY: 144 }, }; // ステージのベースサイズ（キャンバスサイズ完全固定） const BASE_W = 2000; const BASE_H = 1440; let currentSize = ""; let currentScale = 1.0; // ホワイトホールが移動すべき「3D空間上の正確な中心座標」 let targetX = 0; let targetY = 0; // ホワイトホール表面テクスチャ用イメージ let sphereTexture; function preload() { const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]) { currentSize = sizeParam; } } function setup() { colorMode(HSB, 360, 100, 100, 100); angleMode(DEGREES); frameRate(30); pixelDensity(1); createCanvas(BASE_W, BASE_H, WEBGL); updatePositionParameters(); } function draw() { let progress = (frameCount % LOOP_DURATION) / LOOP_DURATION; // 背景は漆黒に固定 background(0, 0, 0); if (progress < lastProgress) { particles = []; } lastProgress = progress; handleOrthoCamera(); push(); translate(targetX, targetY, 0); scale(currentScale); // ライティング制御 if (progress > 0.85) { ambientLight(0, 0, 85); pointLight(0, 0, 100, 0, -600, 0); } else if (progress >= 0.60 && progress < 0.75) { ambientLight(0, 0, 75); pointLight(200, 15, 100, 0, 400, 0); pointLight(200, 15, 100, 0, -400, 0); } else { ambientLight(0, 0, 70); pointLight(200, 5, 95, 0, 0, 0); } // パーティクル生成 if (progress < 0.75) { let spawnCount = (progress >= 0.60) ? 10 : 4; for (let i = 0; i < spawnCount; i++) { particles.push(new Particle(progress)); } } if (particles.length > 6000) { particles.splice(0, particles.length - 6000); } // ホワイトホールの描画 if (progress < 0.75 || progress >= 0.85) { drawPerfectSwirlingHole(progress); } // パーティクルの更新と描画 for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(progress); particles[i].display(progress); if (particles[i].isDead() && progress < 0.99) { particles.splice(i, 1); } } pop(); if (debugMode && currentSize && CANVAS_SIZES[currentSize]) { drawDebugGuide(); } } function getBounceY(progress) { if (progress >= 0.93) { let bt = map(progress, 0.93, 1.0, 0, 1, true); return -abs(sin(bt * 180)) * 150; } return 0; } // 神秘的な球体ホワイトホール描画関数 function drawPerfectSwirlingHole(progress) { let detail = 30; let t = frameCount * 2.5; let baseRadius = 200; let sunScaleFactor = 0.4; let bounceY = getBounceY(progress); let scaleX = 1.0; let scaleY = 1.0; let scaleZ = 1.0; if (progress >= 0.52 && progress < 0.60) { let growth = map(progress, 0.52, 0.60, 0, 1, true); let easeGrowth = growth * growth * (3 - 2 * growth); sunScaleFactor = lerp(0.4, 1.0, easeGrowth); } if (progress >= 0.60 && progress < 0.75) { let shrinkProgress = map(progress, 0.60, 0.745, 0, 1, true); let shrinkFactor = pow(1.0 - shrinkProgress, 2.0); baseRadius = baseRadius * shrinkFactor; sunScaleFactor = 1.0; if (baseRadius < 4) baseRadius = 4; } else if (progress >= 0.85) { let returnProgress = map(progress, 0.85, 0.93, 0, 1, true); baseRadius = lerp(1, 200, pow(returnProgress, 2.0)); sunScaleFactor = lerp(0.1, 0.4, returnProgress); if (progress >= 0.93) { let bt = map(progress, 0.93, 1.0, 0, 1, true); if (bt < 0.15) { scaleY = map(bt, 0, 0.15, 1.0, 0.65); scaleX = scaleZ = map(bt, 0, 0.15, 1.0, 1.25); } else if (bt < 0.50) { scaleY = map(bt, 0.15, 0.50, 0.65, 1.4); scaleX = scaleZ = map(bt, 0.15, 0.50, 1.25, 0.8); } else if (bt < 0.85) { scaleY = map(bt, 0.50, 0.85, 1.4, 0.75); scaleX = scaleZ = map(bt, 0.50, 0.85, 0.8, 1.18); } else { scaleY = map(bt, 0.85, 1.0, 0.75, 1.0); scaleX = scaleZ = map(bt, 0.85, 1.0, 1.18, 1.0); } } } let currentSunRadius = baseRadius * sunScaleFactor; // --- B. 中央コア (CUBE固有の色) --- push(); translate(0, bounceY, 0); scale(scaleX, scaleY, scaleZ); rotateY(frameCount * 3.5); rotateZ(frameCount * 1.2); noStroke(); for (let i = 0; i < detail; i++) { let lat1 = map(i, 0, detail, -90, 90); let lat2 = map(i + 1, 0, detail, -90, 90); let edgeAlphaFactor = sin(map(i, 0, detail, 0, 180)); beginShape(TRIANGLE_STRIP); for (let j = 0; j <= detail; j++) { let lon = map(j, 0, detail, 0, 360); let sunTwist = sin(lon * 3 + t) * 0.5 + cos(lat1 * 2 - t * 0.4) * 0.4; let nX = cos(lon) * cos(lat1); let nY = sin(lat1); let nZ = sin(lon) * cos(lat1); let sunNoise = noise(nX * 1.5 + sunTwist, nY * 1.5, nZ * 1.5 - t * 0.05); let pulse = sunNoise * (currentSunRadius * 0.3); let r1 = currentSunRadius + pulse; let x1 = r1 * cos(lon) * cos(lat1); let y1 = r1 * sin(lat1); let z1 = r1 * sin(lon) * cos(lat1); let x2 = r1 * cos(lon) * cos(lat2); let y2 = r1 * sin(lat2); let z2 = r1 * sin(lon) * cos(lat2); let sHue = 0; let sSat = 80; let sBright = 100; const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam === "LED_CUBE1") { sHue = 240; // 青 } else if (sizeParam === "LED_CUBE2") { sHue = 180; // 空色 } else if (sizeParam === "LED_CUBE3") { sHue = 270; // 青紫 } else { sSat = 0; // 未指定時は白 } let baseAlpha = map(j, 0, detail, 25, 60) * edgeAlphaFactor; fill(sHue, sSat, sBright, baseAlpha); vertex(x1, y1, z1); vertex(x2, y2, z2); } endShape(); } pop(); // --- C. 外殻モヤ --- if (baseRadius > 4) { push(); translate(0, bounceY, 0); scale(scaleX, scaleY, scaleZ); rotateY(-frameCount * 1.5); noStroke(); if (sphereTexture) { texture(sphereTexture); textureMode(NORMAL); } else { fill(0, 0, 100, 30); } let uStart = map(progress, 0, 1, 0, 1); for (let i = 0; i < detail; i++) { let lat1 = map(i, 0, detail, -90, 90); let lat2 = map(i + 1, 0, detail, -90, 90); let edgeAlphaFactor = sin(map(i, 0, detail, 0, 180)); beginShape(TRIANGLE_STRIP); for (let j = 0; j <= detail; j++) { let lon = map(j, 0, detail, 0, 360); let x1 = baseRadius * cos(lon) * cos(lat1); let y1 = baseRadius * sin(lat1); let z1 = baseRadius * sin(lon) * cos(lat1); let x2 = baseRadius * cos(lon) * cos(lat2); let y2 = baseRadius * sin(lat2); let z2 = baseRadius * sin(lon) * cos(lat2); let nX = cos(lon) * cos(lat1); let nY = sin(lat1); let nZ = sin(lon) * cos(lat1); let twist = sin(lon * 2 + t) * 0.4; let noiseVal = noise(nX * 1.8 + twist, nY * 1.8, nZ * 1.8 + t * 0.03); let alpha = map(noiseVal, 0, 1, 15, 35) * edgeAlphaFactor; if (sphereTexture) { fill(0, 0, 100, alpha); vertex(x1, y1, z1, map(j, 0, detail, uStart, uStart + 1), map(i, 0, detail, 0, 1)); vertex(x2, y2, z2, map(j, 0, detail, uStart, uStart + 1), map(i+1, 0, detail, 0, 1)); } else { let cloudSat = map(noiseVal, 0, 1, 15, 0); let cloudHue = 240; const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam === "LED_CUBE2") { cloudHue = 180; } else if (sizeParam === "LED_CUBE3") { cloudHue = 270; } else if (!sizeParam) { cloudSat = 0; } fill(cloudHue, cloudSat, 100, alpha); vertex(x1, y1, z1); vertex(x2, y2, z2); } } endShape(); } pop(); } } function handleOrthoCamera() { ortho(-BASE_W / 2, BASE_W / 2, -BASE_H / 2, BASE_H / 2, -5000, 5000); camera(0, 0, 2000, 0, 0, 0, 0, 1, 0); } function drawDebugGuide() { let config = CANVAS_SIZES[currentSize]; push(); ortho(-BASE_W / 2, BASE_W / 2, -BASE_H / 2, BASE_H / 2, -1000, 1000); camera(0, 0, 500, 0, 0, 0, 0, 1, 0); resetMatrix(); this._renderer.clearDepth(); translate(-BASE_W / 2, -BASE_H / 2, 0); noFill(); stroke(18, 100, 100, 90); strokeWeight(3); rect(0, 0, config.width, config.height); stroke(130, 100, 100, 80); strokeWeight(1.5); line(config.centerX, 0, config.centerX, config.height); line(0, config.centerY, config.width, config.centerY); fill(130, 100, 100, 100); noStroke(); ellipse(config.centerX, config.centerY, 14, 14); pop(); } function updatePositionParameters() { if (currentSize && CANVAS_SIZES[currentSize]) { let config = CANVAS_SIZES[currentSize]; currentScale = config.width / BASE_W; targetX = config.centerX - (BASE_W / 2); targetY = config.centerY - (BASE_H / 2); } else { currentScale = 1.0; targetX = 0; targetY = 0; } } // パーティクラス class Particle { constructor(p) { // 🌟【修正】初期状態のランダムな傾きベクトル（±1度の幅を持たせるためのノイズ） this.tiltX = random(-1.0, 1.0); this.tiltY = random(-1.0, 1.0); this.size = random(3.2, 6.4); this.maxRange = 2000 * 0.95; this.orbitRadius = random(105, 160); this.orbitAngle = random(360); this.isWarpedRing = random(100) < 30; // 🌟【修正】初期配置時点で tiltX, tiltY を反映し、1本の単純なx軸の直線に重なるのを防ぐ this.pos = createVector( cos(this.orbitAngle) * this.orbitRadius, this.tiltY * 15 + random(-3, 3), sin(this.orbitAngle) * this.orbitRadius + this.tiltX * 15 ); if (this.isWarpedRing && p < 0.40) { this.pos.y += sin(this.orbitAngle) * this.orbitRadius * 0.4; } this.vel = createVector(0, 0, 0); this.jetDirection = random([1, -1]); this.phaseStep = 0; this.isJetParticle = random(100) < 45; this.shrinkStartPos = null; this.explosionEndPos = null; this.initSize = this.size; // CUBEごとの固有色設定 const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); this.cubeHue = 240; // デフォルト：青 this.hasCubeColor = true; if (sizeParam === "LED_CUBE1") { this.cubeHue = 240; // 青 } else if (sizeParam === "LED_CUBE2") { this.cubeHue = 180; // 空色 } else if (sizeParam === "LED_CUBE3") { this.cubeHue = 270; // 青紫 } else { this.hasCubeColor = false; // size指定がないときは白/グレー基調にする } // 吸い込み前はグレー基調 this.sat = 0; this.bright = random(40, 90); this.alpha = random(20, 75); } update(p) { if (p < 0.60) { this.orbitAngle += map(this.orbitRadius, 105, this.maxRange, 4.5, 0.5); // 🌟【修正】旋回計算時にも tilt による微細な軸補正をかけ、フラットな重なりを完全に排除 let targetX = cos(this.orbitAngle) * this.orbitRadius; let targetZ = sin(this.orbitAngle) * this.orbitRadius + (this.tiltX * (this.orbitRadius * 0.05)); if (this.orbitRadius < this.maxRange) { this.orbitRadius += 2.5; } else { this.orbitRadius = random(105, 140); } let targetY = this.tiltY * (this.orbitRadius * 0.05); if (this.isWarpedRing && p < 0.60) { let blendFactor = map(p, 0.40, 0.60, 1.0, 0.0, true); targetY += sin(this.orbitAngle) * this.orbitRadius * 0.2 * blendFactor; } else { targetY += random(-2, 2); } this.pos.x = lerp(this.pos.x, targetX, 0.2); this.pos.y = lerp(this.pos.y, targetY, 0.2); this.pos.z = lerp(this.pos.z, targetZ, 0.2); } else if (p < 0.75) { if (this.shrinkStartPos === null) { this.shrinkStartPos = this.pos.copy(); } let shrinkProgress = map(p, 0.60, 0.745, 0, 1, true); let tFactor = pow(shrinkProgress, 2.0); this.orbitAngle += map(shrinkProgress, 0, 1, 6, 35); let dynamicRadius = lerp(this.orbitRadius, 0, tFactor); if (this.isJetParticle) { let jetSpread = map(shrinkProgress, 0, 1, map(abs(this.shrinkStartPos.y), 0, 1600, 6, 80), 0.1); this.pos.x = cos(this.orbitAngle) * jetSpread; this.pos.z = sin(this.orbitAngle) * jetSpread; this.pos.y = lerp(this.shrinkStartPos.y + (this.jetDirection * frameCount * 4), 0, tFactor); } else { this.pos.x = cos(this.orbitAngle) * dynamicRadius; this.pos.z = sin(this.orbitAngle) * dynamicRadius; this.pos.y = lerp(this.shrinkStartPos.y, 0, tFactor); } this.size = lerp(this.initSize, 1.6, shrinkProgress); } else if (p < 0.85) { // 🌟【修正】爆発フェーズ移行時：確実にCUBE固有のカラー（彩度）を発色させる if (this.phaseStep === 0 || this.phaseStep === 1) { this.vel = p5.Vector.random3D().mult(random(50, 90)); this.size = random(3.0, 7.0); this.alpha = random(60, 95); this.bright = random(70, 100); // 固有サイズパラメータがある場合は鮮やかに発色、ない場合は純白爆発 this.sat = this.hasCubeColor ? random(75, 100) : 0; this.phaseStep = 2; } this.pos.add(this.vel); this.vel.mult(0.86); } else if (p < 0.93) { if (this.explosionEndPos === null) { this.explosionEndPos = this.pos.copy(); } let returnProgress = map(p, 0.85, 0.93, 0, 1, true); let tFactor = pow(returnProgress, 2.5); this.pos.x = lerp(this.explosionEndPos.x, 0, tFactor); this.pos.z = lerp(this.explosionEndPos.z, 0, tFactor); this.pos.y = lerp(this.explosionEndPos.y, 0, tFactor); this.size = lerp(this.size, 0.8, returnProgress); this.alpha = lerp(this.alpha, 95, returnProgress); this.bright = lerp(this.bright, 100, returnProgress); } else { let bounceY = getBounceY(p); this.pos.set(0, bounceY, 0); let fadeProgress = map(p, 0.93, 1.0, 0, 1, true); this.size = lerp(0.8, 0, fadeProgress); this.alpha = lerp(100, 0, fadeProgress); } } display(p) { if (this.alpha <= 0 || this.size <= 0) return; push(); noStroke(); // 🌟【修正】吸い込み前(p < 0.75)はスタイリッシュなグレー、爆発時(p >= 0.75)はCUBE固有の色相(this.cubeHue)を100%適用 let currentHue = (p >= 0.75) ? this.cubeHue : 0; fill(currentHue, this.sat, this.bright, this.alpha); push(); translate(this.pos.x, this.pos.y, this.pos.z); sphere(this.size); pop(); pop(); } isDead() { return this.alpha <= 0; } } function keyPressed() { if (key === "1") currentSize = "LED_CUBE1"; else if (key === "2") currentSize = "LED_CUBE2"; else if (key === "3") currentSize = "LED_CUBE3"; else if (key === "4") currentSize = ""; if (["1","2","3","4"].includes(key)) { updateURLAndParams(); } } function updateURLAndParams() { const url = new URL(window.location); if (currentSize) { url.searchParams.set("size", currentSize); } else { url.searchParams.delete("size"); } window.history.replaceState({}, "", url); updatePositionParameters(); console.log(`軌道傾斜・爆発固有色バグ修正完了: ${currentSize || "Full"}`); }

White Universe