p5.disableFriendlyErrors = true; // ===================================== // Brian's Brain Automaton // 基準サイズ：8950 × 1080 // ===================================== const BASE_SIZE = 1080; const BASE_W = 8950; const BASE_H = BASE_SIZE; // 作品内部のサイズ const W = BASE_W; const H = BASE_H; // ウィンドウ表示用 let displayScale = 1; let displayOffsetX = 0; let displayOffsetY = 0; // ===================================== // 背景 // ===================================== const BG_COLORS = [ [197, 200, 166], // ベージュ [0, 55, 89] // 紺グレー ]; let gradientFlip = false; let bgGradient; // ===================================== // 数字セル // ===================================== const CELL_SIZE = 48; const COLS = Math.floor(W / CELL_SIZE); const ROWS = Math.floor(H / CELL_SIZE); // ===================================== // 時計タイル // ===================================== const TILE_COLS = 32; const TILE_ROWS = 6; const TILE_W = W / TILE_COLS; const TILE_H = H / TILE_ROWS; const TOTAL_TILES = TILE_COLS * TILE_ROWS; // ===================================== // 時計画像 // ===================================== const CLOCK_IMAGE_COUNT = 6; // 全タイルの約1/3に配置 const CLOCK_COUNT = Math.floor(TOTAL_TILES / 3); // 時計の基準サイズ const CLOCK_SIZE = TILE_H * 0.88; // 通常時計 const CLOCK_SCALE_MIN = 0.85; const CLOCK_SCALE_MAX = 1.13; // 大きな時計 const LARGE_CLOCK_PROBABILITY = 0.15; const LARGE_CLOCK_SCALE_MIN = 2.5; const LARGE_CLOCK_SCALE_MAX = 5.5; // 透明度 const CLOCK_ALPHA_MIN = 128; const CLOCK_ALPHA_MAX = 230; // 点滅 const CLOCK_BLINK_SPEED_MIN = 0.28; const CLOCK_BLINK_SPEED_MAX = 0.60; const CLOCK_PULSE_POWER = 2.6; // ===================================== // セルオートマトン // ===================================== // 通常セルは2フレームごと const UPDATE_INTERVAL = 2; // 黒いセルは5フレームごと const BLACK_UPDATE_INTERVAL = 5; const BLACK_ON_ALPHA = 245; const BLACK_DYING_ALPHA = 150; const BLACK_SIZE_MIN = 0.72; const BLACK_SIZE_RANGE = 0.24; // ===================================== // 7.5秒ごとの切り替え // ===================================== const RESET_INTERVAL = 7500; // ===================================== // Brian's Brain の状態 // ===================================== const OFF = 0; const ON = 1; const DYING = 2; // ===================================== // 現在時刻 // ===================================== const TIME_TEXT_SIZE = 210; const TIME_TEXT_ALPHA = 220; const TIME_MARGIN_X = 300; const TIME_MARGIN_Y = 200; // 1秒あたりの移動距離 const TIME_SPEED_X = 150; const TIME_SPEED_Y = 70; // ジグザグの幅 const TIME_ZIGZAG_X = 100; const TIME_ZIGZAG_Y = 55; // 1秒あたりの位相変化 const TIME_ZIGZAG_SPEED_X = 0.75; const TIME_ZIGZAG_SPEED_Y = 0.55; // ===================================== // 配列・画像 // ===================================== let clockImages = []; let grid = []; let nextGrid = []; let blackGrid = []; let blackNextGrid = []; let clocks = []; let lastResetTime = 0; // ===================================== // 現在時刻の移動 // ===================================== let floatingTimeX; let floatingTimeY; let floatingTimeDirectionX = 1; let floatingTimeDirectionY = 1; let floatingTimePhaseX = 0; let floatingTimePhaseY = 0; // ===================================== // preload // ===================================== // ===================================== // 時計画像のURL // ===================================== const CLOCK_IMAGE_URLS = [ "https://stat.neort.io/externalResource/d9gn2dvr9s7a0qph2m4g.png", "https://stat.neort.io/externalResource/d9gn2ffr9s7a0qph2m5g.png", "https://stat.neort.io/externalResource/d9gn2gvr9s7a0qph2m6g.png", "https://stat.neort.io/externalResource/d9gn31fr9s7a0qph2m8g.png", "https://stat.neort.io/externalResource/d9gn347r9s7a0qph2m9g.png", "https://stat.neort.io/externalResource/d9gn35vr9s7a0qph2mag.png" ]; function preload() { for (let i = 0; i < CLOCK_IMAGE_URLS.length; i++) { clockImages[i] = loadImage( CLOCK_IMAGE_URLS[i] ); } } // ===================================== // setup // ===================================== function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); frameRate(15); textAlign(CENTER, CENTER); textFont("monospace"); imageMode(CENTER); noStroke(); calculateDisplaySize(); createBackgroundGradient(); resetAll(); lastResetTime = millis(); // 7.5秒ごとのリセットとは独立 floatingTimeX = W * 0.22; floatingTimeY = H * 0.32; floatingTimePhaseX = random(TWO_PI); floatingTimePhaseY = random(TWO_PI); } // ===================================== // draw // ===================================== function draw() { // 作品の外側 background(0); checkReset(); push(); // 作品をウィンドウ中央に配置 translate( displayOffsetX, displayOffsetY ); scale(displayScale); // ----------------------------------- // 作品領域外を描画しない // ----------------------------------- drawingContext.save(); drawingContext.beginPath(); drawingContext.rect(0, 0, W, H); drawingContext.clip(); // 背景 drawBackground(); // 黒いセル if ( frameCount % BLACK_UPDATE_INTERVAL === 0 ) { updateBlackAutomaton(); } drawBlackCells(); // 通常セル if ( frameCount % UPDATE_INTERVAL === 0 ) { updateAutomaton(); } drawCells(); // 時計 drawClocks(); // 現在時刻 updateFloatingTime(); drawFloatingTime(); // クリッピング解除 drawingContext.restore(); pop(); } // ===================================== // ウィンドウサイズ変更 // ===================================== function windowResized() { resizeCanvas( windowWidth, windowHeight ); calculateDisplaySize(); } // ===================================== // 表示倍率と中央位置 // ===================================== function calculateDisplaySize() { displayScale = min( width / BASE_W, height / BASE_H ); const displayedWidth = BASE_W * displayScale; const displayedHeight = BASE_H * displayScale; displayOffsetX = (width - displayedWidth) * 0.5; displayOffsetY = (height - displayedHeight) * 0.5; } // ===================================== // 7.5秒ごとの切り替え // ===================================== function checkReset() { if ( millis() - lastResetTime < RESET_INTERVAL ) { return; } // グラデーションを上下反転 gradientFlip = !gradientFlip; createBackgroundGradient(); resetAll(); lastResetTime = millis(); } // ===================================== // 全体を初期化 // ===================================== function resetAll() { initGrid(); initBlackGrid(); initClocks(); } // ===================================== // 通常セルの初期状態 // ===================================== function initGrid() { grid = new Array(ROWS); nextGrid = new Array(ROWS); for (let y = 0; y < ROWS; y++) { grid[y] = new Uint8Array(COLS); nextGrid[y] = new Uint8Array(COLS); for (let x = 0; x < COLS; x++) { const px = x * CELL_SIZE; const py = y * CELL_SIZE; const tx = Math.floor( px / TILE_W ); const ty = Math.floor( py / TILE_H ); const densityNoise = noise( tx * 0.55, ty * 0.55 ); const density = 0.08 + densityNoise * 0.08; grid[y][x] = random() < density ? ON : OFF; } } } // ===================================== // 黒いセルの初期状態 // ===================================== function initBlackGrid() { blackGrid = new Array(ROWS); blackNextGrid = new Array(ROWS); for (let y = 0; y < ROWS; y++) { blackGrid[y] = new Uint8Array(COLS); blackNextGrid[y] = new Uint8Array(COLS); for (let x = 0; x < COLS; x++) { const px = x * CELL_SIZE; const py = y * CELL_SIZE; const tx = Math.floor( px / TILE_W ); const ty = Math.floor( py / TILE_H ); const densityNoise = noise( tx * 0.32 + 100, ty * 0.32 + 100 ); const density = 0.045 + densityNoise * 0.065; blackGrid[y][x] = random() < density ? ON : OFF; } } } // ===================================== // 通常セルを更新 // ===================================== function updateAutomaton() { for (let y = 0; y < ROWS; y++) { const nextRow = nextGrid[y]; for (let x = 0; x < COLS; x++) { const state = grid[y][x]; const onCount = countOnNeighbors(x, y); if (state === ON) { nextRow[x] = DYING; } else if (state === DYING) { nextRow[x] = OFF; } else { nextRow[x] = onCount === 2 ? ON : OFF; } } } const temporaryGrid = grid; grid = nextGrid; nextGrid = temporaryGrid; } // ===================================== // 黒いセルを更新 // ===================================== function updateBlackAutomaton() { for (let y = 0; y < ROWS; y++) { const nextRow = blackNextGrid[y]; for (let x = 0; x < COLS; x++) { const state = blackGrid[y][x]; const onCount = countBlackOnNeighbors(x, y); if (state === ON) { nextRow[x] = DYING; } else if (state === DYING) { nextRow[x] = OFF; } else { nextRow[x] = onCount === 2 ? ON : OFF; } } } const temporaryGrid = blackGrid; blackGrid = blackNextGrid; blackNextGrid = temporaryGrid; } // ===================================== // 通常セルの周囲8セル // ===================================== function countOnNeighbors(x, y) { let total = 0; const left = x === 0 ? COLS - 1 : x - 1; const right = x === COLS - 1 ? 0 : x + 1; const top = y === 0 ? ROWS - 1 : y - 1; const bottom = y === ROWS - 1 ? 0 : y + 1; total += grid[top][left] === ON; total += grid[top][x] === ON; total += grid[top][right] === ON; total += grid[y][left] === ON; total += grid[y][right] === ON; total += grid[bottom][left] === ON; total += grid[bottom][x] === ON; total += grid[bottom][right] === ON; return total; } // ===================================== // 黒いセルの周囲8セル // ===================================== function countBlackOnNeighbors(x, y) { let total = 0; const left = x === 0 ? COLS - 1 : x - 1; const right = x === COLS - 1 ? 0 : x + 1; const top = y === 0 ? ROWS - 1 : y - 1; const bottom = y === ROWS - 1 ? 0 : y + 1; total += blackGrid[top][left] === ON; total += blackGrid[top][x] === ON; total += blackGrid[top][right] === ON; total += blackGrid[y][left] === ON; total += blackGrid[y][right] === ON; total += blackGrid[bottom][left] === ON; total += blackGrid[bottom][x] === ON; total += blackGrid[bottom][right] === ON; return total; } // ===================================== // 黒い数字を描画 // ===================================== function drawBlackCells() { noStroke(); for (let y = 0; y < ROWS; y++) { const row = blackGrid[y]; for (let x = 0; x < COLS; x++) { const state = row[x]; if (state === OFF) { continue; } const px = x * CELL_SIZE; const py = y * CELL_SIZE; const centerX = px + CELL_SIZE * 0.5; const centerY = py + CELL_SIZE * 0.54; const tx = Math.floor( px / TILE_W ); const ty = Math.floor( py / TILE_H ); const number = (x * 3 + y * 17 + 5) % 10; if (state === ON) { const numberScale = BLACK_SIZE_MIN + noise( tx * 0.25 + 50, ty * 0.25 + 50 ) * BLACK_SIZE_RANGE; textSize( CELL_SIZE * numberScale ); fill( 0, BLACK_ON_ALPHA ); } else { textSize( CELL_SIZE * 0.60 ); fill( 0, BLACK_DYING_ALPHA ); } text( number, centerX, centerY ); } } } // ===================================== // 通常の数字を描画 // ===================================== function drawCells() { noStroke(); for (let y = 0; y < ROWS; y++) { const row = grid[y]; for (let x = 0; x < COLS; x++) { const state = row[x]; if (state === OFF) { continue; } const px = x * CELL_SIZE; const py = y * CELL_SIZE; const centerX = px + CELL_SIZE * 0.5; const centerY = py + CELL_SIZE * 0.54; const tx = Math.floor( px / TILE_W ); const ty = Math.floor( py / TILE_H ); const colorType = (tx + ty) % 3; const number = (x * 7 + y * 13) % 10; if (state === ON) { setCellColor(colorType); const numberScale = 0.66 + noise( tx * 0.4, ty * 0.4 ) * 0.19; textSize( CELL_SIZE * numberScale ); } else { fill( 120, 140, 150, 100 ); textSize( CELL_SIZE * 0.55 ); } text( number, centerX, centerY ); } } } // ===================================== // 通常数字の色 // ===================================== function setCellColor(colorType) { if (colorType === 0) { fill( 246, 254, 170, 220 ); } else if (colorType === 1) { fill( 199, 223, 197, 220 ); } else { fill( 193, 219, 227, 220 ); } } // ===================================== // 時計を配置 // ===================================== function initClocks() { clocks = []; const tileIndices = []; for ( let i = 0; i < TOTAL_TILES; i++ ) { tileIndices.push(i); } shuffleArray(tileIndices); for ( let i = 0; i < CLOCK_COUNT; i++ ) { const tileIndex = tileIndices[i]; const tx = tileIndex % TILE_COLS; const ty = Math.floor( tileIndex / TILE_COLS ); const isLarge = random() < LARGE_CLOCK_PROBABILITY; clocks.push({ x: tx * TILE_W + TILE_W * 0.5, y: ty * TILE_H + TILE_H * 0.5, imageIndex: Math.floor( random( CLOCK_IMAGE_COUNT ) ), phase: random(TWO_PI), blinkSpeed: random( CLOCK_BLINK_SPEED_MIN, CLOCK_BLINK_SPEED_MAX ), maxAlpha: random( CLOCK_ALPHA_MIN, CLOCK_ALPHA_MAX ), sizeScale: isLarge ? random( LARGE_CLOCK_SCALE_MIN, LARGE_CLOCK_SCALE_MAX ) : random( CLOCK_SCALE_MIN, CLOCK_SCALE_MAX ), flip: random() < 0.33 }); } } // ===================================== // 時計を描画 // ===================================== function drawClocks() { const elapsedSeconds = millis() * 0.001; for ( let i = 0; i < clocks.length; i++ ) { const clock = clocks[i]; const horizontalDelay = clock.x * 0.0012; const wave = sin( elapsedSeconds * clock.blinkSpeed + clock.phase - horizontalDelay ); let pulse = (wave + 1) * 0.5; pulse = Math.pow( pulse, CLOCK_PULSE_POWER ); const alpha = pulse * clock.maxAlpha; if (alpha < 2) { continue; } const drawSize = CLOCK_SIZE * clock.sizeScale; tint(255, alpha); push(); translate( clock.x, clock.y ); if (clock.flip) { scale(-1, 1); } image( clockImages[ clock.imageIndex ], 0, 0, drawSize, drawSize ); pop(); } noTint(); } // ===================================== // 配列をシャッフル // ===================================== function shuffleArray(array) { for ( let i = array.length - 1; i > 0; i-- ) { const j = Math.floor( random(i + 1) ); const temporary = array[i]; array[i] = array[j]; array[j] = temporary; } } // ===================================== // 現在時刻の位置を更新 // ===================================== function updateFloatingTime() { // 経過時間を秒に変換 // タブ復帰時の急移動を防ぐため最大100ms const dt = min(deltaTime, 100) / 1000; floatingTimeX += TIME_SPEED_X * floatingTimeDirectionX * dt; floatingTimeY += TIME_SPEED_Y * floatingTimeDirectionY * dt; // 左右端で反転 if ( floatingTimeX > W - TIME_MARGIN_X ) { floatingTimeX = W - TIME_MARGIN_X; floatingTimeDirectionX = -1; } if ( floatingTimeX < TIME_MARGIN_X ) { floatingTimeX = TIME_MARGIN_X; floatingTimeDirectionX = 1; } // 上下端で反転 if ( floatingTimeY > H - TIME_MARGIN_Y ) { floatingTimeY = H - TIME_MARGIN_Y; floatingTimeDirectionY = -1; } if ( floatingTimeY < TIME_MARGIN_Y ) { floatingTimeY = TIME_MARGIN_Y; floatingTimeDirectionY = 1; } // ジグザグ運動 floatingTimePhaseX += TIME_ZIGZAG_SPEED_X * dt; floatingTimePhaseY += TIME_ZIGZAG_SPEED_Y * dt; } // ===================================== // 現在時刻を描画 // ===================================== function drawFloatingTime() { const currentTime = new Date(); const currentHour = currentTime.getHours(); const currentMinute = currentTime.getMinutes(); const currentSecond = currentTime.getSeconds(); const timeString = nf(currentHour, 2) + ":" + nf(currentMinute, 2) + ":" + nf(currentSecond, 2); const zigzagX = sin( floatingTimePhaseX ) * TIME_ZIGZAG_X; const zigzagY = sin( floatingTimePhaseY * 1.7 ) * TIME_ZIGZAG_Y; const drawX = floatingTimeX + zigzagX; const drawY = floatingTimeY + zigzagY; push(); textAlign(CENTER, CENTER); textFont("monospace"); textStyle(NORMAL); textSize(TIME_TEXT_SIZE); // 影 fill(0, 110); text( timeString, drawX + 12, drawY + 14 ); // 本体 fill( 245, 250, 230, TIME_TEXT_ALPHA ); text( timeString, drawX, drawY ); pop(); } // ===================================== // 背景を描画 // ===================================== function drawBackground() { push(); imageMode(CORNER); image( bgGradient, 0, 0 ); pop(); } // ===================================== // 背景グラデーションを作成 // ===================================== function createBackgroundGradient() { if (!bgGradient) { bgGradient = createGraphics(W, H); bgGradient.pixelDensity(1); } bgGradient.clear(); bgGradient.noFill(); let topColor = BG_COLORS[0]; let bottomColor = BG_COLORS[1]; if (gradientFlip) { topColor = BG_COLORS[1]; bottomColor = BG_COLORS[0]; } for (let y = 0; y < H; y++) { const amount = y / (H - 1); const r = lerp( topColor[0], bottomColor[0], amount ); const g = lerp( topColor[1], bottomColor[1], amount ); const b = lerp( topColor[2], bottomColor[2], amount ); bgGradient.stroke(r, g, b); bgGradient.line( 0, y, W, y ); } }

Between Digital and Analog