//------------------------------------- // プロジェクトの基本設定ここから 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 = ""; // プロジェクトの基本設定ここまで //------------------------------------- // ===================================== // セル・オートマトン設定 // ===================================== const CELL = 20; let COLS, ROWS; const TILE_COLS = 12; const TILE_ROWS = 12; let TILE_W, TILE_H; const OFF = 0; const ON = 1; const DYING = 2; let grid = []; let nextGrid = []; let bgGraphic; // ===================================== // パレット切り替え設定 // ===================================== const PALETTE_INTERVAL = 7.5; // 各パレット7.5秒 const SCALE_DURATION = 2.5; // 最後の2.5秒で拡大 const SCALE_MAX = 1.4; // 140% let currentPaletteIndex = 0; // ===================================== // パレット // ===================================== const PALETTES = [ { name: "vividBlueGreen", bgTop: [8, 55, 80], bgBottom: [20, 115, 125], on: [ [255, 255, 90, 215], [120, 245, 150, 210], [90, 210, 255, 210], ], dying: [80, 170, 190, 85], grain: [255, 4, 13] }, { name: "vividPink&orange", bgTop: [149, 168, 195], bgBottom: [40, 43, 89], on: [ [198, 13, 144, 220], [233, 0, 82, 220], [228, 147, 70, 220], ], dying: [180, 90, 90, 90], grain: [255, 4, 14] }, { name: "vividMossGreen", bgTop: [35, 75, 25], bgBottom: [145, 125, 35], on: [ [29, 124, 64, 185], [246, 201, 158, 210], [70, 235, 175, 210], ], dying: [130, 165, 75, 85], grain: [255, 4, 12] }, { name: "vividViolet", bgTop: [145, 55, 120], bgBottom: [55, 20, 95], on: [ [207, 118, 247, 215], [235, 95, 255, 210], [65, 90, 219, 210], ], dying: [170, 85, 190, 85], grain: [255, 4, 13] }, { name: "vividLimeSky", bgTop: [40, 60, 80], bgBottom: [70, 80, 80], on: [ [221, 255, 85, 220], [195, 245, 105, 220], [165, 235, 190, 210], ], dying: [170, 210, 140, 90], grain: [255, 4, 15] }, { name: "cottonCandySky", bgTop: [185, 170, 240], bgBottom: [65, 45, 195], on: [ [120, 245, 255, 220], [228, 125, 122,220], [255, 245, 255, 220], ], dying: [180, 180, 255, 90], grain: [255, 4, 15] }, ]; function setup() { createCanvasSetup(); noStroke(); rectMode(CENTER); initSimulationDimensions(); resetPaletteAndGrid(); } function draw() { drawDebugMode(); // デバッグ用LEDキューブのレイアウト参考画像の描画 if (typeof drawDebugMode === "function") { drawDebugMode(); } updatePaletteIfNeeded(); let cellScale = getPaletteTransitionScale(); let cycleTime = (millis() / 1000) % PALETTE_INTERVAL; let startTime = PALETTE_INTERVAL - SCALE_DURATION; let globalScale = 1; if (cycleTime > startTime) { let t = map( cycleTime, startTime, PALETTE_INTERVAL, 0, 1 ); t = constrain(t, 0, 1); t = easeInOutCubic(t); globalScale = lerp(1, 1.5, t); //パレット切り替寸前に2.5秒で画面が1.5倍 } tint(255, 9); image(bgGraphic, 0, 0); noTint(); drawTileVeil(); if (frameCount % 4 === 0) { updateAutomaton(); } push(); translate(width / 2, height / 2); scale(globalScale); translate(-width / 2, -height / 2); drawCells(cellScale); pop(); } // ===================================== // サイズ初期化 // ===================================== function initSimulationDimensions() { COLS = Math.floor(width / CELL); ROWS = Math.floor(height / CELL); TILE_W = width / TILE_COLS; TILE_H = height / TILE_ROWS; } // ===================================== // パレット切り替え // ===================================== function updatePaletteIfNeeded() { let newIndex = Math.floor((millis() / 1000) / PALETTE_INTERVAL) % PALETTES.length; if (newIndex !== currentPaletteIndex) { currentPaletteIndex = newIndex; resetPaletteAndGrid(); } } function resetPaletteAndGrid() { bgGraphic = createGraphics(width, height); makeBackground(bgGraphic, PALETTES[currentPaletteIndex]); initGrid(); image(bgGraphic, 0, 0); } // ===================================== // 最後の2.5秒での拡大を計算 // ===================================== function getPaletteTransitionScale() { let cycleTime = (millis() / 1000) % PALETTE_INTERVAL; let startTime = PALETTE_INTERVAL - SCALE_DURATION; if (cycleTime < startTime) { return 1.0; } let t = map(cycleTime, startTime, PALETTE_INTERVAL, 0, 1); t = constrain(t, 0, 1); t = easeInOutCubic(t); return lerp(1.0, SCALE_MAX, t); } function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - pow(-2 * t + 2, 3) / 2; } // ===================================== // 初期状態 // ===================================== function initGrid() { grid = []; nextGrid = []; for (let y = 0; y < ROWS; y++) { grid[y] = []; nextGrid[y] = []; for (let x = 0; x < COLS; x++) { let tx = Math.floor((x * CELL) / TILE_W); let ty = Math.floor((y * CELL) / TILE_H); let n = noise(tx * 0.7, ty * 0.7); let density = 0.08 + n * 0.08; grid[y][x] = random() < density ? ON : OFF; nextGrid[y][x] = OFF; } } } // ===================================== // Brian's Brain 更新 // ===================================== function updateAutomaton() { for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { let state = grid[y][x]; let onCount = countOnNeighbors(x, y); if (state === ON) { nextGrid[y][x] = DYING; } else if (state === DYING) { nextGrid[y][x] = OFF; } else { nextGrid[y][x] = onCount === 2 ? ON : OFF; } } } let temp = grid; grid = nextGrid; nextGrid = temp; } // ===================================== // 周囲8セルのON数 // ===================================== function countOnNeighbors(x, y) { let sum = 0; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { if (dx === 0 && dy === 0) continue; let nx = (x + dx + COLS) % COLS; let ny = (y + dy + ROWS) % ROWS; if (grid[ny] && grid[ny][nx] === ON) { sum++; } } } return sum; } // ===================================== // セル描画 // ===================================== function drawCells(extraScale) { noStroke(); let pal = PALETTES[currentPaletteIndex]; for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { let state = grid[y][x]; if (state === OFF || state === undefined) continue; let px = x * CELL; let py = y * CELL; let tx = Math.floor(px / TILE_W); let ty = Math.floor(py / TILE_H); let hueShift = (tx + ty) % 3; let cx = px + CELL * 0.5; let cy = py + CELL * 0.5; if (state === ON) { fill(pal.on[hueShift]); let baseScale = 0.55 + noise(tx * 0.5, ty * 0.5) * 0.35; let s = CELL * baseScale * extraScale; rect(cx, cy, s, s, 2); } else if (state === DYING) { fill(pal.dying); let s = CELL * 0.45 * extraScale; rect(cx, cy, s, s, 2); } } } } // ===================================== // 背景生成 // ===================================== function makeBackground(g, pal) { g.noStroke(); for (let y = 0; y < height; y += 20) { let t = y / height; let r = lerp(pal.bgTop[0], pal.bgBottom[0], t); let gg = lerp(pal.bgTop[1], pal.bgBottom[1], t); let b = lerp(pal.bgTop[2], pal.bgBottom[2], t); g.fill(r, gg, b); g.rect(0, y, width, 20); } for (let i = 0; i < 10000; i++) { g.fill(pal.grain[0], random(pal.grain[1], pal.grain[2])); g.circle(random(width), random(height), 1); } } // ===================================== // タイルごとの薄い明度差 // ===================================== function drawTileVeil() { noStroke(); rectMode(CORNER); for (let ty = 0; ty < TILE_ROWS; ty++) { for (let tx = 0; tx < TILE_COLS; tx++) { let n = noise(tx * 0.25, ty * 0.25, frameCount * 0.001); if (n > 0.80) { fill(255, 2); } else if (n < 0.40) { fill(0, 5); } else { continue; } rect(tx * TILE_W, ty * TILE_H, TILE_W, TILE_H); } } rectMode(CENTER); } //------------------------------------- // ユーティリティここから // レイアウト参考画像の読み込み 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"; } else if (key === "2") { currentSize = "LED_CUBE2"; } else if (key === "3") { currentSize = "LED_CUBE3"; } else if (key === "4") { currentSize = ""; // URLパラメータを空にする } if (key === "1" || key === "2" || key === "3" || key === "4") { updateURLAndCanvas(); } } //クエリパラメーターでLED_CUBEのサイズを変更 function createCanvasSetup() { // クエリパラメータからサイズを取得 const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]) { currentSize = sizeParam; } createCanvasWithSize(); //キャンバスサイズの設定 } //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 })` ); } // ウィンドウリサイズ時の処理 function windowResized() { // URLパラメータが設定されていない場合のみcanvasをリサイズ if (!currentSize || !CANVAS_SIZES[currentSize]) { resizeCanvas(windowWidth, windowHeight); console.log(`Canvasリサイズ: ${windowWidth}x${windowHeight}`); } } // ユーティリティここまで //-------------------------------------

Ebb and flow