//------------------------------------- // プロジェクトの基本設定ここから let debugMode = false; // NEORTにアップロード時はfalseにしてください // キャンバスサイズの設定 const CANVAS_SIZES = { LED_CUBE1: { width: 2000, height: 1440 }, LED_CUBE2: { width: 1536, height: 768 }, LED_CUBE3: { width: 672, height: 480 }, }; // LEDキューブ各面マッピング // frontFace を映像の主役にする const LED_CUBE_MAPPINGS = { LED_CUBE1: { netWidth: 2000, netHeight: 1440, // LEDキューブ1はB面が正面 frontFace: { name: "B", x: 200, y: 0, width: 720, height: 720, }, }, LED_CUBE2: { netWidth: 1536, netHeight: 768, // LEDキューブ2はB面が正面 frontFace: { name: "B", x: 384, y: 0, width: 384, height: 384, }, }, LED_CUBE3: { netWidth: 672, netHeight: 480, // LEDキューブ3はA面が正面 frontFace: { name: "A", x: 192, y: 0, width: 288, height: 288, }, }, }; // LEDキューブのレイアウト参考画像 let image1, image2, image3; // 現在のLEDキューブのサイズ // 今回はLED_CUBE1をデフォルトにする let currentSize = "LED_CUBE1"; // プロジェクトの基本設定ここまで //------------------------------------- /** * Title: Automatic Golden Ripples - Romantic Rose Gold Finale Edition * Description: * Fullscreen golden ripple shader with automatic random ripple generation, * intro single ripple, romantic rose-gold lines, * occasional pauses, final diagonal golden sweep, * B-face-oriented ripple generation, * and reload-randomized background palettes. */ // --- Configuration --- const MAX_RIPPLES = 70; let gridShader; let ripples = []; let nextAutoRippleFrame = 0; let pendingRipples = []; let startMillis = 0; function getElapsedSeconds() { return (millis() - startMillis) / 1000.0; } // リロードごとに 0 / 1 / 2 の背景パレットを選ぶ // 0: Rose Gold // 1: Hopeful Dawn // 2: Pearl Mauve let bgPaletteIndex = 0; const STORM_TIME = 55; // 秒 // Intro control let introRippleStarted = false; let introFinished = false; const INTRO_FIRST_RIPPLE_TIME = 2; // 2秒後に最初の1つ const INTRO_DURATION = 5.5; // ここを伸ばすと2つ目が遅くなる // Finale control const FINALE_START_TIME = 49; const FINALE_END_TIME = 59; // --- Shaders --- const vertShader = ` precision highp float; attribute vec3 aPosition; attribute vec2 aTexCoord; varying vec2 vTexCoord; void main() { vTexCoord = aTexCoord; gl_Position = vec4(aPosition, 1.0); } `; const fragShader = ` precision highp float; uniform float u_time; uniform vec2 u_resolution; // アニメーション中心。各LEDキューブの正面面中心を渡す uniform vec2 u_animCenter; // 正面面の中心から -1.0〜1.0 が正面面1枚分になる uniform float u_faceHalfSize; // 0: Rose Gold / 1: Midnight / 2: Pearl Mauve uniform float u_bgPaletteIndex; uniform vec4 u_ripplesA[${MAX_RIPPLES}]; // xy(pos), z unused, w(startTime) uniform vec4 u_ripplesB[${MAX_RIPPLES}]; // x(speed), y(freq), z(amp), w(initialRadius) varying vec2 vTexCoord; void main() { // ---------------------------------- // LEDキューブ展開図用の座標変換 // ---------------------------------- vec2 pixel = vec2( vTexCoord.x * u_resolution.x, (1.0 - vTexCoord.y) * u_resolution.y ); // 正面面中心を uv = vec2(0.0, 0.0) にする vec2 centeredPixel = pixel - u_animCenter; // 正面面の半分サイズを1.0として正規化 vec2 uv = centeredPixel / u_faceHalfSize; float seconds = u_time / 60.0; float totalWaveHeight = 0.0; float totalWaveEnergy = 0.0; float strongestWave = 0.0; vec2 normalOffset = vec2(0.0); for (int i = 0; i < ${MAX_RIPPLES}; i++) { vec2 center = u_ripplesA[i].xy; float startTime = u_ripplesA[i].w; if (startTime <= 0.0) continue; float age = u_time - startTime; float lifespan = 220.0; if (age > lifespan || age < 0.0) continue; float speed = u_ripplesB[i].x; float amplitude = u_ripplesB[i].z; float initialRadius = u_ripplesB[i].w; float dist = distance(uv, center); float currentRadius = initialRadius + age * speed; float distToWavefront = dist - currentRadius; float decay = exp(-age * 0.018) * smoothstep(lifespan, lifespan * 0.45, age); float waveRegion = 0.6; float envelope = smoothstep(waveRegion, 0.0, abs(distToWavefront)); if (envelope > 0.0) { float lineWidth = 0.014; float goldLine = 1.0 - smoothstep(0.0, lineWidth, abs(distToWavefront)); float outerLine = 1.0 - smoothstep( 0.0, lineWidth * 0.8, abs(distToWavefront - lineWidth * 3.2) ); float innerLine = 1.0 - smoothstep( 0.0, lineWidth * 0.8, abs(distToWavefront + lineWidth * 2.4) ); float trail = smoothstep(0.18, 0.0, distToWavefront) * smoothstep(-0.55, -0.05, distToWavefront); float goldHalo = 1.0 - smoothstep( 0.0, lineWidth * 9.0, abs(distToWavefront) ); float ring = goldLine * 1.5 + outerLine * 0.35 + innerLine * 0.22 + trail * 0.16 + goldHalo * 0.14; ring *= amplitude * decay * envelope; totalWaveHeight += ring; totalWaveEnergy += abs(ring); strongestWave = max(strongestWave, abs(ring)); vec2 dir = normalize(uv - center + 0.0001); float edge = 1.0 - smoothstep( 0.0, lineWidth * 3.0, abs(distToWavefront) ); float side = sign(distToWavefront); normalOffset += dir * edge * side * amplitude * decay * 0.22; normalOffset += dir * trail * amplitude * decay * 0.035; } } vec3 normal = normalize(vec3(normalOffset, 1.0)); float t = u_time * 0.01; // ------------------------- // Background : Palettes // ------------------------- float bgPattern = sin(uv.x * 2.0 + t * 0.7) + sin(uv.y * 2.5 - t * 0.9) + sin((uv.x + uv.y) * 1.8 + t * 0.5); bgPattern = bgPattern / 3.0; bgPattern = bgPattern * 0.5 + 0.5; float vignette = smoothstep(1.8, 0.1, length(uv)); // 0: Rose Gold vec3 bgA0 = vec3(0.035, 0.025, 0.055); vec3 bgB0 = vec3(0.32, 0.16, 0.28); vec3 bgC0 = vec3(0.95, 0.58, 0.38); // 1: Midnight / 深夜の静けさ vec3 bgA1 = vec3(0.012, 0.018, 0.045); vec3 bgB1 = vec3(0.030, 0.12, 0.28); vec3 bgC1 = vec3(0.22, 0.42, 0.70); // 2: Pearl Mauve / 現在はランダム選択されない vec3 bgA2 = vec3(0.040, 0.030, 0.055); vec3 bgB2 = vec3(0.24, 0.16, 0.30); vec3 bgC2 = vec3(0.86, 0.68, 0.78); vec3 bgA = bgA0; vec3 bgB = bgB0; vec3 bgC = bgC0; if (u_bgPaletteIndex < 0.5) { bgA = bgA0; bgB = bgB0; bgC = bgC0; } else if (u_bgPaletteIndex < 1.5) { bgA = bgA1; bgB = bgB1; bgC = bgC1; } else { bgA = bgA2; bgB = bgB2; bgC = bgC2; } vec3 backgroundColor = mix(bgA, bgB, bgPattern); // 正面面中心の金の丸感を少し弱めた設定 backgroundColor = mix(backgroundColor, bgC, vignette * 0.10); float lightVeil = sin(uv.x * 5.0 - uv.y * 2.0 + t * 1.2) * 0.5 + 0.5; lightVeil = pow(lightVeil, 4.0); backgroundColor += lightVeil * vec3(0.10, 0.06, 0.10); float aurora1 = sin(uv.x * 2.4 - uv.y * 1.6 + t * 1.1) * 0.5 + 0.5; aurora1 = pow(aurora1, 3.2); float aurora2 = sin(uv.x * -3.2 + uv.y * 2.8 + t * 0.75) * 0.5 + 0.5; aurora2 = pow(aurora2, 5.0); float sunrise = smoothstep(1.6, 0.0, length(uv - vec2(0.0, 0.25))); sunrise = pow(sunrise, 2.2); vec3 auroraCol1 = vec3(0.16, 0.07, 0.12); vec3 auroraCol2 = vec3(0.22, 0.08, 0.12); vec3 sunriseCol = vec3(1.0, 0.52, 0.36); if (u_bgPaletteIndex > 0.5 && u_bgPaletteIndex < 1.5) { auroraCol1 = vec3(0.01, 0.08, 0.18); auroraCol2 = vec3(0.05, 0.11, 0.18); sunriseCol = vec3(0.20, 0.34, 0.55); } else if (u_bgPaletteIndex >= 1.5) { auroraCol1 = vec3(0.12, 0.07, 0.16); auroraCol2 = vec3(0.18, 0.10, 0.22); sunriseCol = vec3(0.92, 0.62, 0.78); } backgroundColor += aurora1 * auroraCol1; backgroundColor += aurora2 * auroraCol2; backgroundColor += sunrise * sunriseCol * 0.04; // 微細な星屑 float dust = sin(uv.x * 120.0 + u_time * 0.03) * sin(uv.y * 90.0 - u_time * 0.025) * sin((uv.x + uv.y) * 70.0 + u_time * 0.02); dust = dust * 0.5 + 0.5; dust = pow(dust, 18.0); vec3 dustCol = vec3(1.0, 0.78, 0.62); float dustStrength = 0.16; if (u_bgPaletteIndex > 0.5 && u_bgPaletteIndex < 1.5) { dustCol = vec3(0.88, 0.74, 0.35); dustStrength = 0.13; } backgroundColor += dust * dustCol * dustStrength; // ------------------------- // Romantic Gold Line // ------------------------- float gold = abs(totalWaveHeight); float interference = max(0.0, totalWaveEnergy - strongestWave); interference = pow(interference, 0.5); float goldCore = pow(gold, 2.4); float goldGlow = pow(gold, 0.65); float distortion = length(normalOffset); float glassEdge = pow(distortion, 0.65); vec3 goldDark = vec3(0.72, 0.32, 0.12); vec3 goldMid = vec3(1.00, 0.66, 0.36); vec3 goldLight = vec3(1.00, 0.90, 0.72); backgroundColor += pow(gold, 0.45) * vec3(0.16, 0.07, 0.03) * 0.22; backgroundColor += pow(interference, 0.55) * vec3(1.0, 0.72, 0.48) * 0.26; vec3 color = backgroundColor; // ------------------------- // Finale mask: // 金線が通過したあと、その領域の波紋を消す // ------------------------- float finaleMaskRaw = smoothstep(${FINALE_START_TIME}.0, ${FINALE_END_TIME}.0, seconds); float finaleMask = pow(finaleMaskRaw, 0.65); vec2 maskSweepDir = normalize(vec2(1.0, -1.0)); float maskSweepCoord = dot(uv, maskSweepDir); float maskSweepPos = mix(-3.8, 3.8, finaleMask); float passedMask = smoothstep(0.0, 0.18, maskSweepPos - maskSweepCoord); float rippleVisible = 1.0 - passedMask; color += interference * vec3(1.0, 0.88, 0.70) * 2.8 * rippleVisible; color += pow(interference, 2.0) * vec3(1.0, 0.96, 0.88) * 3.2 * rippleVisible; color += goldGlow * goldDark * 1.1 * rippleVisible; color += goldCore * goldMid * 3.2 * rippleVisible; color += pow(gold, 3.2) * goldLight * 10.0 * rippleVisible; color += glassEdge * vec3(1.0, 0.72, 0.48) * 1.35 * rippleVisible; vec3 lightDir = normalize(vec3(1.0, 1.0, 2.5)); float spec = pow(max(dot(normal, lightDir), 0.0), 42.0); color += spec * vec3(1.0, 0.74, 0.50) * 0.42 * rippleVisible; // ------------------------- // Finale : Diagonal Golden Sweep // ------------------------- float finaleRaw = smoothstep(${FINALE_START_TIME}.0, ${FINALE_END_TIME}.0, seconds); float finale = pow(finaleRaw, 0.65); vec2 sweepDir = normalize(vec2(1.0, -1.0)); float sweepCoord = dot(uv, sweepDir); float sweepPos = mix(-3.8, 3.8, finale); float sweepDist = abs(sweepCoord - sweepPos); float sweepLine = 1.0 - smoothstep(0.0, 0.045, sweepDist); float sweepGlow = 1.0 - smoothstep(0.0, 0.34, sweepDist); float sweepVeil = 1.0 - smoothstep(0.0, 0.75, sweepDist); float passedArea = smoothstep(0.0, 0.22, sweepPos - sweepCoord); float softAfterLight = passedArea * finaleRaw; softAfterLight = pow(softAfterLight, 0.75); float afterGlow = 1.0 - smoothstep( 0.0, 0.65, abs(sweepCoord - (sweepPos - 0.28)) ); float sweepFade = 1.0 - smoothstep(0.92, 1.0, finaleRaw); afterGlow *= 1.0 - smoothstep(0.86, 1.0, finaleRaw); float finalBloom = smoothstep(0.55, 1.0, finaleRaw); color += sweepVeil * vec3(0.95, 0.35, 0.20) * 0.95 * finale * sweepFade; color += sweepGlow * vec3(1.0, 0.62, 0.32) * 2.4 * finale * sweepFade; color += sweepLine * vec3(1.0, 0.88, 0.55) * 7.2 * finale * sweepFade; color += pow(sweepLine, 2.8) * vec3(1.0, 0.97, 0.82) * 8.0 * finale * sweepFade; color += softAfterLight * vec3(1.0, 0.56, 0.38) * 0.72; color += softAfterLight * vec3(1.0, 0.82, 0.62) * 0.28; color += afterGlow * vec3(1.0, 0.48, 0.30) * 1.25 * finale; float sweepSpec = pow(sweepGlow, 2.2); color += sweepSpec * vec3(1.0, 0.84, 0.62) * 2.0 * finale * sweepFade; color += finalBloom * vec3(1.0, 0.55, 0.36) * 0.65; color = 1.0 - exp(-color * (1.05 + finalBloom * 0.30)); gl_FragColor = vec4(color, 1.0); } `; //------------------------------------- // p5.js main //------------------------------------- function preload() { if (debugMode) { try { image1 = loadImage( "images/LED_CUBE1.png", function () { console.log("LED_CUBE1.png 読み込み成功"); }, function () { console.log("LED_CUBE1.png が不明"); } ); } catch (e) { console.log("LED_CUBE1.png の読み込みをスキップ"); } try { image2 = loadImage( "images/LED_CUBE2.png", function () { console.log("LED_CUBE2.png 読み込み成功"); }, function () { console.log("LED_CUBE2.png が不明"); } ); } catch (e) { console.log("LED_CUBE2.png の読み込みをスキップ"); } try { image3 = loadImage( "images/LED_CUBE3.png", function () { console.log("LED_CUBE3.png 読み込み成功"); }, function () { console.log("LED_CUBE3.png が不明"); } ); } catch (e) { console.log("LED_CUBE3.png の読み込みをスキップ"); } } } function setup() { createCanvasSetup(); initializeAnimation(); } function draw() { background(0); let gl = this._renderer.GL; gl.viewport(0, 0, width, height); shader(gridShader); let dataA = []; let dataB = []; for (let r of ripples) { dataA.push(r.v.x, r.v.y, r.v.z, r.startTime); dataB.push(r.speed, r.frequency, r.amplitude, r.initialRadius); } const mapping = getCurrentMapping(); gridShader.setUniform("u_time", getElapsedSeconds() * 60.0); gridShader.setUniform("u_resolution", [width, height]); gridShader.setUniform("u_animCenter", [mapping.centerX, mapping.centerY]); gridShader.setUniform("u_faceHalfSize", mapping.faceHalfSize); gridShader.setUniform("u_bgPaletteIndex", float(bgPaletteIndex)); gridShader.setUniform("u_ripplesA", dataA); gridShader.setUniform("u_ripplesB", dataB); quad(-1, -1, 1, -1, 1, 1, -1, 1); if (!introRippleStarted && getElapsedSeconds() >= INTRO_FIRST_RIPPLE_TIME) { dropIntroRipple(); introRippleStarted = true; } if (getElapsedSeconds() < INTRO_DURATION) { drawDebugMode(); return; } if (!introFinished) { introFinished = true; pendingRipples = []; nextAutoRippleTime = getElapsedSeconds(); } for (let i = pendingRipples.length - 1; i >= 0; i--) { if (getElapsedSeconds() >= pendingRipples[i].time) { dropWater(pendingRipples[i].amp); pendingRipples.splice(i, 1); } } let seconds = getElapsedSeconds(); let inFinale = seconds >= FINALE_START_TIME + 2.0; if (getElapsedSeconds() >= nextAutoRippleTime) { if (!inFinale) { scheduleRippleBurst(); scheduleNextAutoRipple(); } else { if (random() < 0.18) { scheduleRippleBurst(); } nextAutoRippleTime = getElapsedSeconds() + random(24 / 60.0, 48 / 60.0); } } drawDebugMode(); } //------------------------------------- // Animation functions //------------------------------------- function initializeAnimation() { startMillis = millis(); // リロード / 再初期化ごとに背景パレットを2種類から選ぶ bgPaletteIndex = random() < 0.6 ? 0 : 1; // bgPaletteIndex = 1; // 固定確認したい場合はこちら console.log( "Background palette:", bgPaletteIndex === 0 ? "Rose Gold" : bgPaletteIndex === 1 ? "Midnight" : "Pearl Mauve" ); gridShader = createShader(vertShader, fragShader); ripples = []; pendingRipples = []; introRippleStarted = false; introFinished = false; for (let i = 0; i < MAX_RIPPLES; i++) { ripples.push(createNewRipple(true)); } nextAutoRippleTime = INTRO_DURATION; } function createNewRipple(isInitial = false, customAmp = null) { const bounds = getUvBoundsForCurrentCanvas(); const hasLedCubeMapping = Boolean(LED_CUBE_MAPPINGS[currentSize]); let x; let y; if (hasLedCubeMapping) { const r = random(); if (r < 0.70) { // 70%：正面面の中、中心寄りから発生 x = randomGaussian(0.0, 0.42); y = randomGaussian(0.0, 0.42); x = constrain(x, -0.92, 0.92); y = constrain(y, -0.92, 0.92); } else if (r < 0.90) { // 20%：正面面周辺まで少し広げる x = randomGaussian(0.0, 0.75); y = randomGaussian(0.0, 0.75); x = constrain(x, -1.35, 1.35); y = constrain(y, -1.35, 1.35); } else { // 10%：展開図全体 x = random(bounds.minX, bounds.maxX); y = random(bounds.minY, bounds.maxY); } } else { x = random(bounds.minX, bounds.maxX); y = random(bounds.minY, bounds.maxY); } return { v: createVector(x, y, 0.0), startTime: isInitial ? -500.0 : getElapsedSeconds() * 60.0, // 正面面で見た時に波紋の形が読めるよう、少しゆっくり・小さめにする // speed: hasLedCubeMapping ? random(0.001, 0.010) : random(0.015, 0.025), speed: hasLedCubeMapping ? random(0.006, 0.014) : random(0.015, 0.025), frequency: random(40.0, 70.0), amplitude: customAmp || (hasLedCubeMapping ? random(0.07, 0.15) : random(0.08, 0.18)), initialRadius: hasLedCubeMapping ? random(0.0, 0.22) : random(0.0, 0.5), }; } function dropWater(customAmp = null) { let oldestIdx = 0; let minTime = Infinity; for (let i = 0; i < ripples.length; i++) { if (ripples[i].startTime < minTime) { minTime = ripples[i].startTime; oldestIdx = i; } } ripples[oldestIdx] = createNewRipple(false, customAmp); } function dropIntroRipple() { let oldestIdx = 0; let minTime = Infinity; for (let i = 0; i < ripples.length; i++) { if (ripples[i].startTime < minTime) { minTime = ripples[i].startTime; oldestIdx = i; } } // 最初の波紋だけ、正面面の中心からきれいに始める ripples[oldestIdx] = { v: createVector(0.0, 0.0, 0.0), startTime: getElapsedSeconds() * 60.0, speed: 0.010, frequency: 50.0, amplitude: 0.28, initialRadius: 0.0, }; } function scheduleRippleBurst() { let progress = min(1.0, getElapsedSeconds() / STORM_TIME); let countProgress = pow(progress, 1.35); let minCount = floor(lerp(1, 3, countProgress)); let maxCount = floor(lerp(2, 7, countProgress)); let count = int(random(minCount, maxCount + 1)); let spreadSeconds = lerp(42 / 60.0, 14 / 60.0, progress); for (let i = 0; i < count; i++) { let delaySeconds = random(0, spreadSeconds); let amp = random( lerp(0.06, 0.12, progress), lerp(0.14, 0.34, progress) ); pendingRipples.push({ time: getElapsedSeconds() + delaySeconds, amp: amp, }); } } function scheduleNextAutoRipple() { let progress = min(1.0, getElapsedSeconds() / STORM_TIME); let pauseChance = lerp(0.04, 0.10, progress); if (random() < pauseChance) { nextAutoRippleTime = getElapsedSeconds() + random(48 / 60.0, 78 / 60.0); return; } let minIntervalSeconds = lerp(200 / 60.0, 8 / 60.0, progress); let maxIntervalSeconds = lerp(200 / 60.0, 14 / 60.0, progress); nextAutoRippleTime = getElapsedSeconds() + random(minIntervalSeconds, maxIntervalSeconds); } //------------------------------------- // LED cube mapping helpers //------------------------------------- function getCurrentMapping() { const mapping = LED_CUBE_MAPPINGS[currentSize]; if (mapping) { const f = mapping.frontFace; return { centerX: f.x + f.width / 2, centerY: f.y + f.height / 2, faceHalfSize: f.width / 2, frontFaceName: f.name, }; } return { centerX: width / 2, centerY: height / 2, faceHalfSize: min(width, height) / 2, frontFaceName: "", }; } function getUvBoundsForCurrentCanvas() { const mapping = getCurrentMapping(); return { minX: (0 - mapping.centerX) / mapping.faceHalfSize, maxX: (width - mapping.centerX) / mapping.faceHalfSize, minY: (0 - mapping.centerY) / mapping.faceHalfSize, maxY: (height - mapping.centerY) / mapping.faceHalfSize, }; } //------------------------------------- // ユーティリティここから //------------------------------------- function drawDebugMode() { if (!debugMode) return; let img = null; if (image1 && image1.width > 0 && currentSize === "LED_CUBE1") { img = image1; } else if (image2 && image2.width > 0 && currentSize === "LED_CUBE2") { img = image2; } else if (image3 && image3.width > 0 && currentSize === "LED_CUBE3") { img = image3; } if (!img) return; resetShader(); push(); translate(-width / 2, -height / 2); tint(255, 80); image(img, 0, 0, width, height); noTint(); pop(); } 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 (key === "1" || key === "2" || key === "3" || key === "4") { updateURLAndCanvas(); } } function createCanvasSetup() { const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]) { currentSize = sizeParam; } createCanvasWithSize(); } function updateURLAndCanvas() { const url = new URL(window.location); if (currentSize) { url.searchParams.set("size", currentSize); } else { url.searchParams.delete("size"); } window.history.replaceState({}, "", url); createCanvasWithSize(); initializeAnimation(); } function createCanvasWithSize() { let size; if (currentSize && CANVAS_SIZES[currentSize]) { size = CANVAS_SIZES[currentSize]; } else { size = { width: windowWidth, height: windowHeight }; } if (window.canvas) { window.canvas.remove(); } pixelDensity(1); // ここを必ず window.canvas に代入する window.canvas = createCanvas(size.width, size.height, WEBGL); let canvasElement = document.querySelector("canvas"); if (canvasElement) { canvasElement.style.display = "block"; } document.body.style.overflow = "hidden"; document.body.style.margin = "0"; document.body.style.padding = "0"; const mapping = getCurrentMapping(); console.log( `Canvasサイズ変更 : ${currentSize || "screen"} (${size.width}x${size.height})` ); console.log( `Animation center : ${mapping.frontFaceName || "screen center"} (${mapping.centerX}, ${mapping.centerY}), faceHalfSize=${mapping.faceHalfSize}` ); } function windowResized() { if (!currentSize || !CANVAS_SIZES[currentSize]) { resizeCanvas(windowWidth, windowHeight); console.log(`Canvasリサイズ: ${windowWidth}x${windowHeight}`); } } // ユーティリティここまで //-------------------------------------

expandGold