//------------------------------------- // プロジェクトの基本設定ここから 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キューブのレイアウト参考画像 let image1, image2, image3; 1234 // 現在のLEDキューブのサイズ let currentSize = ""; // GraphicsLayer配列の管理 let graphicsLayers = []; let currentLayerIndex = 0; let sharedGame = null; let bgImgDefault; // 通常 let bgImgA; // 点滅用1 let bgImgB; // 点滅用2 let bgImg; // 現在表示中 let isBlinking = false; // 点滅モード中かどうか let blueImg; // 青い四角に貼る画像 let blueScale = 1.0; // 青い四角の現在スケール let blueScaleStart = 2; // 出現時のスケール（140%） let blueScaleFrames = 27; // 15フレームで縮む let blueScaleTimer = 0; // 残りフレーム let blueDelay = 0; // 青い四角の遅延カウンター let blueDelayFrames = 38; // 38フレーム遅らせる let blueAlpha = 255; // 現在の透明度 let blueAlphaStart = 0; // 出現時は透明 let blueAlphaFrames = 38; // 38フレームでフェードイン let blueAlphaTimer = 0; // 残りフレーム // プロジェクトの基本設定ここまで //------------------------------------- function setup() { createCanvasSetup(); sharedGame = new InvaderGame(active.spec.size); createGraphicsLayers(); } function draw() { // ★ 背景を先に薄く塗る（残像効果）function preload() background(0, 20); // ★ ゲーム更新＆描画 if (sharedGame) { sharedGame.update(); sharedGame.draw(); } // ★ デバッグ用レイアウト drawDebugMode(); // ★ GraphicsLayer の描画 if (graphicsLayers.length > 0) { // 各レイヤーにゲーム画面を貼る for (let i = 0; i < graphicsLayers.length; i++) { graphicsLayers[i].draw(); } // LED キューブのタイルに貼る for (let i = 0; i < active.shapes.length; i++) { let shape = active.shapes[i]; let layerIndex = shape.layerIndex || i; layerIndex = layerIndex % 6; if (layerIndex < graphicsLayers.length) { let layer = graphicsLayers[layerIndex]; if (shape.type === "rect") { image(layer.graphics, shape.img_x, shape.img_y); if (debugMode) { noFill(); stroke(255, 0, 0); rect(shape.img_x, shape.img_y, layer.graphics.width, layer.graphics.height); } } else if (shape.type === "poly") { push(); if (debugMode) stroke(255, 0, 0); clipPolygon(shape.points); drawingContext.clip(); image(layer.graphics, shape.img_x, shape.img_y); pop(); } } } } } // =============================== // ★ 完全統合版 InvaderGame // =============================== let enemyImg; // preload() で読み込む class InvaderGame { constructor(size) { this.size = size; this.g = createGraphics(size, size); this.startTime = millis(); // 背景スクエア生成 this.bgSquares = []; for (let i = 0; i < 40; i++) { this.bgSquares.push({ x: random(size), y: random(size), size: size / 120, speed: random(1, 1.2), blink: random(0.05, 0.07), col: random([ [255, 0, 0], [0, 0, 255], [255, 255, 0], [0, 255, 0], [255, 255, 255] ]) }); } this.reset(); // ★ 初期フレームを描いておく（背景消失対策） this.draw(); } reset() { isBlinking = false; // ★ 点滅モード解除 bgImg = bgImgDefault; // ★ 通常画像に戻す const PLAYER_W = this.size * 0.05; const PLAYER_H = this.size * 0.025; this.player = { x: this.size * 0.5 - PLAYER_W / 2, y: this.size * 0.89 - PLAYER_H / 2, w: PLAYER_W, h: PLAYER_H }; this.bullets = []; this.enemies = []; this.moveDir = 1; let minTurn = 30; let maxTurn = 120; // LED_CUBE1 のときだけ倍速（＝半分の間隔）23 if (currentSize === "LED_CUBE1") { minTurn = 15; // ← 半分 maxTurn = 60; // ← 半分 } this.moveTimer = int(random(minTurn, maxTurn)); let minShoot = 40; let maxShoot = 80; // LED_CUBE1 のときだけ倍速（＝待ち時間を半分） if (currentSize === "LED_CUBE1") {2 minShoot = 20; // ← 半分 maxShoot = 40; // ← 半分 } this.shootTimer = int(random(minShoot, maxShoot)); // 敵配置 let ENEMY_OFFSET_X = 0; let ENEMY_OFFSET_Y = this.size * 0.065; let cols = 8; let rows = 2; let enemyW = this.size * 0.11; let enemyH = this.size * 0.11; let spacingX = enemyW * 0.00; let spacingY = enemyH * 0.00; let totalWidth = cols * enemyW + (cols - 1) * spacingX; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { this.enemies.push({ x: this.size / 2 - totalWidth / 2 + col * (enemyW + spacingX) + ENEMY_OFFSET_X, y: this.size * 0.1 + row * (enemyH + spacingY) + ENEMY_OFFSET_Y, w: enemyW, h: enemyH, alive: true, img: enemyImg, hitFlash: 0 }); } } } update() { if (millis() - this.startTime > 20000) { this.reset(); this.startTime = millis(); } // 背景スクエア更新 for (let s of this.bgSquares) { let spd = s.speed; // LED_CUBE1 のときだけ倍速 if (currentSize === "LED_CUBE1") { spd *= 2; } s.y += spd; if (s.y > this.size) { s.y = -20; s.x = random(this.size); } } // 自機移動 let speed = 3.5; // LED_CUBE1 のときだけ倍速 if (currentSize === "LED_CUBE1") { speed = 7; // ← 倍速 } this.player.x += this.moveDir * speed; const LEFT_LIMIT = this.size * 0.05; const RIGHT_LIMIT = this.size * 0.95 - this.player.w; if (this.player.x < LEFT_LIMIT || this.player.x > RIGHT_LIMIT) { this.moveDir *= -1; } this.moveTimer--; if (this.moveTimer <= 0) { this.moveDir = random([-1, 1]); this.moveTimer = int(random(30, 120)); } // 自動射撃 this.shootTimer--; if (this.shootTimer <= 0) { this.bullets.push({ x: this.player.x + this.player.w / 2, y: this.player.y }); // 弾の発射間隔 let minShoot = 20; let maxShoot = 25; // LED_CUBE1 のときだけ倍速（＝半分の間隔） if (currentSize === "LED_CUBE1") { minShoot = 10; // ← 半分 maxShoot = 12; // ← 半分 } this.shootTimer = int(random(minShoot, maxShoot)); } // 弾更新 for (let b of this.bullets) { let bulletSpeed = 8; // LED_CUBE1 のときだけ倍速 if (currentSize === "LED_CUBE1") { bulletSpeed = 16; // ← 倍速 } b.y -= bulletSpeed; } this.bullets = this.bullets.filter(b => b.y > -20); // 当たり判定 for (let b of this.bullets) { for (let e of this.enemies) { if ( e.alive && b.x > e.x && b.x < e.x + e.w && b.y < e.y + e.h && b.y > e.y ) { e.hitFlash = 2; e.alive = false; b.y = -999; } } } // ★ 敵が全滅したら点滅モードに入る if (!isBlinking && this.enemies.every(e => !e.alive)) { isBlinking = true; // ★ 青い四角の出現を遅らせる blueDelay = blueDelayFrames; // ← 15フレーム遅延 // ★ 青い四角のアニメ初期化 blueScale = blueScaleStart; blueScaleTimer = blueScaleFrames; // ★ 青い四角のフェードイン初期化 blueAlpha = blueAlphaStart; blueAlphaTimer = blueAlphaFrames; // ★ LED_CUBE1 のときだけ倍速（＝フレーム数を半分） if (currentSize === "LED_CUBE1") { blueScaleTimer = floor(blueScaleFrames / 2); blueAlphaTimer = floor(blueAlphaFrames / 2); } } } draw() { let g = this.g; g.background(0); // 背景スクエア g.noStroke(); for (let s of this.bgSquares) { let blinkValue = sin(frameCount * s.blink); if (blinkValue > 0) g.fill(...s.col); else g.fill(s.col[0], s.col[1], s.col[2], 0); g.rect(s.x, s.y, s.size, s.size * 2); } // 自機 g.fill(0, 200, 255); g.rect(this.player.x, this.player.y, this.player.w, this.player.h); // 自機の頭 let headW = this.player.w * 0.3; let headH = this.player.h * 0.6; let headX = this.player.x + this.player.w / 2 - headW / 2 + headW * 0.1; let headY = this.player.y - headH; g.rect(headX, headY, headW, headH); // 弾 g.fill(255); for (let b of this.bullets) g.rect(b.x, b.y, 4, 10); // ★ 点滅モード中は40フレームごとに画像を切り替える if (isBlinking) { let blinkInterval = 40; 223 // LED_CUBE1 のときだけ倍速（＝半分の間隔） if (currentSize === "LED_CUBE1") { blinkInterval = 20; } if (floor(frameCount / blinkInterval) % 2 === 0) { bgImg = bgImgA; } else { bgImg = bgImgB; } } // ★ 敵全体の後ろに置く赤い四角 let bgW = this.size * 0.878; // 幅 let bgH = this.size * 0.22; // 高さ let bgX = this.size * 0.5 - bgW / 2; // ★ 横方向の中央 let bgY = this.size * 0.167; // Y位置はそのまま g.fill(255, 0, 0, 0); // 赤（半透明） g.rect(bgX, bgY, bgW, bgH, 10); // ★ 赤い四角に画像を貼る if (bgImg) { g.image(bgImg, bgX, bgY, bgW, bgH); } // ★ 敵全滅時に表示する青い四角（画像 + 縮小アニメ） if (isBlinking && blueImg) { // ★ 遅延中は青い四角だけ描かない（return は使わない） if (blueDelay > 0) { blueDelay--; } else { } // ★ スケールアニメ（15フレームで 1.4 → 1.0） if (blueScaleTimer > 0) { let t = 1 - (blueScaleTimer / blueScaleFrames); // 0→1 blueScale = lerp(blueScaleStart, 1.0, t); blueScaleTimer--; } // ★ フェードインアニメ（透明 → 不透明） if (blueAlphaTimer > 0) { let t = 1 - (blueAlphaTimer / blueAlphaFrames); blueAlpha = lerp(blueAlphaStart, 255, t); blueAlphaTimer--; } // ★ 基本サイズ let baseW = this.size * 0.55; let baseH = this.size * 0.1; // ★ スケール適用 let w = baseW * blueScale; let h = baseH * blueScale; // ★ 中央に配置 let x = this.size * 0.5 - w / 2; let y = this.size * 0.5; // 赤い四角の下あたりに配置 // 背景の青い四角（半透明） g.fill(0, 120, 255, 0); g.rect(x, y, w, h, 10); // ★ 画像を貼る（透明度を反映） g.tint(255, blueAlpha); g.image(blueImg, x, y, w, h); g.noTint(); } // 敵 for (let e of this.enemies) { if (!e.alive) { if (e.hitFlash > 0) { g.fill(150); g.rect(e.x, e.y, e.w, e.h); e.hitFlash--; } continue; } if (e.img) g.image(e.img, e.x, e.y, e.w, e.h); else { g.fill(0, 255, 100); g.rect(e.x, e.y, e.w, e.h); } } } } // 個別Graphics管理クラス class GraphicsLayer { constructor(size, index, shape, spec) { this.size = size; this.graphics = createGraphics(size, size); this.game = sharedGame; this.shape = shape; this.spec = spec; // ★ これで正しく動く // ★ 初期フレームを貼っておく（背景消失対策） this.graphics.image(this.game.g, 0, 0, this.size, this.size); } draw() { let g = this.graphics; // ★ 背景スクエアだけ表示するタイル一覧 const isBGOnly = this.shape && ( // --- LED_CUBE1 --- (this.spec === CUBE_SPEC_1 && (this.shape.name === "r1" || this.shape.name === "r4" || this.shape.name === "p1")) || // --- LED_CUBE2 --- (this.spec === CUBE_SPEC_2 && this.shape.name === "r5") || // --- LED_CUBE3 --- // ★ r1 は通常画面に戻す // ★ r2 / p1 / p2 を背景スクエア専用にする (this.spec === CUBE_SPEC_3 && (this.shape.name === "r2" || this.shape.name === "p1" || this.shape.name === "p2")) ); // ★ 背景スクエア専用描画 if (isBGOnly) { g.clear(); g.background(0); // ★ InvaderGame の背景スクエアは 720×720 基準 // ★ GraphicsLayer は spec.size（例：288）なのでスケール変換 let scaleFactor = this.size / this.game.size; // LED_CUBE3 → 288 / 720 = 0.4 g.push(); g.scale(scaleFactor); g.noStroke(); for (let s of this.game.bgSquares) { let blinkValue = sin(frameCount * s.blink); if (blinkValue > 0) g.fill(...s.col); else g.fill(s.col[0], s.col[1], s.col[2], 0); g.rect(s.x, s.y, s.size, s.size * 2); } g.pop(); return; } // ★ 通常ゲーム画面 g.image(this.game.g, 0, 0, this.size, this.size); } } // GraphicsLayer配列を作成 function createGraphicsLayers() { // 既存のLayersを削除 removeGraphicsLayers(); if (!active.spec) { console.log("createGraphicsLayers: active.specが未定義"); return; } const graphicsSize = active.spec.size; console.log( "createGraphicsLayers: graphicsSize =", graphicsSize, "currentSize =", currentSize ); if (!currentSize) { // フルスクリーンモードの場合は6個のGraphicsLayerを作成 console.log("フルスクリーンモード - 6個のGraphicsLayerを作成"); for (let i = 0; i < 6; i++) { const layer = new GraphicsLayer(graphicsSize, i, null, active.spec); graphicsLayers.push(layer); } } else { // 通常モードの場合は形状数分のGraphicsLayerを作成 const numShapes = active.shapes.length; console.log("通常モード -", numShapes, "個のGraphicsLayerを作成"); for (let i = 0; i < numShapes; i++) { const layer = new GraphicsLayer( graphicsSize, i, active.shapes[i], active.spec // ★ これを追加 ); graphicsLayers.push(layer); } } console.log("createGraphicsLayers完了 - 作成数:", graphicsLayers.length); } // GraphicsLayer配列を削除 function removeGraphicsLayers() { graphicsLayers.forEach((layer) => { if (layer && layer.remove) { layer.remove(); } }); graphicsLayers = []; currentLayerIndex = 0; } // ウィンドウリサイズ時の処理 function windowResized() { // URLパラメータが設定されていない場合のみcanvasをリサイズ if (!currentSize || !CANVAS_SIZES[currentSize]) { resizeCanvas(windowWidth, windowHeight); console.log(`Canvasリサイズ: ${windowWidth}x${windowHeight}`); } } //------------------------------------- // ユーティリティここから // レイアウト参考画像の読み込み function preload() { enemyImg = loadImage("https://stat.neort.io/externalResource/d8eefdh3k37jh9v3jf40.png"); bgImgDefault = loadImage("https://stat.neort.io/externalResource/d8eefgh3k37jh9v3jfa0.png"); // 通常 bgImgA = loadImage("https://stat.neort.io/externalResource/d8eeffh3k37jh9v3jf80.png"); // 点滅1 bgImgB = loadImage("https://stat.neort.io/externalResource/d8eefg13k37jh9v3jf90.png"); // 点滅2 blueImg = loadImage("https://stat.neort.io/externalResource/d8eefh13k37jh9v3jfb0.png"); // ← 任意の画像 bgImg = bgImgDefault; // 初期状態 // ★ デバッグ画像 if (debugMode) { try { image1 = loadImage("https://stat.neort.io/externalResource/d8eefe13k37jh9v3jf50.png"); } catch (e) {} try { image2 = loadImage("https://stat.neort.io/externalResource/d8eefeh3k37jh9v3jf60.png"); } catch (e) {} try { image3 = loadImage("https://stat.neort.io/externalResource/d8eeff13k37jh9v3jf70.png"); } catch (e) {} } } // レイアウト参考画像の描画（draw関数内） function drawDebugMode() { if (debugMode) { if (image1 && image1.width > 0 && currentSize === "LED_CUBE1") { image(image1, 0, 0, width, height); } else if (image2 && image2.width > 0 && currentSize === "LED_CUBE2") { image(image2, 0, 0, width, height); } else if (image3 && image3.width > 0 && currentSize === "LED_CUBE3") { image(image3, 0, 0, width, height); } } } // キーボードでLED_CUBEのサイズを変更（1-4キー） function keyPressed() { // キーボードでサイズを切り替え if (key === "1") { currentSize = "LED_CUBE1"; setActive(1); } else if (key === "2") { currentSize = "LED_CUBE2"; setActive(2); } else if (key === "3") { currentSize = "LED_CUBE3"; setActive(3); } else if (key === "4") { currentSize = ""; // フルスクリーンレイアウト setActive(4); } // GraphicsLayer配列の切り替え if (key === "1" || key === "2" || key === "3" || key === "4") { updateURLAndCanvas(); // フルスクリーンモードの場合は少し遅延してGraphicsLayerを作成 if (key === "4") { setTimeout(() => { createGraphicsLayers(); console.log("4キー - GraphicsLayers作成完了:", graphicsLayers.length); }, 100); } else { createGraphicsLayers(); } } // レイヤーの切り替え（左右矢印キー） if (keyCode === LEFT_ARROW) { if (graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex - 1 + graphicsLayers.length) % graphicsLayers.length; console.log( `レイヤー切り替え: ${currentLayerIndex + 1}/${graphicsLayers.length}` ); } } if (keyCode === RIGHT_ARROW) { if (graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex + 1) % graphicsLayers.length; console.log( `レイヤー切り替え: ${currentLayerIndex + 1}/${graphicsLayers.length}` ); } } // スペースキーで現在のレイヤーのアクティブ状態を切り替え if (key === " ") { if (graphicsLayers.length > 0 && graphicsLayers[currentLayerIndex]) { graphicsLayers[currentLayerIndex].toggleActive(); console.log( `レイヤー ${currentLayerIndex + 1} のアクティブ状態を切り替え` ); } } background(0); } // アクティブなLEDキューブを設定 function setActive(n) { if (n === 1) active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; if (n === 2) active = { shapes: LED_CUBE2, spec: CUBE_SPEC_2 }; if (n === 3) active = { shapes: LED_CUBE3, spec: CUBE_SPEC_3 }; if (n === 4) { // フルスクリーン用の設定を動的に計算 createFullscreenLayout(); active = { shapes: LED_CUBE4, spec: CUBE_SPEC_4 }; console.log("フルスクリーンモード設定完了:", active); // フルスクリーンモードの場合はGraphicsLayerを即座に作成 setTimeout(() => { createGraphicsLayers(); console.log( "setActive(4) - GraphicsLayers作成完了:", graphicsLayers.length ); }, 50); } } //クエリパラメーターでLED_CUBEのサイズを変更 function createCanvasSetup() { // クエリパラメータからサイズを取得 const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]) { currentSize = sizeParam; // アクティブなLEDキューブを設定 if (sizeParam === "LED_CUBE1") setActive(1); if (sizeParam === "LED_CUBE2") setActive(2); if (sizeParam === "LED_CUBE3") setActive(3); } else { // URLパラメータが指定されていない場合はフルスクリーンレイアウト currentSize = ""; } createCanvasWithSize(); //キャンバスサイズの設定 // フルスクリーンモードの場合はキャンバス作成後にレイアウトを設定 if (!currentSize) { setActive(4); } } //URLParamsを更新してキャンバスサイズを変更 function updateURLAndCanvas() { // URLパラメータを更新 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() { let size; if (currentSize && CANVAS_SIZES[currentSize]) { size = CANVAS_SIZES[currentSize]; } else { // URLパラメータが設定されていない場合はwindowWidthとwindowHeightを使用 size = { width: windowWidth, height: windowHeight }; } // 既存のキャンバスを削除 if (window.canvas) { window.canvas.remove(); } // キャンバスを作成 pixelDensity(1); createCanvas(size.width, size.height); console.log( `Canvasサイズ変更 : ${currentSize || "screen"} (${size.width}x${ size.height })` ); } // ======== LEDキューブ形状処理ユーティリティ ======== // rect/polyをポリゴン配列に正規化 function toPolygon(item) { return item.type === "rect" ? rectToPoly(item) : item.points; } // 矩形をポリゴンに変換 const rectToPoly = ({ x, y, w, h }) => [ [x, y], [x + w, y], [x + w, y + h], [x, y + h], ]; // クリッピング適用 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(); } // フルスクリーンレイアウトの作成 function createFullscreenLayout() { const screenWidth = windowWidth; const screenHeight = windowHeight; // 既存のデータをクリア LED_CUBE4 = []; CUBE_SPEC_4 = null; // Graphicsサイズを画面幅の1/4に固定 const graphicsSize = screenWidth / 4; // 画面を覆い尽くす格子を計算 const gridCols = ceil(screenWidth / graphicsSize); const gridRows = ceil(screenHeight / graphicsSize); // 格子状にタイルを作成（正しく敷き詰める） LED_CUBE4 = []; for (let row = 0; row < gridRows; row++) { for (let col = 0; col < gridCols; col++) { // ランダムにGraphicsLayerのインデックスを選択（0-5の範囲） const randomIndex = floor(random(6)); 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: randomIndex % 6, // 確実に0-5の範囲に制限 }); } } // デバッグ: layerIndexの範囲を確認 let minLayerIndex = Infinity, maxLayerIndex = -Infinity; LED_CUBE4.forEach((tile) => { minLayerIndex = min(minLayerIndex, tile.layerIndex); maxLayerIndex = max(maxLayerIndex, tile.layerIndex); }); console.log( `layerIndex範囲: ${minLayerIndex} - ${maxLayerIndex} (6個のGraphicsLayerを使用)` ); // スペックを設定 CUBE_SPEC_4 = { w: screenWidth, h: screenHeight, size: graphicsSize, }; console.log( `フルスクリーンレイアウト作成: ${screenWidth}x${screenHeight}, 格子: ${gridCols}×${gridRows}, Graphicsサイズ: ${graphicsSize}, タイル数: ${LED_CUBE4.length}` ); } // LEDキューブの形状定義 // 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; // 現在アクティブなLEDキューブの設定 let active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; // ユーティリティここまで //-------------------------------------

真夏の空のブロックくずし