// JSコードを貼り付け //------------------------------------- // プロジェクトの基本設定ここから 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; // 現在のLEDキューブのサイズ let currentSize = ""; // GraphicsLayer配列の管理 let graphicsLayers = []; let currentLayerIndex = 0; // プロジェクトの基本設定ここまで //------------------------------------- const PIXEL_CANVAS_SIZE = 100; let currentPixelGraphics = null; const KINDS = ["stripes", "bounce", "diag", "wave", "sparkle"]; const PALETTES1 = [ { colors: ['#00E436','#FCBCB0'], bg: '#C5DDFF' }, { colors: ['#00B8FF','#FF77A8'], bg: '#FFA8E1' }, { colors: ['#FFEC27','#FF40FF'], bg: '#FEE761' }, ]; const PALETTES2 = [ { colors: ['#DFFCC0','#76FF03'], bg: '#76FF85' }, { colors: ['#29ADFF','#FFE8F0'], bg: '#FF0044' }, { colors: ['#DCFC1A','#FF004D'], bg: '#3E8948' }, ]; const PALETTES3 = [ { colors: ['#FFF200','#F77622'], bg: '#B8F818' }, { colors: ['#B55088','#262B44'], bg: '#FEAE34' }, { colors: ['#FFA300','#D500F9'], bg: '#FFCCAA' }, ]; const PALETTES4 = [ { colors: ['#68386C','#00C04D'], bg: '#0099DB' }, { colors: ['#C71585','#FFF5C2'], bg: '#DC143C' }, { colors: ['#E5D5FF','#00FFFF'], bg: '#E43B44' }, ]; const PALETTES5 = [ { colors: ['#63C74D','#C0CBDC'], bg: '#00FF99' }, { colors: ['#D77643','#2CE8F5'], bg: '#FF6FB5' }, { colors: ['#ADFF2F','#FF00FF'], bg: '#FF6B00' }, ]; const BAYER64 = [ [ 0,48,12,60, 3,51,15,63], [32,16,44,28,35,19,47,31], [ 8,56, 4,52,11,59, 7,55], [40,24,36,20,43,27,39,23], [ 2,50,14,62, 1,49,13,61], [34,18,46,30,33,17,45,29], [10,58, 6,54, 9,57, 5,53], [42,26,38,22,41,25,37,21], ]; const HOLD_FRAMES = 6; const SPEED_FOR_KIND = { stripes: 0.2, diag: 0.2, bounce: 0.2, sparkle: 0.2, wave: 0.2, }; function _hexLum(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return 0.299 * r + 0.587 * g + 0.114 * b; } function _collectColorPool() { const pool = []; for (const palettes of [PALETTES1, PALETTES2, PALETTES3, PALETTES4, PALETTES5]) { for (const p of palettes) pool.push(...p.colors, p.bg); } return pool; } function _sampleColors(pool, n) { const a = pool.slice(); const take = Math.min(n, a.length); for (let i = 0; i < take; i++) { const j = i + Math.floor(Math.random() * (a.length - i)); [a[i], a[j]] = [a[j], a[i]]; } return a.slice(0, take); } function _buildVariant() { const trio = _sampleColors(_collectColorPool(), 3); trio.sort((a, b) => _hexLum(a) - _hexLum(b)); return { colors: [trio[0], trio[1]], bg: trio[2] }; } function _buildRandomPalette() { const nine = _sampleColors(_collectColorPool(), 9); const palette = []; for (let i = 0; i < 3; i++) { const trio = [nine[i * 3], nine[i * 3 + 1], nine[i * 3 + 2]]; trio.sort((a, b) => _hexLum(a) - _hexLum(b)); palette.push({ colors: [trio[0], trio[1]], bg: trio[2] }); } return palette; } function ditherPixel_left(x, y, brightness, pi, palette) { const pal = palette[pi]; const t = (BAYER64[x % 8][y % 8] + 0.5) / 64; if (brightness > 0.03 + t * 0.33) return pal.bg; if (brightness > 0.01 + t * 0.33) return pal.colors[1]; return pal.colors[0]; } function ditherPixel_right(x, y, brightness, pi, palette) { const pal = palette[pi]; const t = (BAYER64[x % 8][y % 8] + 0.5) / 64; if (brightness > 0.66 + t * 0.33) return pal.bg; if (brightness > 0.33 + t * 0.33) return pal.colors[1]; return pal.colors[0]; } function ditherPixel_strong(x, y, brightness, pi, palette) { const pal = palette[pi]; const t = (BAYER64[x % 8][y % 8] + 0.5) / 64; if (brightness > 0.66 + t) return pal.bg; if (brightness > 0.33 + t) return pal.colors[1]; return pal.colors[0]; } function paint(x, y, c) { const g = currentPixelGraphics; if (!g) return; if (x < 0 || x >= g.width || y < 0 || y >= g.height) return; const i = (y * g.width + x) * 4; g.pixels[i] = red(c); g.pixels[i + 1] = green(c); g.pixels[i + 2] = blue(c); g.pixels[i + 3] = 255; } function sortKey(e) { return (e.r + e.g + e.b) / 3; } function setup() { createCanvasSetup(); console.log("Setup完了 - active:", active); console.log("currentSize:", currentSize); createGraphicsLayers(); console.log("GraphicsLayers作成完了 - 数:", graphicsLayers.length); if (!currentSize && active.shapes) { console.log("フルスクリーンモード - タイル数:", active.shapes.length); console.log("タイル例:", active.shapes[0]); // タイルの配置範囲を確認 let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; active.shapes.forEach((shape) => { minX = min(minX, shape.img_x); maxX = max(maxX, shape.img_x + shape.w); minY = min(minY, shape.img_y); maxY = max(maxY, shape.img_y + shape.h); }); console.log(`タイル配置範囲: X(${minX} to ${maxX}), Y(${minY} to ${maxY})`); console.log(`Canvasサイズ: ${width}x${height}`); } } function draw() { background(0, 20); drawDebugMode(); // デバッグ用LEDキューブのレイアウト参考画像の描画 if (graphicsLayers.length > 0) { // レイヤーの計算・描画処理を実行 for (let i = 0; i < graphicsLayers.length; i++) { let layer = graphicsLayers[i]; layer.update(); layer.draw(); } // メインキャンバスに描画 for (let i = 0; i < active.shapes.length; i++) { let shape = active.shapes[i]; let layerIndex = shape.layerIndex || i; // フルスクリーンモードではlayerIndexを使用 // 確実に0-5の範囲に制限 layerIndex = layerIndex % 6; if (layerIndex < graphicsLayers.length) { let layer = graphicsLayers[layerIndex]; if (shape.type === "rect") { image( layer.graphics, shape.img_x, shape.img_y, layer.graphics.width, layer.graphics.height ); // デバッグ用：タイルの境界を描画 if (debugMode) { noFill(); stroke(255, 0, 0); strokeWeight(1); rect( shape.img_x, shape.img_y, layer.graphics.width, layer.graphics.height ); } else { noStroke(); } } else if (shape.type === "poly") { push(); if (debugMode) { stroke(255, 0, 0); } else { noStroke(); } clipPolygon(shape.points); drawingContext.clip(); image( layer.graphics, shape.img_x, shape.img_y, layer.graphics.width, layer.graphics.height ); pop(); } } else { // デバッグ用：layerIndexが範囲外の場合 if (debugMode && frameCount % 60 === 0) { // 1秒に1回のみ表示 console.log( `警告: layerIndex ${layerIndex} が範囲外 (最大: ${ graphicsLayers.length - 1 }), shape:`, shape ); } } } } else { // デバッグ用：GraphicsLayerが存在しない場合 if (debugMode && frameCount % 60 === 0) { // 1秒に1回のみ表示 console.log("警告: GraphicsLayerがない"); } } } // 個別Graphics管理クラス class GraphicsLayer { constructor(size, index, shape) { //クラスの変更しないほうがいいプロパティ this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = false; //ここに初期化のコードを書く this.pixelCanvas = createGraphics(PIXEL_CANVAS_SIZE, PIXEL_CANVAS_SIZE); this.pixelCanvas.pixelDensity(1); this.pixelCanvas.noSmooth(); this.kind = KINDS[index % KINDS.length]; this.palette = _buildRandomPalette(); this.speed = SPEED_FOR_KIND[this.kind] || 0.5; this.t = 0; this.sortEdge = 0; this.dir = 1; this.fromIdx = 0; this.toIdx = 0; this.hold = 0; } paletteIdxAt(coord) { if (this.dir < 0 && coord >= this.sortEdge) return this.toIdx; return this.fromIdx; } _advanceSortState() { if (this.hold > 0) { this.hold--; return; } this.sortEdge += this.dir * this.speed; if (this.sortEdge >= PIXEL_CANVAS_SIZE) { this.sortEdge = PIXEL_CANVAS_SIZE; this.toIdx = (this.fromIdx + 1) % this.palette.length; this.dir = -1; this.hold = HOLD_FRAMES; } else if (this.sortEdge <= 0) { this.sortEdge = 0; this.fromIdx = this.toIdx; this.dir = 1; this._refreshIdlePaletteSlots(); } } _refreshIdlePaletteSlots() { for (let i = 0; i < this.palette.length; i++) { if (i === this.fromIdx) continue; this.palette[i] = _buildVariant(); } } // このレイヤーの計算処理 update() { this.t += 1; } // このレイヤーの描画処理 draw() { const p = this.pixelCanvas; currentPixelGraphics = p; p.background(this.palette[this.fromIdx].bg); p.loadPixels(); switch (this.kind) { case "bounce": this.drawDitherSort2(); break; case "stripes": this.drawDitherSort1(); break; case "diag": this.drawDitherSort3(); break; case "wave": this.drawDitherSort4(); break; case "sparkle": this.drawDitherSort5(); break; } p.updatePixels(); const g = this.graphics; g.noSmooth(); g.image(p, 0, 0, g.width, g.height); } drawDitherSort1() { const p = this.pixelCanvas; if (this.dir < 0) { const c = color(this.palette[this.toIdx].bg); for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { for (let x = ceil(this.sortEdge); x < PIXEL_CANVAS_SIZE; x++) { paint(x, y, c); } } } const yOffset = sin(frameCount * 0.02) * 15; for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const pi = this.paletteIdxAt(x); const topEdge = 30 + yOffset + sin(x * 0.2) * 8; if (y > topEdge && y < PIXEL_CANVAS_SIZE) { const brightness = 1 - (y - topEdge) / (70 - topEdge); paint(x, y, color(ditherPixel_left(x, y, brightness, pi, this.palette))); } } } for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const rowPixels = []; for (let x = 0; x < this.sortEdge; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; rowPixels.push({ r: p.pixels[i], g: p.pixels[i + 1], b: p.pixels[i + 2], a: p.pixels[i + 3], }); } rowPixels.sort((a, b) => sortKey(b) - sortKey(a)); for (let x = 0; x < this.sortEdge; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; p.pixels[i] = rowPixels[x].r; p.pixels[i + 1] = rowPixels[x].g; p.pixels[i + 2] = rowPixels[x].b; p.pixels[i + 3] = rowPixels[x].a; } } this._advanceSortState(); } drawDitherSort3() { const p = this.pixelCanvas; if (this.dir < 0) { const c = color(this.palette[this.toIdx].bg); for (let y = ceil(this.sortEdge); y < PIXEL_CANVAS_SIZE; y++) { for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { paint(x, y, c); } } } const numX1 = floor(cos(frameCount * 0.02) * 10 + 30); const num = floor(cos(frameCount * 0.02) * 50 + 100); const num2 = floor(cos(frameCount * 0.02) * 50 + 100); for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const pi = this.paletteIdxAt(y); for (let x = numX1; x < PIXEL_CANVAS_SIZE; x++) { const brightness = 1 - (x - 10) / num; paint(x, y, color(ditherPixel_right(x, y, brightness, pi, this.palette))); } } for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const pi = this.paletteIdxAt(y); for (let x = 0; x < numX1; x++) { const brightness = (x - 10) / num2; paint(x, y, color(ditherPixel_left(x, y, brightness, pi, this.palette))); } } for (let y = 0; y < this.sortEdge; y++) { const rowPixels = []; for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; rowPixels.push({ r: p.pixels[i], g: p.pixels[i + 1], b: p.pixels[i + 2], a: p.pixels[i + 3], }); } rowPixels.sort((a, b) => sortKey(b) - sortKey(a)); for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; p.pixels[i] = rowPixels[x].r; p.pixels[i + 1] = rowPixels[x].g; p.pixels[i + 2] = rowPixels[x].b; p.pixels[i + 3] = rowPixels[x].a; } } this._advanceSortState(); } drawDitherSort2() { const p = this.pixelCanvas; if (this.dir < 0) { const c = color(this.palette[this.toIdx].bg); for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { for (let x = ceil(this.sortEdge); x < PIXEL_CANVAS_SIZE; x++) { paint(x, y, c); } } } const numY1 = PIXEL_CANVAS_SIZE - floor(cos(frameCount * 0.02) * 10 + 30); const num = floor(cos(frameCount * 0.02) * 50 + 100); const num2 = floor(cos(frameCount * 0.02) * 50 + 100); for (let y = 0; y < numY1; y++) { for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const pi = this.paletteIdxAt(x); const brightness = 1 - (PIXEL_CANVAS_SIZE - 1 - y - 10) / num; paint(x, y, color(ditherPixel_right(x, y, brightness, pi, this.palette))); } } for (let y = numY1; y < PIXEL_CANVAS_SIZE; y++) { for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const pi = this.paletteIdxAt(x); const brightness = (PIXEL_CANVAS_SIZE - 1 - y - 10) / num2; paint(x, y, color(ditherPixel_left(x, y, brightness, pi, this.palette))); } } for (let x = 0; x < this.sortEdge; x++) { const colPixels = []; for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; colPixels.push({ r: p.pixels[i], g: p.pixels[i + 1], b: p.pixels[i + 2], a: p.pixels[i + 3], }); } colPixels.sort((a, b) => sortKey(b) - sortKey(a)); for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; p.pixels[i] = colPixels[y].r; p.pixels[i + 1] = colPixels[y].g; p.pixels[i + 2] = colPixels[y].b; p.pixels[i + 3] = colPixels[y].a; } } this._advanceSortState(); } drawDitherSort4() { const p = this.pixelCanvas; if (this.dir < 0) { const c = color(this.palette[this.toIdx].bg); for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { for (let x = ceil(this.sortEdge); x < PIXEL_CANVAS_SIZE; x++) { paint(x, y, c); } } } for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const brightness = (sin(y * -0.1 + frameCount * 0.02) + 1) / 2; for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const pi = this.paletteIdxAt(x); paint(x, y, color(ditherPixel_strong(x, y, brightness, pi, this.palette))); } } for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const rowPixels = []; for (let x = 0; x < this.sortEdge; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; rowPixels.push({ r: p.pixels[i], g: p.pixels[i + 1], b: p.pixels[i + 2], a: p.pixels[i + 3], }); } rowPixels.sort((a, b) => sortKey(b) - sortKey(a)); for (let x = 0; x < this.sortEdge; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; p.pixels[i] = rowPixels[x].r; p.pixels[i + 1] = rowPixels[x].g; p.pixels[i + 2] = rowPixels[x].b; p.pixels[i + 3] = rowPixels[x].a; } } this._advanceSortState(); } drawDitherSort5() { const p = this.pixelCanvas; if (this.dir < 0) { const c = color(this.palette[this.toIdx].bg); for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { for (let x = ceil(this.sortEdge); x < PIXEL_CANVAS_SIZE; x++) { paint(x, y, c); } } } const yOffset = sin(frameCount * 0.02) * 10; for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { for (let x = 0; x < PIXEL_CANVAS_SIZE; x++) { const pi = this.paletteIdxAt(x); const topEdge = 30 + yOffset + sin(x * 0.2 + frameCount * 0.02) * 8; if (y > topEdge && y < PIXEL_CANVAS_SIZE) { const brightness = 1 - (y - topEdge) / (70 + yOffset - topEdge); paint(x, y, color(ditherPixel_left(x, y, brightness, pi, this.palette))); } } } for (let y = 0; y < PIXEL_CANVAS_SIZE; y++) { const rowPixels = []; for (let x = 0; x < this.sortEdge; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; rowPixels.push({ r: p.pixels[i], g: p.pixels[i + 1], b: p.pixels[i + 2], a: p.pixels[i + 3], }); } rowPixels.sort((a, b) => sortKey(b) - sortKey(a)); for (let x = 0; x < this.sortEdge; x++) { const i = (y * PIXEL_CANVAS_SIZE + x) * 4; p.pixels[i] = rowPixels[x].r; p.pixels[i + 1] = rowPixels[x].g; p.pixels[i + 2] = rowPixels[x].b; p.pixels[i + 3] = rowPixels[x].a; } } this._advanceSortState(); } // レイヤーを削除 remove() { if (this.graphics && this.graphics.remove) { this.graphics.remove(); } if (this.pixelCanvas && this.pixelCanvas.remove) { this.pixelCanvas.remove(); } } // アクティブ状態を切り替え toggleActive() { this.isActive = !this.isActive; } } // 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); 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]); 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() { // 画像を読み込む（ファイルが存在しない場合エラー回避） 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 の読み込みをスキップ"); } } } // レイアウト参考画像の描画（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 }; // ユーティリティここまで //-------------------------------------