//------------------------------------- // プロジェクトの基本設定ここから 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 = ""; let stackingGame; // GraphicsLayer配列の管理 let graphicsLayers = []; let currentLayerIndex = 0; let fruitImages = []; const DEAD_EMOJI = ' '; const FRUIT_EMOJIS = ['🍎', '🍊', '🍌', '🍉', '🍇', '🍓', '🍑', '🍍']; const FRUIT_IMAGE_URLS = [ 'https://stat.neort.io/externalResource/d2f31f6dkg0sehilllfg.png', 'https://stat.neort.io/externalResource/d2f31g6dkg0sehilllgg.png', 'https://stat.neort.io/externalResource/d2f31hedkg0sehilllhg.png', 'https://stat.neort.io/externalResource/d2f4aoedkg0sehilllrg.png', 'https://stat.neort.io/externalResource/d2f31iedkg0sehilllig.png', 'https://stat.neort.io/externalResource/d2f31j6dkg0sehillljg.png', 'https://stat.neort.io/externalResource/d2f31kedkg0sehilllkg.png', 'https://stat.neort.io/externalResource/d2f31lmdkg0sehillllg.png', ]; const LED_URL = ['https://stat.neort.io/externalResource/d2fssiudkg0sehillur0.png']; let ledImages = []; let squareImage; // 回転させる四角形の画像を格納 const RESET_INTERVAL = 20000; // 30秒ごとにリセット // プロジェクトの基本設定ここまで //------------------------------------- function preload() { // フルーツ画像を読み込む for (let i = 0; i < FRUIT_IMAGE_URLS.length; i++) { fruitImages[i] = loadImage(FRUIT_IMAGE_URLS[i], () => console.log(`フルーツ画像 ${i} の読み込み成功`), () => console.warn(`フルーツ画像 ${i} の読み込みに失敗`) ); } try { squareImage = loadImage('https://stat.neort.io/externalResource/d2fs7emdkg0sehillu3g.png', () => console.log('square.png の読み込み成功'), () => console.warn('square.png の読み込みに失敗') ); } catch (e) { console.log("square.pngの読み込みをスキップ"); } for (let i = 0; i < LED_URL.length; i++) { ledImages[i] = loadImage(LED_URL[i], () => console.log(`LED画像 ${i} の読み込み成功`), () => console.warn(`LED画像 ${i} の読み込みに失敗`) ); } // デバッグ用レイアウト画像を読み込む if (debugMode) { try { image1 = loadImage("images/LED_CUBE1.png"); image2 = loadImage("images/LED_CUBE2.png"); image3 = loadImage("images/LED_CUBE3.png"); } catch (e) { console.log("デバッグ画像の読み込みをスキップ"); } } } function createGraphicsLayers() { removeGraphicsLayers(); if (!active.spec) return; const graphicsSize = active.spec.size; if (!currentSize) { console.log("フルスクリーンモード - 6個のDefaultLayerを作成"); graphicsLayers.push(new LifeGameLayer(graphicsSize, 0, null)); graphicsLayers.push(new ImageGameLayer(graphicsSize, 1, null)); graphicsLayers.push(new FallingShapesLayer(graphicsSize, 2, null)); } else { const numShapes = active.shapes.length; console.log("通常モード -", numShapes, "個のGraphicsLayerを作成（振り分けあり）"); for (let i = 0; i < numShapes; i++) { const shape = active.shapes[i]; const name = shape.name; let layer; if ( (currentSize === 'LED_CUBE1' && (name === 'r3')) || (currentSize === 'LED_CUBE2' && (name === 'r2' || name === 'r4')) || (currentSize === 'LED_CUBE3' && name === 'r1') ) { layer = new LifeGameLayer(graphicsSize, i, shape); } else if (currentSize === 'LED_CUBE1' && (name === 'r1')) { layer = new ImageGameLayer(graphicsSize, i, shape); } else if ( (currentSize === 'LED_CUBE1' && name === 'p1') || (currentSize === 'LED_CUBE2' && name === 'r5') || (currentSize === 'LED_CUBE3' && name === 'r2')) { layer = new RandomFruitLayer(graphicsSize, i, shape); } else if (currentSize === 'LED_CUBE1' && (name === 'r2' || name === 'r4') || (currentSize === 'LED_CUBE2' && (name === 'r1' || name === 'r3')) || (currentSize === 'LED_CUBE3' && (name === 'p1' || name === 'p2')) || (currentSize === 'LED_CUBE4' && name === 'r1')) { layer = new FallingShapesLayer(graphicsSize, i, shape); } else { layer = new DefaultLayer(graphicsSize, i, shape); } graphicsLayers.push(layer); shape.layer = layer; } } } function removeGraphicsLayers() { graphicsLayers.forEach(layer => layer.remove()); graphicsLayers = []; currentLayerIndex = 0; } function setup() { createCanvasSetup(); setTimeout(createGraphicsLayers, 10); console.log("Setup完了"); } function draw() { background(0,0,0,0); drawDebugMode(); if (graphicsLayers.length > 0) { // レイヤーの計算・描画処理を実行 for (let layer of graphicsLayers) { if (layer.isActive) { layer.update(); layer.draw(); } } // メインキャンバスに描画 for (let shape of active.shapes) { let layer; if (currentSize) { // 通常モードの場合 // shapeに直接紐付いたlayerを取得 layer = shape.layer; } else { // フルスクリーンモードの場合 let layerIndex = shape.layerIndex % graphicsLayers.length; layer = graphicsLayers[layerIndex]; } if (layer && layer.isActive && layer.graphics) { if (shape.type === "rect") { image(layer.graphics, shape.img_x, shape.img_y); if (debugMode) { noFill(); stroke(255, 0, 0); strokeWeight(1); 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); } else { noStroke(); } clipPolygon(shape.points); drawingContext.clip(); image(layer.graphics, shape.img_x, shape.img_y); pop(); } } } } } // ----------------------------------------------------- // 個別Graphics管理クラスその①：ライフゲーム用 // ----------------------------------------------------- // ----------------------------------------------------- // 個別Graphics管理クラスその①：ライフゲーム用 // ----------------------------------------------------- class LifeGameLayer { constructor(size, index, shape) { this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = true; const resolutionOptions = [10,20,40,60]; this.resolution = random(resolutionOptions); this.cols = floor(this.graphics.width / this.resolution); this.rows = floor(this.graphics.height / this.resolution); this.updateInterval = map(this.resolution,40,200,400,1000); this.lastUpdateTime = 0; // 最後に世代交代した時刻 this.chosenFruitIndex = floor(random(FRUIT_EMOJIS.length)); this.grid = this.createImageGrid(); this.startTime = millis(); this.lastResetTime = millis(); } createImageGrid() { let arr = new Array(this.cols); const targetImg = fruitImages[this.chosenFruitIndex]; if (!targetImg || !targetImg.width) { console.warn(`Fruit image ${this.chosenFruitIndex} is not ready.`); for (let i = 0; i < this.cols; i++) arr[i] = new Array(this.rows).fill(0); return arr; } targetImg.resize(this.graphics.width, this.graphics.height); for (let i = 0; i < this.cols; i++) { arr[i] = new Array(this.rows); for (let j = 0; j < this.rows; j++) { const x = floor(i * this.resolution); const y = floor(j * this.resolution); const c = targetImg.get(x, y); const brightness = (red(c) + green(c) + blue(c)) / 3; arr[i][j] = brightness < 210 ? FRUIT_EMOJIS[this.chosenFruitIndex] : 0; } } return arr; } update() { if (millis() - this.startTime < 8000) return; if (millis() - this.lastResetTime > RESET_INTERVAL) { this.chosenFruitIndex = floor(random(FRUIT_EMOJIS.length)); this.grid = this.createImageGrid(); this.lastResetTime = millis(); this.startTime = millis(); this.needsOpaqueDraw = true; return; } const now = millis(); if (now - this.lastUpdateTime > this.updateInterval) { this.grid = this.nextGeneration(this.grid); this.lastUpdateTime = now; // 最後に更新した時刻を記録 } } draw() { const g = this.graphics; if (this.needsOpaqueDraw) { // 目印がある時：不透明な背景で完全にクリアし、目印を戻す g.background(255, 255, 255); // アルファ値なしで不透明 this.needsOpaqueDraw = false; } else { // 通常時：半透明の背景で残像効果を出す g.background(255, 255, 255, 15); } g.textSize(this.resolution); g.textAlign(CENTER, CENTER); for (let i = 0; i < this.cols; i++) { for (let j = 0; j < this.rows; j++) { const x = i * this.resolution; const y = j * this.resolution; const emoji = this.grid[i][j] === 0 ? DEAD_EMOJI : this.grid[i][j]; g.text(emoji, x + this.resolution / 2, y + this.resolution / 2); } } } nextGeneration(currentGrid) { let nextGrid = Array(this.cols).fill(null).map(() => Array(this.rows)); for (let i = 0; i < this.cols; i++) { for (let j = 0; j < this.rows; j++) { const state = currentGrid[i][j] !== 0 ? 1 : 0; const neighbors = this.countNeighbors(currentGrid, i, j); if (state === 0 && neighbors === 3) { nextGrid[i][j] = FRUIT_EMOJIS[this.chosenFruitIndex]; } else if (state === 1 && (neighbors < 2 || neighbors > 3)) { nextGrid[i][j] = 0; } else { nextGrid[i][j] = currentGrid[i][j]; } } } return nextGrid; } countNeighbors(grid, x, y) { let sum = 0; for (let i = -1; i < 2; i++) { for (let j = -1; j < 2; j++) { if (i === 0 && j === 0) continue; const col = (x + i + this.cols) % this.cols; const row = (y + j + this.rows) % this.rows; if (grid[col][row] !== 0) sum++; } } return sum; } remove() { if (this.graphics) this.graphics.remove(); } toggleActive() { this.isActive = !this.isActive; } } // ----------------------------------------------------- // 個別Graphics管理クラスその②：デフォルト（背景）用 // ----------------------------------------------------- class DefaultLayer { constructor(size, index, shape) { this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = true; this.bgColor = color(this.index * 20, 10, 30, 200); // レイヤーごとに少し色を変える } // 計算処理はなし update() {} // ★★★ 背景を描画するだけの処理に変更 ★★★ draw() { this.graphics.background(this.bgColor); } remove() { if (this.graphics) this.graphics.remove(); } toggleActive() { this.isActive = !this.isActive; } } // ----------------------------------------------------- // 個別Graphics管理クラスその②：画像表示デバッグ用 class ImageGameLayer { constructor(size, index, shape) { this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = true; this.startTime = millis(); this.resolution = 4; this.cols = floor(this.graphics.width / this.resolution); this.rows = floor(this.graphics.height / this.resolution); this.updateInterval = 300; this.lastUpdateTime = 0; if (!currentSize) { // currentSizeが空文字ならフルスクリーンモード this.sourceImage = squareImage; } else { // それ以外は通常モード this.sourceImage = ledImages[0]; } this.cellColors = []; this.grid = this.createInitialGrid(); } // ▼▼▼ このメソッドを、マッピングを考慮した処理に修正しました ▼▼▼ createInitialGrid() { let arr = Array(this.cols).fill(null).map(() => Array(this.rows).fill(null)); if (!this.sourceImage || !this.sourceImage.width) { console.warn("LED image is not ready."); return arr; } const g = this.graphics; g.background(0); g.imageMode(CENTER); // 1. アス比を保ったまま画像が収まるサイズを計算 let imgW = this.sourceImage.width; let imgH = this.sourceImage.height; const ratio = imgW / imgH; if (g.width / ratio < g.height) { imgW = g.width; imgH = g.width / ratio; } else { imgH = g.height; imgW = g.height * ratio; } // 2. 描画する中心座標を計算（ここでマッピング調整） let drawX = g.width / 2; let drawY = g.height / 2; // このレイヤーが 'r1' の場合のみ、以前見つけた補正値(250px)を適用 if (this.shape && this.shape.name === 'r1') { drawX += 250; } // 3. 調整後の座標とサイズで、内部の描画エリアに画像を描画 g.image(this.sourceImage, drawX, drawY, imgW, imgH); // 4. 描画済みのエリアから色を読み取り、ライフゲームの盤面を生成 this.cellColors = this.extractTopColors(g, 3); for (let i = 0; i < this.cols; i++) { for (let j = 0; j < this.rows; j++) { const x = floor(i * this.resolution); const y = floor(j * this.resolution); const c = g.get(x, y); if (alpha(c) > 10 && brightness(c) > 10) { arr[i][j] = this.findClosestColor(c, this.cellColors); } } } return arr; } update() { if (millis() - this.startTime < 45000) return; const now = millis(); if (now - this.lastUpdateTime > this.updateInterval) { this.grid = this.nextGeneration(this.grid); this.lastUpdateTime = now; } } draw() { const g = this.graphics; g.background(0, 10); g.noStroke(); for (let i = 0; i < this.cols; i++) { for (let j = 0; j < this.rows; j++) { if (this.grid[i][j] !== null) { g.fill(this.grid[i][j]); g.ellipse( i * this.resolution + this.resolution / 2, j * this.resolution + this.resolution / 2, this.resolution * 0.9 ); } } } } nextGeneration(currentGrid) { let nextGrid = Array(this.cols).fill(null).map(() => Array(this.rows).fill(null)); for (let i = 0; i < this.cols; i++) { for (let j = 0; j < this.rows; j++) { const state = currentGrid[i][j] !== null ? 1 : 0; const neighbors = this.countNeighbors(currentGrid, i, j); if (state === 0 && neighbors === 3) { nextGrid[i][j] = random(this.cellColors); } else if (state === 1 && (neighbors < 2 || neighbors > 3)) { nextGrid[i][j] = null; } else { nextGrid[i][j] = currentGrid[i][j]; } } } return nextGrid; } countNeighbors(grid, x, y) { let sum = 0; for (let i = -1; i < 2; i++) { for (let j = -1; j < 2; j++) { if (i === 0 && j === 0) continue; const col = (x + i + this.cols) % this.cols; const row = (y + j + this.rows) % this.rows; if (grid[col][row] !== null) sum++; } } return sum; } extractTopColors(img, count) { const colorCounts = new Map(); img.loadPixels(); for (let i = 0; i < img.pixels.length; i += 4) { const r = img.pixels[i]; const g = img.pixels[i+1]; const b = img.pixels[i+2]; const a = img.pixels[i+3]; if (a < 128 || (r < 10 && g < 10 && b < 10) || (r > 245 && g > 245 && b > 245)) continue; const key = `${r},${g},${b}`; colorCounts.set(key, (colorCounts.get(key) || 0) + 1); } const sortedColors = [...colorCounts.entries()].sort((a, b) => b[1] - a[1]); return sortedColors.slice(0, count).map(entry => { const [r, g, b] = entry[0].split(',').map(Number); return color(r, g, b); }); } findClosestColor(target, colorList) { let closestColor = null; let minDistance = Infinity; for (const c of colorList) { const distance = dist(red(target), green(target), blue(target), red(c), green(c), blue(c)); if (distance < minDistance) { minDistance = distance; closestColor = c; } } return closestColor; } remove() { if (this.graphics) this.graphics.remove(); } toggleActive() { this.isActive = !this.isActive; } } class FallingShapesLayer { constructor(size, index, shape) { this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = true; // グリッドシステムを導入 this.resolution = 3; this.cols = floor(size / this.resolution); this.rows = floor(size / this.resolution); this.sandGrid = Array(this.rows).fill(null).map(() => Array(this.cols).fill(null)); this.masterGrids = []; this.fallingShapes = []; this.trailColor = color(255); const g = this.graphics; g.background(0); g.imageMode(CENTER); this.generateMasterGrids(); setInterval(() => { if (this.isActive && this.masterGrids.length > 0) { const randomGrid = random(this.masterGrids); if (randomGrid.length > 0) { const randomResolution = random([3, 4, 5, 6]); this.fallingShapes.push(new FallingShape(randomGrid, randomResolution, this.graphics.width)); } } }, 500); } generateMasterGrids() { const tempCanvasSize = 100; for (let emoji of FRUIT_EMOJIS) { const tempGraphics = createGraphics(tempCanvasSize, tempCanvasSize); tempGraphics.textSize(60); tempGraphics.textAlign(CENTER, CENTER); tempGraphics.text(emoji, tempCanvasSize / 2, tempCanvasSize / 2); const grid = this.createGridFromImage(tempGraphics, this.resolution); this.masterGrids.push(grid); tempGraphics.remove(); } } update() { // 落下中の図形を更新 for (let i = this.fallingShapes.length - 1; i >= 0; i--) { let shape = this.fallingShapes[i]; shape.fall(); // 地面または砂グリッドとの衝突判定 if (this.checkCollision(shape)) { this.addShapeToSandGrid(shape); this.fallingShapes.splice(i, 1); } } // 砂の物理シミュレーション this.updateSand(); } draw() { const g = this.graphics; // 背景を動的に生成した反対色で、より薄く描画 g.background(red(this.trailColor), green(this.trailColor), blue(this.trailColor), 60); for (let shape of this.fallingShapes) { shape.display(g); } // 砂グリッドを描画 this.drawSandGrid(g); } // 図形を砂グリッドに配置 addShapeToSandGrid(shape) { const startX = floor(shape.x / this.resolution); const startY = floor(shape.y / this.resolution); for (let j = 0; j < shape.gridHeight; j++) { for (let i = 0; i < shape.gridWidth; i++) { if (shape.grid[j][i]) { const gridX = startX + i; const gridY = startY + j; if (gridX >= 0 && gridX < this.cols && gridY >= 0 && gridY < this.rows) { this.sandGrid[gridY][gridX] = { color: shape.grid[j][i], size: shape.resolution }; // 配置した砂の色で残像色を更新 this.trailColor = this.getOppositeColor(shape.grid[j][i]); } } } } } // 砂の物理シミュレーション (グリッドベース) updateSand() { // 下から上にスキャンして落下させる for (let y = this.rows - 2; y >= 0; y--) { for (let x = 0; x < this.cols; x++) { const cell = this.sandGrid[y][x]; if (cell) { // 下のセルが空いているか if (this.sandGrid[y + 1][x] === null) { this.sandGrid[y + 1][x] = cell; this.sandGrid[y][x] = null; } else { // 下のセルが埋まっている場合、左右の斜め下をチェック const dir = random([-1, 1]); if (x + dir >= 0 && x + dir < this.cols && this.sandGrid[y + 1][x + dir] === null) { this.sandGrid[y + 1][x + dir] = cell; this.sandGrid[y][x] = null; } else if (x - dir >= 0 && x - dir < this.cols && this.sandGrid[y + 1][x - dir] === null) { this.sandGrid[y + 1][x - dir] = cell; this.sandGrid[y][x] = null; } } } } } } // 砂グリッドの描画 drawSandGrid(g) { g.noStroke(); for (let y = 0; y < this.rows; y++) { for (let x = 0; x < this.cols; x++) { const cell = this.sandGrid[y][x]; if (cell) { g.fill(cell.color); g.ellipse( x * this.resolution + this.resolution / 2, y * this.resolution + this.resolution / 2, cell.size, cell.size ); } } } } // 元の色から補色を計算するメソッド getOppositeColor(c) { push(); colorMode(HSB, 360, 100, 100); const h = hue(c); const s = saturation(c); const b = brightness(c); const oppositeHue = (h + 180) % 360; const oppositeColor = color(oppositeHue, s, b); pop(); return oppositeColor; } // 落下中の図形と、地面または砂グリッドとの衝突判定 checkCollision(fallingShape) { const startX = floor(fallingShape.x / this.resolution); const startY = floor(fallingShape.y / this.resolution); for (let j = 0; j < fallingShape.gridHeight; j++) { for (let i = 0; i < fallingShape.gridWidth; i++) { // 図形のグリッドにセルが存在する場合のみチェック if (fallingShape.grid[j][i]) { const gridX = startX + i; const gridY = startY + j; // 地面との衝突判定 (グリッドの最下部) if (gridY + 1 >= this.rows) { return true; } // 砂グリッド内のセルとの衝突判定 if (gridX >= 0 && gridX < this.cols && gridY + 1 >= 0 && gridY + 1 < this.rows) { if (this.sandGrid[gridY + 1][gridX] !== null) { return true; } } } } } return false; } createGridFromImage(img, resolution) { const cols = floor(img.width / resolution); const rows = floor(img.height / resolution); let tempGrid = Array(rows).fill(null).map(() => Array(cols).fill(null)); const topColors = this.extractTopColors(img, 3); if (topColors.length === 0) return [[]]; let minI = cols, maxI = -1, minJ = rows, maxJ = -1; for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { const x = floor(i * resolution); const y = floor(j * resolution); const c = img.get(x, y); if (alpha(c) > 128 && brightness(c) > 10) { tempGrid[j][i] = this.findClosestColor(c, topColors); if (i < minI) minI = i; if (i > maxI) maxI = i; if (j < minJ) minJ = j; if (j > maxJ) maxJ = j; } } } if (maxI === -1) return [[]]; let finalGrid = []; for (let j = minJ; j <= maxJ; j++) { finalGrid.push(tempGrid[j].slice(minI, maxI + 1)); } return finalGrid; } extractTopColors(img, count) { const colorCounts = new Map(); img.loadPixels(); for (let i = 0; i < img.pixels.length; i += 4) { const r = img.pixels[i], g = img.pixels[i + 1], b = img.pixels[i + 2], a = img.pixels[i + 3]; if (a < 128 || (r > 245 && g > 245 && b > 245)) continue; const key = `${r},${g},${b}`; colorCounts.set(key, (colorCounts.get(key) || 0) + 1); } const sortedColors = [...colorCounts.entries()].sort((a, b) => b[1] - a[1]); return sortedColors.slice(0, count).map(entry => { const [r, g, b] = entry[0].split(',').map(Number); const originalColor = color(r, g, b); push(); colorMode(HSB, 360, 100, 100, 1); const vibrantColor = color( hue(originalColor), 95, 100 ); pop(); return vibrantColor; }); } findClosestColor(target, colorList) { let closestColor = null; let minDistance = Infinity; for (const c of colorList) { const distance = dist(red(target), green(target), blue(target), red(c), green(c), blue(c)); if (distance < minDistance) { minDistance = distance; closestColor = c; } } return closestColor; } remove() { if (this.graphics) this.graphics.remove(); } toggleActive() { this.isActive = !this.isActive; } } // ----------------------------------------------------- // 落下する個別の図形を管理するクラス // ----------------------------------------------------- class FallingShape { constructor(grid, resolution, canvasWidth) { this.grid = grid; this.resolution = resolution; this.gridHeight = grid.length; this.gridWidth = grid[0] ? grid[0].length : 0; this.height = this.gridHeight * this.resolution; this.width = this.gridWidth * this.resolution; this.x = random(canvasWidth - this.width); this.y = -this.height; this.speed = random(2, 8); } fall() { this.y += this.speed; } display(g) { g.noStroke(); for (let j = 0; j < this.gridHeight; j++) { for (let i = 0; i < this.gridWidth; i++) { if (this.grid[j][i]) { g.fill(this.grid[j][i]); g.ellipse( this.x + i * this.resolution + this.resolution / 2, this.y + j * this.resolution + this.resolution / 2, this.resolution, this.resolution ); } } } } } // ----------------------------------------------------- // 個別Graphics管理クラス：ランダムなフルーツ「図形」表示用 // ----------------------------------------------------- class RandomFruitLayer { // クラス全体で共有する、フルーツ図形の設計図を保存する場所 static masterGrids = new Map(); constructor(size, index, shape) { this.graphics = createGraphics(size, size); this.index = index; this.shape = shape; this.isActive = true; // --- タイル名に応じた設定 --- const gridConfig = { // name: { // cols: 列数, // rows: 行数, // emojiRes: 形の細かさ, // circleSize: 描画する円の基本サイズ, // fruitScale: フルーツ全体の表示倍率 <-- 新しい設定！ // } 'r5': { cols: 2, rows: 2, emojiRes: 6, circleSize: 6, fruitScale: 2 }, 'r2': { cols: 9, rows: 6, emojiRes: 4, circleSize: 4, fruitScale: 1.0 }, 'default': { cols: 4, rows: 4, emojiRes: 2, circleSize: 2, fruitScale: 2.0 } }; const config = gridConfig[this.shape.name] || gridConfig['default']; this.gridCols = config.cols; this.gridRows = config.rows; this.emojiResolution = config.emojiRes; this.circleSize = config.circleSize; this.fruitScale = config.fruitScale; // 表示倍率をプロパティとして保存 // --- フルーツ図形の設計図を生成（初回のみ実行） --- if (!RandomFruitLayer.masterGrids.has(this.emojiResolution)) { const newGrids = this.generateMasterGrids(this.emojiResolution); RandomFruitLayer.masterGrids.set(this.emojiResolution, newGrids); } // --- 表示する図形のグリッドを生成 --- this.displayGrid = []; const availableGrids = RandomFruitLayer.masterGrids.get(this.emojiResolution); for (let j = 0; j < this.gridRows; j++) { let row = []; for (let i = 0; i < this.gridCols; i++) { row.push(random(availableGrids)); } this.displayGrid.push(row); } } update() {} // ▼▼▼ 描画ロジックを修正 ▼▼▼ draw() { const g = this.graphics; g.background('#00002d'); g.noStroke(); const subTileWidth = g.width / this.gridCols; const subTileHeight = g.height / this.gridRows; for (let j = 0; j < this.gridRows; j++) { for (let i = 0; i < this.gridCols; i++) { const shapeGrid = this.displayGrid[j][i]; if (!shapeGrid || shapeGrid.length === 0) continue; const centerX = i * subTileWidth + subTileWidth / 2; const centerY = j * subTileHeight + subTileHeight / 2; g.push(); // 描画状態を保存 g.translate(centerX, centerY); // 各タイルの中心に移動 g.scale(this.fruitScale); // ★★★ フルーツの表示倍率を適用 ★★★ const shapePixelWidth = shapeGrid[0].length * this.emojiResolution; const shapePixelHeight = shapeGrid.length * this.emojiResolution; // 図形が(0,0)中心になるように描画 for (let r = 0; r < shapeGrid.length; r++) { for (let c = 0; c < shapeGrid[r].length; c++) { if (shapeGrid[r][c]) { g.fill(shapeGrid[r][c]); g.ellipse( (c * this.emojiResolution + this.emojiResolution / 2) - shapePixelWidth / 2, (r * this.emojiResolution + this.emojiResolution / 2) - shapePixelHeight / 2, this.circleSize, this.circleSize ); } } } g.pop(); // 描画状態を元に戻す } } } // --- 以下のメソッドはクラス内部でのみ使用 --- generateMasterGrids(resolution) { const grids = []; const tempCanvasSize = 100; for (let emoji of FRUIT_EMOJIS) { const tempGraphics = createGraphics(tempCanvasSize, tempCanvasSize); tempGraphics.textSize(80); tempGraphics.textAlign(CENTER, CENTER); tempGraphics.text(emoji, tempCanvasSize / 2, tempCanvasSize / 2); const grid = this.createGridFromImage(tempGraphics, resolution); if (grid.length > 0 && grid[0].length > 0) grids.push(grid); tempGraphics.remove(); } return grids; } createGridFromImage(img, resolution) { const cols = floor(img.width / resolution); const rows = floor(img.height / resolution); let tempGrid = Array(rows).fill(null).map(() => Array(cols).fill(null)); const topColors = this.extractTopColors(img, 3); if (topColors.length === 0) return [[]]; let minI = cols, maxI = -1, minJ = rows, maxJ = -1; for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { const x = floor(i * resolution); const y = floor(j * resolution); const c = img.get(x, y); if (alpha(c) > 128 && brightness(c) > 10) { tempGrid[j][i] = this.findClosestColor(c, topColors); if (i < minI) minI = i; if (i > maxI) maxI = i; if (j < minJ) minJ = j; if (j > maxJ) maxJ = j; } } } if (maxI === -1) return [[]]; let finalGrid = []; for (let j = minJ; j <= maxJ; j++) { finalGrid.push(tempGrid[j].slice(minI, maxI + 1)); } return finalGrid; } extractTopColors(img, count) { const colorCounts = new Map(); img.loadPixels(); for (let i = 0; i < img.pixels.length; i += 4) { const r = img.pixels[i], g = img.pixels[i+1], b = img.pixels[i+2], a = img.pixels[i+3]; if (a < 128 || (r > 245 && g > 245 && b > 245)) continue; const key = `${r},${g},${b}`; colorCounts.set(key, (colorCounts.get(key) || 0) + 1); } const sortedColors = [...colorCounts.entries()].sort((a, b) => b[1] - a[1]); return sortedColors.slice(0, count).map(entry => { const [r, g, b] = entry[0].split(',').map(Number); const originalColor = color(r, g, b); push(); colorMode(HSB, 360, 100, 100, 1); const vibrantColor = color(hue(originalColor), 95, 100); pop(); return vibrantColor; }); } findClosestColor(target, colorList) { let closestColor = null; let minDistance = Infinity; for (const c of colorList) { const distance = dist(red(target), green(target), blue(target), red(c), green(c), blue(c)); if (distance < minDistance) { minDistance = distance; closestColor = c; } } return closestColor; } remove() { if (this.graphics) this.graphics.remove(); } toggleActive() { this.isActive = !this.isActive; } } // レイアウト参考画像の描画（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() { let layoutChanged = false; // レイアウトが変更されたかどうかのフラグ let isFullScreen = false; // フルスクリーンモードへの切り替えフラグ // キーボードでサイズを切り替え if (key === "1") { currentSize = "LED_CUBE1"; setActive(1); layoutChanged = true; } else if (key === "2") { currentSize = "LED_CUBE2"; setActive(2); layoutChanged = true; } else if (key === "3") { currentSize = "LED_CUBE3"; setActive(3); layoutChanged = true; } else if (key === "4") { currentSize = ""; // フルスクリーンレイアウト setActive(4); layoutChanged = true; isFullScreen = true; // フルスクリーンへの切り替えを記録 } // GraphicsLayer配列の切り替え if (layoutChanged) { updateURLAndCanvas(); // フルスクリーンモードの場合のみ、事前に画面をクリア if (isFullScreen) { clear(); background(0); } // フルスクリーンモードの場合は少し遅延してGraphicsLayerを作成 if (key === "4") { setTimeout(() => { createGraphicsLayers(); }, 50); } else { createGraphicsLayers(); } return; // レイアウト変更時は以降の処理を行わない } // --- (以降の矢印キーやスペースキーの処理は変更なし) --- if (keyCode === LEFT_ARROW) { if (graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex - 1 + graphicsLayers.length) % graphicsLayers.length; } } if (keyCode === RIGHT_ARROW) { if (graphicsLayers.length > 0) { currentLayerIndex = (currentLayerIndex + 1) % graphicsLayers.length; } } if (key === " ") { if (graphicsLayers.length > 0 && graphicsLayers.at(currentLayerIndex)) { // .at() を使用して範囲外アクセスを防ぐ graphicsLayers.at(currentLayerIndex).toggleActive(); } } } // アクティブな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 }; // ユーティリティここまで //-------------------------------------

test