//=================================================================== // 七宝柄 / LEDキューブマッピング — 単一ファイル版（アップロード用） // // debug.js / shapes.js / graphics-layer.js / canvas.js / sketch.js を // この1ファイルにまとめたもの。依存（ロード時に CANVAS_SIZES が // CUBE_CONFIGS を参照する等）を満たす順序で連結している。 //=================================================================== //------------------------------------- // デバッグ支援ここから // // debugMode: デバッグモード。NEORTにアップロード時は false にしてください。 // true … ログ出力 + レイアウト参考画像 + タイル境界線を表示 // false … 本番表示（ログ・補助表示なし） const debugMode = false; // debugMode 連動のロガー。debugMode=false のときは何も出力しない。 // 既存の console.log の代わりに log(...) を使うことで本番を静かに保つ。 function log(...args) { if (debugMode) { console.log(...args); } } // レイアウト参考画像。サイズキー("LED_CUBE1"等) → p5.Image。 const debugImages = {}; // レイアウト参考画像の読み込み（p5 のライフサイクル: setup より前に実行） function preload() { if (!debugMode) return; // CANVAS_SIZES のキーごとに images/.png を読み込む Object.keys(CANVAS_SIZES).forEach((key) => { debugImages[key] = loadImage( `images/${key}.png`, () => log(`${key}.png 読み込み成功`), () => log(`${key}.png が不明`), ); }); } // レイアウト参考画像の描画（draw 関数内で呼ぶ） function drawDebugMode() { if (!debugMode) return; const img = debugImages[currentSize]; if (img && img.width > 0) { image(img, 0, 0, width, height); } } // デバッグ支援ここまで //------------------------------------- //------------------------------------- // LEDキューブの形状定義・レジストリここから // フルスクリーンモードで使用する GraphicsLayer の数 const FULLSCREEN_LAYERS = 6; // LED_CUBE1 2000×1440 const CUBE_SPEC_1 = { w: 2000, h: 1440, size: 720 }; const LED_CUBE1 = [ { type: "rect", name: "r1", x: 0, y: 0, w: 200, h: 720, img_x: -520, img_y: 0 }, { type: "rect", name: "r2", x: 200, y: 0, w: 720, h: 720, img_x: 200, img_y: 0 }, { type: "rect", name: "r3", x: 920, y: 0, w: 720, h: 720, img_x: 920, img_y: 0 }, { type: "rect", name: "r4", x: 1640, y: 0, w: 360, h: 720, img_x: 1640, img_y: 0 }, { type: "poly", name: "p1", points: [ [560, 1439], [560, 1079], [200, 1079], [200, 720], [919, 720], [919, 1439], [560, 1439], ], img_x: 200, img_y: 720, }, ]; // LED_CUBE2 1536×768 const CUBE_SPEC_2 = { w: 1536, h: 768, size: 384 }; const LED_CUBE2 = [ { type: "rect", name: "r1", x: 0, y: 0, w: 384, h: 384, img_x: 0, img_y: 0 }, { type: "rect", name: "r2", x: 384, y: 0, w: 384, h: 384, img_x: 384, img_y: 0 }, { type: "rect", name: "r3", x: 768, y: 0, w: 384, h: 384, img_x: 768, img_y: 0 }, { type: "rect", name: "r4", x: 1152, y: 0, w: 384, h: 384, img_x: 1152, img_y: 0 }, { type: "rect", name: "r5", x: 384, y: 384, w: 384, h: 384, img_x: 384, img_y: 384 }, ]; // LED_CUBE3 672×480 const CUBE_SPEC_3 = { w: 672, h: 480, size: 288 }; const LED_CUBE3 = [ { type: "rect", name: "r1", x: 192, y: 0, w: 288, h: 288, img_x: 192, img_y: 0 }, { type: "rect", name: "r2", x: 192, y: 288, w: 288, h: 192, img_x: 192, img_y: 288 }, { type: "poly", name: "p1", points: [ [64, 0], [192, 0], [192, 288], [0, 288], [0, 224], [96, 224], [96, 96], [64, 96], ], img_x: -96, img_y: 0, }, { type: "poly", name: "p2", points: [ [480, 287], [480, 0], [607, 0], [607, 95], [575, 95], [575, 224], [671, 224], [671, 287], [480, 287], ], img_x: 480, img_y: 0, }, ]; // フルスクリーン用の設定（動的に計算） let CUBE_SPEC_4 = null; let LED_CUBE4 = null; // サイズ番号 → 形状/スペック/サイズキーのレジストリ。 // 番号⇔文字列⇔データの対応を1箇所に集約（4=フルスクリーンは動的生成のため別扱い）。 const CUBE_CONFIGS = { 1: { key: "LED_CUBE1", shapes: LED_CUBE1, spec: CUBE_SPEC_1 }, 2: { key: "LED_CUBE2", shapes: LED_CUBE2, spec: CUBE_SPEC_2 }, 3: { key: "LED_CUBE3", shapes: LED_CUBE3, spec: CUBE_SPEC_3 }, }; // 現在アクティブなLEDキューブの設定 const active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; // フルスクリーンレイアウトの作成（画面全体を格子状タイルで敷き詰める） function createFullscreenLayout() { const screenWidth = windowWidth; const screenHeight = windowHeight; // Graphicsサイズを画面幅の1/4に固定し、画面を覆い尽くす格子を計算 const graphicsSize = screenWidth / 4; const gridCols = ceil(screenWidth / graphicsSize); const gridRows = ceil(screenHeight / graphicsSize); // 格子状にタイルを作成し、各タイルへ 0..FULLSCREEN_LAYERS-1 のレイヤーを割り当て LED_CUBE4 = []; for (let row = 0; row < gridRows; row++) { for (let col = 0; col < gridCols; col++) { LED_CUBE4.push({ type: "rect", name: `tile_${row}_${col}`, x: col * graphicsSize, y: row * graphicsSize, w: graphicsSize, h: graphicsSize, img_x: col * graphicsSize, img_y: row * graphicsSize, layerIndex: floor(random(FULLSCREEN_LAYERS)), }); } } CUBE_SPEC_4 = { w: screenWidth, h: screenHeight, size: graphicsSize }; log( `フルスクリーンレイアウト作成: ${screenWidth}x${screenHeight}, 格子: ${gridCols}×${gridRows}, Graphicsサイズ: ${graphicsSize}, タイル数: ${LED_CUBE4.length}`, ); } // ポリゴンのクリッピングパスを構築（呼び出し後に drawingContext.clip() を実行する） function clipPolygon(poly) { push(); fill(0, 0); beginShape(); for (let i = 0; i < poly.length; i++) { vertex(poly[i][0], poly[i][1]); } endShape(CLOSE); pop(); } // LEDキューブの形状定義・レジストリここまで //------------------------------------- //------------------------------------- // GraphicsLayer（個別オフスクリーン描画）ここから // GraphicsLayer配列の管理 let graphicsLayers = []; let currentLayerIndex = 0; // 全パネル共通の乱数シード。各レイヤーはこの同一シードから自前のPRNGを始めるため、 // 同じ回転列（種類・継続フレーム数）・同じ配色になり、パネル間で完全に揃う。 // ページ読み込みごとに決まる（＝起動ごとに配色・回転順がランダムに変わる）。 const SHIPPO_SEED = Math.floor(Math.random() * 0x100000000); // 個別Graphics管理クラス。1レイヤー = 1オフスクリーンバッファ。 // 作品ロジックは update()/draw() とコンストラクタの初期化欄に記述する。 class GraphicsLayer { constructor(size, index, shape) { // クラスの変更しないほうがいいプロパティ this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = false; // 七宝柄（しっぽう）の設定 this.palette = { red: "#a8dadc", green: "#457b9d", sand: "#f1faee", accent: "#e63946", // 差し色 }; this.unit = size / 12; // 円の半径＝格子間隔（隣の円の中心を通る重なり方） this.angle = 0; // 各2x2ブロックの現在の符号付き回転角（負で反時計回り） // 回転アニメーションの状態（くるっと回転 → 一定時間静止を繰り返す）。 // 時間は[ms]で扱い deltaTime を積算するのでフレームレートに依存しない。 this.quarterMs = 750; // 90度あたりの所要時間[ms]（くるっと感） this.pauseMs = 500; // 回転と回転の間の静止時間[ms] this.timer = this.pauseMs; // ディレイ後すぐ最初の回転へ入れるよう静止枠を消化済みに this.rotating = false; // 最初は静止から（最初の回転も startNextRotation 経由で録画する） this.delayMs = 3000; // 開始前のウェイト（3秒）。フレームレート非依存 this.elapsedMs = 0; // 開始からの経過[ms]（deltaTime を積算。ディレイ含む） // 回転は 8 種類からランダムに選ぶ: // 格子(phase) 2種 × 回転量(90/180度) 2種 × 向き(時計/反時計) 2種 this.phase = 0; // 0:(偶,偶)タイルの右下角中心 / 1:(奇,奇)タイルの右下角中心 this.quarters = 1; // 1:90度 / 2:180度 this.targetAngle = Math.PI / 2; // 今回の回転の符号付き目標角 this.rotMs = this.quarterMs; // 今回の回転にかける総時間[ms] // 全レイヤー共通シードの自前PRNG。同一シード＝同一乱数列で回転・配色が同期する。 this.rngState = SHIPPO_SEED >>> 0; // バッファはちょうど period(=12) タイル四方。色をこの周期のグリッドで持ち、 // 参照時に period で剰余を取ることで、レイヤーの上下左右がつながる（トーラス状）。 // 回転ブロックも period/2 個ずつで割り切れるため、回転後も継ぎ目が出ない。 this.cols = Math.ceil(this.graphics.width / this.unit) + 2; // 描画ループ範囲（余白込み） this.rows = Math.ceil(this.graphics.height / this.unit) + 2; this.period = Math.round(this.graphics.width / this.unit); // = 12（バッファ＝12タイル周期） this.noiseScale = 10; // パーリンノイズの距離あたり歩幅（小さいほど同心円が太い） noiseSeed(SHIPPO_SEED); // 全レイヤー同一・起動ごとに変わるノイズ場（noiseは座標の純関数） this.colorGrid = []; for (let i = 0; i < this.period; i++) { const col = []; for (let j = 0; j < this.period; j++) { // 中心からの距離(ユークリッド)を入力にしたパーリンノイズで赤/緑に振り分け（同心円状） col.push(this.radialNoise(i, j) < 0.5 ? this.palette.red : this.palette.green); } this.colorGrid.push(col); } this.applyAccentPattern(); // 固定位置のタイルだけ差し色で上書きして模様を作る // 進行管理：録画 → 逆再生（巻き戻し）→ 停止 this.mode = "record"; // "record":録画 / "replay":逆再生 / "stopped":停止 this.history = []; // 録画した回転（{phase, quarters, targetAngle}）の列 this.replayIndex = 0; // 逆再生で参照中の履歴位置 this.recordMs = 28 * 1000; // 28秒経過するまで録画。フレームレート非依存 } // 回転完了時、各2x2ブロック内のレンズ色を回転方向に合わせて入れ替える。 // 描画中は ctx の回転で色も一緒に回るので、停止後の見た目を一致させるための持ち回り。 // 色は period(=12) 周期のトーラスとして扱い、基本領域(period/2 × period/2 ブロック)を // 1回ずつ巡回する。端をまたぐブロックは剰余で反対側へ回り込む。 permuteColors() { const cw = this.targetAngle > 0; // 正の角＝時計回り（canvasはy下向き） const N = this.period; const start = this.phase === 0 ? 0 : 1; // 偶数アンカー or 奇数アンカー const g = this.colorGrid; const m = (a) => ((a % N) + N) % N; for (let i = start; i < start + N; i += 2) { for (let j = start; j < start + N; j += 2) { // 2x2の四隅（period で剰余）: UL=左上 UR=右上 LL=左下 LR=右下 const a = m(i); const b = m(j); const a1 = m(i + 1); const b1 = m(j + 1); const ul = g[a][b]; const ur = g[a1][b]; const ll = g[a][b1]; const lr = g[a1][b1]; if (this.quarters === 2) { // 180度：対角を入れ替え g[a][b] = lr; g[a1][b1] = ul; g[a1][b] = ll; g[a][b1] = ur; } else if (cw) { // 90度時計回り：UL→UR→LR→LL→UL g[a1][b] = ul; g[a1][b1] = ur; g[a][b1] = lr; g[a][b] = ll; } else { // 90度反時計回り：逆回し g[a][b] = ur; g[a1][b] = lr; g[a1][b1] = ll; g[a][b1] = ul; } } } } // タイル座標の色（period で剰余 → 上下左右がつながるトーラス参照） colorAt(ti, tj) { const N = this.period; return this.colorGrid[((ti % N) + N) % N][((tj % N) + N) % N]; } // 中心からのユークリッド距離を入力にしたパーリンノイズ [0,1)。 // 距離だけで決まるので同心円状の模様になる（上下左右はつながらない）。 radialNoise(ti, tj) { const c = this.period / 2; // バッファ中心（タイル境界の角 = 6） const dx = ti + 0.5 - c; // タイル中心と中心の差（タイル単位） const dy = tj + 0.5 - c; const d = Math.hypot(dx, dy); // ユークリッド距離 return noise(d * this.noiseScale); } // ランダム配色の上に、差し色(accent)で 2x2 の小さな模様(4タイル)を 2箇所上書きする。 // 位置は偶数アンカーの中からランダム（中心とは限らない・2箇所は重複しない）。 // 偶数アンカーは phase 0 の回転ブロックと一致するので、差し色4枚がまとまりとして扱える。 // period(=12) は偶数かつアンカー ≤ N-2 なので端をまたがない。 applyAccentPattern() { const half = this.period / 2; // 偶数アンカーの個数(6) const placed = new Set(); for (let n = 0; n < 2; n++) { let ai; let aj; do { ai = Math.floor(this.rng() * half) * 2; // 0..N-2 の偶数 aj = Math.floor(this.rng() * half) * 2; } while (placed.has(`${ai},${aj}`)); // 2箇所が重ならないように placed.add(`${ai},${aj}`); this.colorGrid[ai][aj] = this.palette.accent; this.colorGrid[ai + 1][aj] = this.palette.accent; this.colorGrid[ai][aj + 1] = this.palette.accent; this.colorGrid[ai + 1][aj + 1] = this.palette.accent; } } // 全レイヤーで同じ列になる擬似乱数 [0,1)（mulberry32）。Math.random と違い決定的。 rng() { this.rngState = (this.rngState + 0x6d2b79f5) | 0; let t = Math.imul(this.rngState ^ (this.rngState >>> 15), 1 | this.rngState); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; } // 次の回転を 8 種類（格子×回転量×向き）からランダムに決める。 // ただし回転の中心（格子）は毎回必ず切り替える。 chooseNextRotation() { this.phase = 1 - this.phase; // 格子を必ずトグル → 中心が毎回切り替わる this.quarters = this.rng() < 0.5 ? 1 : 2; // 90度 or 180度 const dir = this.rng() < 0.5 ? 1 : -1; // 時計回り or 反時計回り this.targetAngle = dir * this.quarters * (Math.PI / 2); this.rotMs = this.quarters * this.quarterMs; // 角度に比例した時間で一定速度感 } // 次の回転を開始する。 // 録画中(record)はランダムに選んで履歴へ記録。28秒経過したら逆再生(replay)へ。 // 逆再生は履歴を末尾から向きを反転して巻き戻す。全て巻き戻したら停止(stopped)。 startNextRotation() { this.timer = 0; this.rotating = true; if (this.mode === "record") { if (this.elapsedMs >= this.recordMs) { // 録画終了 → 逆再生へ this.mode = "replay"; this.replayIndex = this.history.length - 1; this.startNextRotation(); return; } this.chooseNextRotation(); this.history.push({ phase: this.phase, quarters: this.quarters, targetAngle: this.targetAngle, }); } else { // replay：履歴を末尾から、向きを反転（-targetAngle）して打ち消す if (this.replayIndex < 0) { this.mode = "stopped"; // 全て巻き戻した → 初期模様で停止 this.rotating = false; this.angle = 0; return; } const rec = this.history[this.replayIndex]; this.replayIndex--; this.phase = rec.phase; this.quarters = rec.quarters; this.targetAngle = -rec.targetAngle; // 逆回しで元に戻す this.rotMs = this.quarters * this.quarterMs; } } // このレイヤーの計算処理（毎フレーム呼ばれる） // 「くるっと回転 → 一定時間静止」を繰り返す。回転はイージング(ease-in-out)で加速→減速。 // 回りきったらレンズの色を回転先へ持ち回り、停止後の見た目を回転中と一致させる。 update() { this.elapsedMs += deltaTime; // 開始からの経過[ms]（録画締切の判定に使う） if (this.elapsedMs < this.delayMs) return; // 開始前ウェイト中は静止（初期模様のまま） if (this.mode === "stopped") return; // 逆再生まで終わったら停止（初期模様で静止） this.timer += deltaTime; if (this.rotating) { if (this.timer > this.rotMs) { // 回転完了（直前フレームで目標角を描画済み）→ スナップして色を持ち回る this.angle = 0; this.permuteColors(); this.rotating = false; this.timer = 0; } else { // ease-in-out cubic で 0 → targetAngle const t = this.timer / this.rotMs; const e = t < 0.5 ? 4 * t ** 3 : 1 - (2 - 2 * t) ** 3 / 2; this.angle = e * this.targetAngle; } } else if (this.timer > this.pauseMs) { // 静止インターバル終了 → 次の回転へ（録画 / 逆再生 / 停止） this.startNextRotation(); } } // このレイヤーの描画処理（毎フレーム呼ばれる。this.graphics に描く） // 七宝柄：円の輪郭線は描かず、隣り合う2円の重なり（レンズ／花弁）を塗る。 // 現在のフェーズに応じた格子で、各2x2ブロックをその右下角中心に回転させる。 draw() { const g = this.graphics; const R = this.unit; const cols = this.cols; const rows = this.rows; // 背景（砂色） g.background(this.palette.sand); const ctx = g.drawingContext; const HALF = Math.PI / 4; // 対角の円(中心間距離√2R)同士なので開き角は常に±45度 // 半径Rの対角2円の重なり＝レンズを塗る。各円の弧は相手の円側へ膨らむ90度の弧。 const drawLens = (x1, y1, x2, y2, color) => { const phi = Math.atan2(y2 - y1, x2 - x1); ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x1, y1, R, phi - HALF, phi + HALF, false); ctx.arc(x2, y2, R, phi + Math.PI - HALF, phi + Math.PI + HALF, false); ctx.closePath(); ctx.fill(); }; // 1タイル分のレンズを描く（向きは(i+j)の偶奇、色はレンズごとの独立色） const drawTile = (ti, tj) => { const x = ti * R; const y = tj * R; const color = this.colorAt(ti, tj); if ((ti + tj) % 2 === 0) { drawLens(x, y, x + R, y + R, color); // 左上→右下の対角 } else { drawLens(x + R, y, x, y + R, color); // 右上→左下の対角 } }; // 現在のフェーズに応じてアンカー(2x2ブロックの左上タイル)の偶奇をずらす。 // phase 0 は偶数(…,0,2,4,…)、phase 1 は奇数(…,-1,1,3,…)。 // 奇数側は端のタイルも拾えるよう -1 から始める。 const anchorStart = this.phase === 0 ? 0 : -1; for (let i = anchorStart; i < cols; i += 2) { for (let j = anchorStart; j < rows; j += 2) { const cx = (i + 1) * R; // 右下の角＝4タイルの共有角＝回転中心 const cy = (j + 1) * R; ctx.save(); ctx.translate(cx, cy); ctx.rotate(this.angle); ctx.translate(-cx, -cy); drawTile(i, j); drawTile(i + 1, j); drawTile(i, j + 1); drawTile(i + 1, j + 1); ctx.restore(); } } } // レイヤーを削除（オフスクリーンバッファを解放） remove() { if (this.graphics?.remove) { this.graphics.remove(); } } // アクティブ状態を切り替え toggleActive() { this.isActive = !this.isActive; } } // GraphicsLayer配列を作成 function createGraphicsLayers() { // 既存のLayersを削除 removeGraphicsLayers(); if (!active.spec) { log("createGraphicsLayers: active.specが未定義"); return; } const graphicsSize = active.spec.size; if (!currentSize) { // フルスクリーンモードは固定数の GraphicsLayer を作成 for (let i = 0; i < FULLSCREEN_LAYERS; i++) { graphicsLayers.push(new GraphicsLayer(graphicsSize, i, null)); } } else { // 通常モードは形状数分の GraphicsLayer を作成 for (let i = 0; i < active.shapes.length; i++) { graphicsLayers.push(new GraphicsLayer(graphicsSize, i, active.shapes[i])); } } log( `createGraphicsLayers完了 - graphicsSize=${graphicsSize}, currentSize=${ currentSize || "screen" }, 作成数=${graphicsLayers.length}`, ); } // GraphicsLayer配列を削除 function removeGraphicsLayers() { graphicsLayers.forEach((layer) => { if (layer?.remove) { layer.remove(); } }); graphicsLayers = []; currentLayerIndex = 0; } // GraphicsLayer（個別オフスクリーン描画）ここまで //------------------------------------- //------------------------------------- // キャンバス管理・モード切替ここから // 各サイズキー → キャンバス寸法。CUBE_CONFIGS の spec から導出し、数値の二重管理を避ける。 const CANVAS_SIZES = Object.fromEntries( Object.values(CUBE_CONFIGS).map((c) => [c.key, { width: c.spec.w, height: c.spec.h }]), ); // 現在のLEDキューブのサイズキー（"" のときフルスクリーンモード） let currentSize = ""; // アクティブなLEDキューブのデータを設定（データ更新のみ。レイヤー生成はしない） function setActive(n) { if (n === 4) { // フルスクリーン用の設定を動的に計算 createFullscreenLayout(); active.shapes = LED_CUBE4; active.spec = CUBE_SPEC_4; } else { const cfg = CUBE_CONFIGS[n]; active.shapes = cfg.shapes; active.spec = cfg.spec; } } // モード切替の単一オーケストレータ。 // データ設定 → キャンバス再生成 → レイヤー生成を同期実行し、順序を保証する // （旧実装の setTimeout / 多重生成を排除）。 function switchMode(n) { currentSize = n === 4 ? "" : CUBE_CONFIGS[n].key; setActive(n); updateURLAndCanvas(); createGraphicsLayers(); log(`switchMode(${n}) 完了 - currentSize=${currentSize || "screen"}`); } // クエリパラメータ(?size=LED_CUBEn)から初期モードを決定して起動 function createCanvasSetup() { const sizeParam = new URLSearchParams(window.location.search).get("size"); // サイズキーから番号を逆引き。該当なし・無指定はフルスクリーン(4)。 let mode = 4; for (const [num, cfg] of Object.entries(CUBE_CONFIGS)) { if (cfg.key === sizeParam) { mode = Number(num); break; } } switchMode(mode); } // URLパラメータを現在のモードに合わせて更新し、キャンバスを再生成 function updateURLAndCanvas() { const url = new URL(window.location); if (currentSize) { url.searchParams.set("size", currentSize); } else { url.searchParams.delete("size"); // フルスクリーンは size パラメータを削除 } window.history.replaceState({}, "", url); createCanvasWithSize(); } // 現在のモードに応じてキャンバスサイズを設定 function createCanvasWithSize() { const size = currentSize && CANVAS_SIZES[currentSize] ? CANVAS_SIZES[currentSize] : { width: windowWidth, height: windowHeight }; // フルスクリーンは画面サイズ // 既存のキャンバスを削除 if (window.canvas) { window.canvas.remove(); } pixelDensity(1); createCanvas(size.width, size.height); log(`Canvasサイズ変更: ${currentSize || "screen"} (${size.width}x${size.height})`); } // ウィンドウリサイズ時の処理（フルスクリーンモードのときのみ追従） function windowResized() { if (!currentSize || !CANVAS_SIZES[currentSize]) { resizeCanvas(windowWidth, windowHeight); log(`Canvasリサイズ: ${windowWidth}x${windowHeight}`); } } // キャンバス管理・モード切替ここまで //------------------------------------- //------------------------------------- // p5.js ライフサイクル（setup / draw / keyPressed） //------------------------------------- function setup() { // URL パラメータからモードを決定し、キャンバスとレイヤーを生成（switchMode 内で完結） createCanvasSetup(); log("Setup完了 - currentSize:", currentSize || "screen"); log("GraphicsLayers数:", graphicsLayers.length); } function draw() { background(0, 20); drawDebugMode(); // デバッグ用LEDキューブのレイアウト参考画像の描画 if (graphicsLayers.length === 0) { if (debugMode && frameCount % 60 === 0) { log("警告: GraphicsLayerがない"); } return; } // 各レイヤーの計算・描画処理を実行 for (let i = 0; i < graphicsLayers.length; i++) { graphicsLayers[i].update(); graphicsLayers[i].draw(); } // メインキャンバスに各形状をマッピング描画 const shapes = active.shapes; for (let i = 0; i < shapes.length; i++) { const shape = shapes[i]; // フルスクリーンモードでは layerIndex を使用。0..FULLSCREEN_LAYERS-1 に制限。 const layerIndex = (shape.layerIndex ?? i) % FULLSCREEN_LAYERS; if (layerIndex >= graphicsLayers.length) { if (debugMode && frameCount % 60 === 0) { log(`警告: layerIndex ${layerIndex} が範囲外 (最大: ${graphicsLayers.length - 1})`, shape); } continue; } const g = graphicsLayers[layerIndex].graphics; if (shape.type === "rect") { image(g, shape.img_x, shape.img_y, g.width, g.height); // デバッグ用：タイルの境界を描画 if (debugMode) { noFill(); stroke(255, 0, 0); strokeWeight(1); rect(shape.img_x, shape.img_y, g.width, g.height); } else { noStroke(); } } else if (shape.type === "poly") { push(); if (debugMode) { stroke(255, 0, 0); } else { noStroke(); } clipPolygon(shape.points); drawingContext.clip(); image(g, shape.img_x, shape.img_y, g.width, g.height); pop(); } } } // キーボード操作: // 1〜3 … 各LEDキューブサイズ、4 … フルスクリーンレイアウト // 左右矢印 … レイヤー選択の切り替え、スペース … 選択レイヤーのアクティブ切替 function keyPressed() { if (key === "1") switchMode(1); else if (key === "2") switchMode(2); else if (key === "3") switchMode(3); else if (key === "4") switchMode(4); if (keyCode === LEFT_ARROW && graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex - 1 + graphicsLayers.length) % graphicsLayers.length; log(`レイヤー切り替え: ${currentLayerIndex + 1}/${graphicsLayers.length}`); } if (keyCode === RIGHT_ARROW && graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex + 1) % graphicsLayers.length; log(`レイヤー切り替え: ${currentLayerIndex + 1}/${graphicsLayers.length}`); } if (key === " " && graphicsLayers[currentLayerIndex]) { graphicsLayers[currentLayerIndex].toggleActive(); log(`レイヤー ${currentLayerIndex + 1} のアクティブ状態を切り替え`); } }

Shippo