shigureni.dev

まず折り返す

一番単純な対称操作は、線で折り返すこと。左半分に何か描くと、右半分はその鏡像になる。x を 幅 - x に置き換えれば横の折り返し、y を 高さ - y にすれば縦。両方やると4象限が揃う。

左上の一区画にだけ点を撒き、それを残り3象限へ鏡で複製する。stamp が1点を受け取って、x→w-x・y→h-y の組み合わせで4回打つ。座標を更新するのは左上の seeds だけで、あとの3つは折り返しで決まる。点をゆっくり漂わせると、4象限が鏡を挟んで同時に動く。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2

// 左上の一区画（基本領域）にだけ点を撒き、各点に小さな速度を持たせる
  const seeds = Array.from({ length: 40 }, () => ({
    x: Math.random() * cx,
    y: Math.random() * cy,
    vx: (Math.random() - 0.5) * 0.8,
    vy: (Math.random() - 0.5) * 0.8,
  }))

// 1点を4象限へ。x→w-x, y→h-y の組み合わせが鏡映
  const stamp = (x, y) => {
    c.fillRect(x - 1, y - 1, 3, 3)
    c.fillRect(w - x - 1, y - 1, 3, 3)
    c.fillRect(x - 1, h - y - 1, 3, 3)
    c.fillRect(w - x - 1, h - y - 1, 3, 3)
  }

return () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

// 折り目を薄く
    c.strokeStyle = colors.tintAlpha(88, 0.5)
    c.beginPath()
    c.moveTo(cx, 0)
    c.lineTo(cx, h)
    c.moveTo(0, cy)
    c.lineTo(w, cy)
    c.stroke()

c.fillStyle = colors.tint(28)
    for (const s of seeds) {
      s.x += s.vx
      s.y += s.vy
      if (s.x < 0 || s.x >= cx) s.vx = -s.vx
      if (s.y < 0 || s.y >= cy) s.vy = -s.vy
      s.x = Math.max(0, Math.min(cx - 1, s.x))
      s.y = Math.max(0, Math.min(cy - 1, s.y))
      stamp(s.x, s.y)
    }
  }
}

左上で点が右へ動くと、右上の鏡像は左へ動く。折り目をまたいだ向きが反転して、4つが鏡合わせのまま漂う。折り目の上に乗った点は鏡像と一致するので、境目は途切れずに繋がる。

鏡映は群の生成元が1つだけの最小の対称。同じ折り返しを二度かけると元に戻る（x → w-x → w-(w-x) = x）ので、{なにもしない, 折り返す} の2要素で閉じた群になる（位数2）。横の鏡映と縦の鏡映を両方持たせると、4要素の群（クライン群 Z₂ × Z₂）になり、平面が4象限の基本領域に分かれる。鏡映の軸を n 本通せば基本領域は 1/2n に縮み、軸を 1 本通すごとに要素数が倍になる。

折り返しの軸を縦横の2本にすると、基本領域は平面の4分の1に縮む。軸を1本だけにすると左右の半分に戻り、点は2象限に映る。