shigureni.dev

点群を回す — 奥行きで薄める

頂点が八つでなく数百あっても同じ。球面にまんべんなく点を撒き、丸ごと回して透視投影する。奥行きを点の大きさと薄さの両方に回すと、手前の点は大きく濃く、奥の点は小さく淡く、球の前後が分かれる。

球面に均一に点を撒くには黄金角 ≈ 137.5° を使う。i 番目の点の高さ y を −1 から 1 へ等間隔に取り、その緯度の円の半径 √(1 − y²) 上を、点ごとに黄金角だけ回した角度に置く。フィロタキシス（葉序）の螺旋を球に巻いた配置で、隣り合う点が重ならず疎密が少ない。乱数を使わないので毎回同じ配置になり、再現できる。

球面に三百点を撒いて回す。各点を回転と透視投影に通し、奥行き z から大きさと不透明度を決めている。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2
  const r = Math.min(w, h) * 0.32
  const camZ = Math.min(w, h) * 1.1
  const focal = Math.min(w, h) * 1.0
  const n = 300
  let t = 0

// 黄金角で球面に点を撒く（乱数なし、毎回同じ）
  const pts = []
  for (let i = 0; i < n; i++) {
    const y = 1 - (i / (n - 1)) * 2
    const rad = Math.sqrt(Math.max(0, 1 - y * y))
    const phi = i * 2.399963
    pts.push([Math.cos(phi) * rad, y, Math.sin(phi) * rad])
  }

return () => {
    t += 0.01
    const cyA = Math.cos(t)
    const syA = Math.sin(t)
    const cxA = Math.cos(t * 0.4)
    const sxA = Math.sin(t * 0.4)

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

for (const p of pts) {
      const x = p[0] * r
      const y = p[1] * r
      const z = p[2] * r
      const x1 = x * cyA - z * syA
      const z1 = x * syA + z * cyA
      const y2 = y * cxA - z1 * sxA
      const z2 = y * sxA + z1 * cxA
      const s = focal / (camZ + z2)

const depth = (z2 / r + 1) * 0.5 // 0(奥)..1(手前)
      c.fillStyle = colors.tintAlpha(20, 0.2 + depth * 0.7)
      c.beginPath()
      c.arc(cx + x1 * s, cy - y2 * s, 1 + depth * 3.5, 0, Math.PI * 2)
      c.fill()
    }
  }
}

点を撒く三行が黄金角の球面サンプリングで、i * 2.399963（ラジアンの黄金角）ずつ回しながら高さを下げると螺旋が球を覆う。回転と s = focal / (camZ + z2) の透視は頂点のときと同じで、点が増えただけ。depth を点の半径 1 + depth * 3.5 と不透明度の両方に回すと、手前の半球が大きく濃く、奥の半球が小さく淡く沈んで、点群でも球の丸みが出る。奥行きを薄さに回すのをやめて一律の濃さにすると、前後が潰れて円盤に見える。点を線や面で結べば立体を回すに渡る。