03固定した発射パターンが一定間隔で移動体を放つシーン・オートマトン

一箇所に固定した小さな細胞配列が決まった世代間隔で自らを回復しながら、斜めに移動する小さな塊を一つずつ押し出し、押し出された塊は画面端に届くまで同じ形を保ったまま斜めに移動する。

使いどころ常時再生の背景アニメーション、待機画面の装飾

GUN_ROWSplaceGunseedGrid

<main class="stage">
  <div class="rv is-demo" tabindex="0" role="button" aria-label="発射台シーン進行中 — クリックまたはスペースキーで停止、R で再シード">
    <canvas class="rv__cv" width="480" height="300"></canvas>
    <p class="rv__hint">クリックまたはスペースキーで停止、R で再シード</p>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

@include stage($stage-orange);

.rv {
  position: relative;
  width: min(92vw, calc(160vh - 12.8vw));
  aspect-ratio: 480 / 300;
  margin: 0 auto;
  border-radius: $r-card;
  overflow: hidden;
  cursor: pointer;
  box-shadow: $shadow-raised;
  outline-offset: 4px;

  &:focus-visible {
    outline: 3px solid $subject-cream;
  }
}

.rv__cv {
  display: block;
  width: 100%;
  height: 100%;
}

.rv__hint {
  position: absolute;
  left: $sp-3;
  bottom: $sp-3;
  margin: 0;
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  background: rgba(255, 247, 230, .85);
  color: $subject-ink;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    cursor: pointer;
  }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.rv {
  position: relative;
  width: min(92vw, 160vh - 12.8vw);
  aspect-ratio: 480/300;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  outline-offset: 4px;
}
.rv:focus-visible {
  outline: 3px solid #fff7e6;
}

.rv__cv {
  display: block;
  width: 100%;
  height: 100%;
}

.rv__hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  background: rgba(255, 247, 230, 0.85);
  color: #17141a;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    cursor: pointer;
  }
}

(function(){
  'use strict';
  // 395-09(진행률 채움 로더)와 다른 축: 고정된 발사틀이 규칙에 따라 스스로 회복하며 이동체를 밀어내는 장면이 주인공.
  // 라이프 규칙(이웃 수 값)으로 매 세대 전체 격자를 계산해 fillRect 로 다시 그린다 — 속성 트윈 없음.

  function makeLcg(seed){
    let s = seed >>> 0;
    return function(){
      s = (s * 1664525 + 1013904223) >>> 0;
      return s / 4294967296;
    };
  }

  const W = 480, H = 300;
  const CELL = 6, COLS = W / CELL, ROWS = H / CELL;
  const ORANGE = '#c89a8f';
  const ALIVE_COLOR = '#93a4ca';
  let SEED = 30301;
  let rnd = makeLcg(SEED);

  const SURVIVE_MIN = 2, SURVIVE_MAX = 3, BIRTH_COUNT = 3;

  // 고정 발사틀(발사기) 셀 좌표 — 36칸, 37x10 경계상자 안에서 스스로 회복하며 대각 이동체를 밀어낸다.
  const GUN_CELLS = [
    [1,5],[1,6],[2,5],[2,6],
    [11,5],[11,6],[11,7],[12,4],[12,8],[13,3],[13,9],[14,3],[14,9],
    [15,6],[16,4],[16,8],[17,5],[17,6],[17,7],[18,6],
    [21,3],[21,4],[21,5],[22,3],[22,4],[22,5],[23,2],[23,6],
    [25,1],[25,2],[25,6],[25,7],
    [35,3],[35,4],[36,3],[36,4]
  ];
  const GUN_W = 37;

  let grid = new Uint8Array(COLS * ROWS);
  let next = new Uint8Array(COLS * ROWS);

  function idx(x, y){ return y * COLS + x; }

  function placeGun(ox, oy, mirror){
    for (let i = 0; i < GUN_CELLS.length; i++){
      const dx = GUN_CELLS[i][0], dy = GUN_CELLS[i][1];
      const x = ox + (mirror ? (GUN_W - 1 - dx) : dx);
      const y = oy + dy;
      if (x >= 0 && x < COLS && y >= 0 && y < ROWS) grid[idx(x, y)] = 1;
    }
  }

  const GUN_ROWS = [4, 18, 32];

  function seedGrid(offset){
    grid.fill(0);
    for (let i = 0; i < GUN_ROWS.length; i++){
      placeGun(2 + offset, GUN_ROWS[i], false);
      placeGun(COLS - 2 - (GUN_W - 1) - offset, GUN_ROWS[i], true);
    }
  }

  function neighborCount(x, y){
    let n = 0;
    for (let dy = -1; dy <= 1; dy++){
      for (let dx = -1; dx <= 1; dx++){
        if (dx === 0 && dy === 0) continue;
        const nx = x + dx, ny = y + dy;
        if (nx < 0 || ny < 0 || nx >= COLS || ny >= ROWS) continue;
        n += grid[idx(nx, ny)];
      }
    }
    return n;
  }

  function step(){
    for (let y = 0; y < ROWS; y++){
      for (let x = 0; x < COLS; x++){
        const alive = grid[idx(x, y)] === 1;
        const n = neighborCount(x, y);
        let willLive = 0;
        if (alive){
          willLive = (n >= SURVIVE_MIN && n <= SURVIVE_MAX) ? 1 : 0;
        } else {
          willLive = (n === BIRTH_COUNT) ? 1 : 0;
        }
        next[idx(x, y)] = willLive;
      }
    }
    const tmp = grid; grid = next; next = tmp;
  }

  const cvEl = document.querySelector('.rv__cv');
  const ctx = cvEl.getContext('2d');
  const rootEl = document.querySelector('.rv');

  function render(){
    ctx.fillStyle = ORANGE;
    ctx.fillRect(0, 0, W, H);
    ctx.fillStyle = ALIVE_COLOR;
    for (let y = 0; y < ROWS; y++){
      for (let x = 0; x < COLS; x++){
        if (grid[idx(x, y)] === 1){
          ctx.fillRect(x * CELL + 1, y * CELL + 1, CELL - 1, CELL - 1);
        }
      }
    }
  }

  const ARIA_PLAY = '発射台シーン進行中 — クリックまたはスペースキーで停止、R で再シード';
  const ARIA_PAUSE = '発射台シーン停止中 — クリックまたはスペースキーで再生、R で再シード';

  function updateAria(){
    rootEl.setAttribute('aria-label', paused ? ARIA_PAUSE : ARIA_PLAY);
  }

  let paused = false;
  const reduceMQ = window.matchMedia('(prefers-reduced-motion: reduce)');

  function human(){ rootEl.classList.remove('is-demo'); }

  function reseed(){
    SEED = (SEED * 1103515245 + 12345) >>> 0;
    rnd = makeLcg(SEED || 1);
    const offset = Math.floor(rnd() * 6);
    seedGrid(offset);
  }

  function togglePause(){
    paused = !paused;
    updateAria();
  }

  function onActivate(e){
    if (e.type === 'keydown'){
      if (e.key === 'r' || e.key === 'R'){
        human();
        reseed();
        render();
        return;
      }
      if (e.key !== 'Enter' && e.key !== ' ') return;
      e.preventDefault();
    }
    human();
    if (reduceMQ.matches){
      step();
      render();
    } else {
      togglePause();
    }
  }

  function onKey(e){
    if (e.key === 'r' || e.key === 'R' || e.key === 'Enter' || e.key === ' '){
      onActivate(e);
    }
  }

  const GEN_INTERVAL_MS = 20;
  let acc = 0, last = 0;

  function frame(now){
    if (!reduceMQ.matches){
      if (!last) last = now;
      const dt = now - last;
      last = now;
      if (!paused){
        acc += dt;
        while (acc >= GEN_INTERVAL_MS){
          step();
          acc -= GEN_INTERVAL_MS;
        }
        render();
      }
      requestAnimationFrame(frame);
    }
  }

  function onResize(){ render(); }

  rootEl.addEventListener('click', onActivate);
  rootEl.addEventListener('keydown', onKey);
  window.addEventListener('resize', onResize);

  seedGrid(0);
  updateAria();
  render();
  if (!reduceMQ.matches){
    requestAnimationFrame(frame);
  }

})();

import { useEffect, useRef } from 'react';
import styles from './GliderGunScene.module.scss';

function ctx2d(cv: HTMLCanvasElement): CanvasRenderingContext2D {
  const c = cv.getContext('2d');
  if (!c) throw new Error('no 2d context');
  return c;
}

function makeLcg(seed: number): () => number {
  let s = seed >>> 0;
  return function(){
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 4294967296;
  };
}

const W = 480, H = 300;
const CELL = 6, COLS = W / CELL, ROWS = H / CELL;
const ORANGE = '#c89a8f';
const ALIVE_COLOR = '#93a4ca';
let SEED = 30301;
let rnd = makeLcg(SEED);

const SURVIVE_MIN = 2, SURVIVE_MAX = 3, BIRTH_COUNT = 3;

// 고정 발사틀(발사기) 셀 좌표 — 36칸, 37x10 경계상자 안에서 스스로 회복하며 대각 이동체를 밀어낸다.
const GUN_CELLS: [number, number][] = [
  [1,5],[1,6],[2,5],[2,6],
  [11,5],[11,6],[11,7],[12,4],[12,8],[13,3],[13,9],[14,3],[14,9],
  [15,6],[16,4],[16,8],[17,5],[17,6],[17,7],[18,6],
  [21,3],[21,4],[21,5],[22,3],[22,4],[22,5],[23,2],[23,6],
  [25,1],[25,2],[25,6],[25,7],
  [35,3],[35,4],[36,3],[36,4]
];
const GUN_W = 37;

let grid = new Uint8Array(COLS * ROWS);
let next = new Uint8Array(COLS * ROWS);

function idx(x: number, y: number): number { return y * COLS + x; }

function placeGun(ox: number, oy: number, mirror: boolean): void {
  for (let i = 0; i < GUN_CELLS.length; i++){
    const dx = GUN_CELLS[i][0], dy = GUN_CELLS[i][1];
    const x = ox + (mirror ? (GUN_W - 1 - dx) : dx);
    const y = oy + dy;
    if (x >= 0 && x < COLS && y >= 0 && y < ROWS) grid[idx(x, y)] = 1;
  }
}

const GUN_ROWS = [4, 18, 32];

function seedGrid(offset: number): void {
  grid.fill(0);
  for (let i = 0; i < GUN_ROWS.length; i++){
    placeGun(2 + offset, GUN_ROWS[i], false);
    placeGun(COLS - 2 - (GUN_W - 1) - offset, GUN_ROWS[i], true);
  }
}

function neighborCount(x: number, y: number): number {
  let n = 0;
  for (let dy = -1; dy <= 1; dy++){
    for (let dx = -1; dx <= 1; dx++){
      if (dx === 0 && dy === 0) continue;
      const nx = x + dx, ny = y + dy;
      if (nx < 0 || ny < 0 || nx >= COLS || ny >= ROWS) continue;
      n += grid[idx(nx, ny)];
    }
  }
  return n;
}

function step(): void {
  for (let y = 0; y < ROWS; y++){
    for (let x = 0; x < COLS; x++){
      const alive = grid[idx(x, y)] === 1;
      const n = neighborCount(x, y);
      let willLive = 0;
      if (alive){
        willLive = (n >= SURVIVE_MIN && n <= SURVIVE_MAX) ? 1 : 0;
      } else {
        willLive = (n === BIRTH_COUNT) ? 1 : 0;
      }
      next[idx(x, y)] = willLive;
    }
  }
  const tmp = grid; grid = next; next = tmp;
}

function render(ctx: CanvasRenderingContext2D): void {
  ctx.fillStyle = ORANGE;
  ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = ALIVE_COLOR;
  for (let y = 0; y < ROWS; y++){
    for (let x = 0; x < COLS; x++){
      if (grid[idx(x, y)] === 1){
        ctx.fillRect(x * CELL + 1, y * CELL + 1, CELL - 1, CELL - 1);
      }
    }
  }
}

const ARIA_PLAY = '발사틀 장면 진행 중 — 클릭하거나 스페이스바로 정지, R 로 재시드';
const ARIA_PAUSE = '발사틀 장면 정지됨 — 클릭하거나 스페이스바로 재생, R 로 재시드';

export default function GliderGunScene(){

  const rootRef = useRef<HTMLDivElement | null>(null);
  const cvRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const root = rootRef.current;
    const cv = cvRef.current;
    if (!root || !cv) return;
    const rootEl: HTMLDivElement = root;
    const cvEl: HTMLCanvasElement = cv;
    const ctx = ctx2d(cvEl);

    function updateAria(): void {
      rootEl.setAttribute('aria-label', paused ? ARIA_PAUSE : ARIA_PLAY);
    }

    let paused = false;
    const reduceMQ = window.matchMedia('(prefers-reduced-motion: reduce)');

    function human(): void { rootEl.classList.remove('is-demo'); }

    function reseed(): void {
      SEED = (SEED * 1103515245 + 12345) >>> 0;
      rnd = makeLcg(SEED || 1);
      const offset = Math.floor(rnd() * 6);
      seedGrid(offset);
    }

    function togglePause(): void {
      paused = !paused;
      updateAria();
    }

    function onActivate(e: Event): void {
      if (e.type === 'keydown'){
        const ke = e as KeyboardEvent;
        if (ke.key === 'r' || ke.key === 'R'){
          human();
          reseed();
          render(ctx);
          return;
        }
        if (ke.key !== 'Enter' && ke.key !== ' ') return;
        ke.preventDefault();
      }
      human();
      if (reduceMQ.matches){
        step();
        render(ctx);
      } else {
        togglePause();
      }
    }

    const GEN_INTERVAL_MS = 20;
    let acc = 0, last = 0, rafId = 0;

    function frame(now: number): void {
      if (!reduceMQ.matches){
        if (!last) last = now;
        const dt = now - last;
        last = now;
        if (!paused){
          acc += dt;
          while (acc >= GEN_INTERVAL_MS){
            step();
            acc -= GEN_INTERVAL_MS;
          }
          render(ctx);
        }
        rafId = requestAnimationFrame(frame);
      }
    }

    function onResize(): void { render(ctx); }

    rootEl.addEventListener('click', onActivate);
    rootEl.addEventListener('keydown', onActivate);
    window.addEventListener('resize', onResize);

    seedGrid(0);
    updateAria();
    render(ctx);
    if (!reduceMQ.matches){
      rafId = requestAnimationFrame(frame);
    }

    return () => {
      rootEl.removeEventListener('click', onActivate);
      rootEl.removeEventListener('keydown', onActivate);
      window.removeEventListener('resize', onResize);
      if (rafId) cancelAnimationFrame(rafId);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div ref={rootRef} className={`${styles.rv} is-demo`} tabIndex={0} role="button" aria-label="발사틀 장면 진행 중 — 클릭하거나 스페이스바로 정지, R 로 재시드">
        <canvas ref={cvRef} className={styles.rv__cv} width={480} height={300} />
        <p className={styles.rv__hint}>클릭·스페이스바로 정지, R 로 재시드</p>
      </div>
    </main>
  );
}

新しいタブで開く

03 固定した発射パターンが一定間隔で移動体を放つシーン・オートマトン — 計測累積面積 27.599% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · ライフゲーム9種 — キャンバスで世代を計算

このデモが属する記事

ライフゲーム9種 — キャンバスで世代を計算ライフゲームのルールを計算だけで動かす9種のキャンバス実装です。格子は勝手に動いているように見えるが、実際には毎世代、生存隣接数という一つの値が生死を分け、その値が積み重なった年齢の分だけ色が薄れ、同じ値が配線を伝って信号のように流れる — この記事のデモをすべて見る

03固定した発射パターンが一定間隔で移動体を放つシーン・オートマトン

このデモが属する記事

この効果が気に入ったら — 似たデモ