070 · 生成

monster

パーツを選んで重ねる

モンスターを一体ずつ手で描く代わりに、パーツのカタログを用意して seed で組み合わせる。体型・目・口・頬・角・足をカテゴリごとに並べ、seed から部品を選んで 16x16 のグリッドに重ねる。すべて左右対称に置く。体を塗ってから、目や口はその体をくり抜いた穴として開け、角と足だけ体の外へ生やす。

形が崩れないように、体型は丸の1種に固定し、目・口・頬も決まった位置に置く。seed で変わるのは瞳の大きさ、頬の有無、角と足の形、そして色相だけ。崩れる組み合わせを最初から作らないので、どれも同じ顔立ちの仲間に見える。

レイヤーを重ねて1枚を作る組み合わせ生成。各レイヤーが独立に選ばれるので、部品を1つ足すと種類が掛け算で増える。ただ完全に自由へ組み合わせるとパーツ同士が噛み合わず形が破綻しやすい。土台の体型と顔(目・口・頬)を固定し、外側の飾り(角・足)と色だけを振ると、破綻を抑えながら個体差を出せる。乱数は mulberry32 のような決定的な疑似乱数を使い、seed から毎回同じ一体を引く。

下は体型と目と角を選ぶ仕組みだけを取り出した例。種を変えるたびに別の一体が組み上がる。

export default (c) => {
  const N = 16
  const dot = c.canvas.width / N

// seed から決定的な疑似乱数(mulberry32)を作る
  const makeRng = (seed) => {
    let a = seed >>> 0
    return () => {
      a += 0x6d2b79f5
      let t = a
      t = Math.imul(t ^ (t >>> 15), t | 1)
      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
    }
  }

// パーツカタログ。体型は各行の半幅、目と角は中心からのオフセット[row,k]
  const BODIES = [
    [0, 0, 0, 3, 4, 4, 5, 5, 5, 5, 5, 4, 4, 3, 0, 0],
    [0, 0, 2, 3, 3, 4, 4, 4, 4, 4, 4, 4, 3, 3, 2, 0],
    [0, 0, 0, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 0, 0],
  ]
  const EYES = [
    [
      [7, 2],
      [7, 3],
      [8, 2],
      [8, 3],
    ],
    [
      [7, 0],
      [7, 1],
      [8, 0],
      [8, 1],
    ],
  ]
  const HORNS = [
    [],
    [
      [1, 2],
      [2, 2],
      [3, 2],
    ],
  ]

// seed から1体ぶんの 0/1 グリッドを組み立てる
  const build = (seed) => {
    const rng = makeRng(seed)
    const pick = (n) => Math.floor(rng() * n)
    const grid = new Array(N * N).fill(0)
    const sym = (row, k, v) => {
      if (7 - k >= 0) grid[row * N + 7 - k] = v
      if (8 + k < N) grid[row * N + 8 + k] = v
    }

const body = BODIES[pick(BODIES.length)]
    for (let row = 0; row < N; row++) for (let k = 0; k < body[row]; k++) sym(row, k, 1)

let top = N
    for (let row = 0; row < N; row++)
      if (grid[row * N + 7] === 1) {
        top = row
        break
      }

// 目: 体の上だけくり抜いて穴にする
    for (const cell of EYES[pick(EYES.length)]) {
      if (grid[cell[0] * N + 7 - cell[1]] === 1) grid[cell[0] * N + 7 - cell[1]] = 0
      if (grid[cell[0] * N + 8 + cell[1]] === 1) grid[cell[0] * N + 8 + cell[1]] = 0
    }
    // 角: 体の上端から外へ生やす
    for (const cell of HORNS[pick(HORNS.length)]) sym(top - cell[0], cell[1], 1)

return grid
  }

let grid = build(1)
  let t = 0

return () => {
    t += 1
    if (t % 90 === 1) grid = build((t * 2654435761) >>> 0) // 種を変えて別の一体に

c.fillStyle = colors.paper
    c.fillRect(0, 0, c.canvas.width, c.canvas.height)
    c.fillStyle = colors.ink
    for (let row = 0; row < N; row++)
      for (let col = 0; col < N; col++)
        if (grid[row * N + col] === 1) c.fillRect(col * dot, row * dot, dot, dot)
  }
}

色

sky 単色の制約をこの一枚だけ外して、パーツごとに色を分けた。体は個体ごとの色相、白目は白、瞳と口は暗い色、頬はピンク。グリッドには 1=体 2=白目 3=瞳と口 4=頬と種類を書き込んでおき、描くときに種類を色へ写す。黒目の左上には白を1ドット残してハイライトにする。

ピクセルパーフェクト

低い解像度の canvas に1ドット=1pxで描き、表示だけを整数倍へ引き伸ばす。座標も大きさもすべて整数ドットに揃え、サブピクセルのにじみや中途半端な縮みが出ないようにした。動きは付けず、16x16 の枠の中で形を立てることに絞っている。