shigureni.dev

消さずに、薄く残す

動く点を毎フレーム描く前に、画面をどう扱うかで残像が決まる。三通りある。clearRect で全消しすると最新の点しか残らない。紙の色（paper = tint(238)）を不透明で上から塗っても同じく全消しになる。同じ紙色を薄いアルファで塗ると、古い点が一段ずつ沈んで後ろに尾が伸びる。下は同じ速さで動く点を三つの帯に並べ、左から全消し・不透明塗り・薄塗りにしている。薄塗りの帯だけ軌跡が残る。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const bandWidth = w / 3
  const labels = ["clearRect", "paper 不透明", "tintAlpha 薄塗り"]

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

let angle = 0

return () => {
    angle += 0.05

for (let band = 0; band < 3; band++) {
      const left = band * bandWidth
      const centerX = left + bandWidth / 2
      const centerY = h / 2
      const radius = Math.min(bandWidth, h) * 0.32

if (band === 0) {
        c.clearRect(left, 0, bandWidth, h)
        c.fillStyle = colors.paper
        c.fillRect(left, 0, bandWidth, h)
      } else if (band === 1) {
        c.fillStyle = colors.paper
        c.fillRect(left, 0, bandWidth, h)
      } else {
        c.fillStyle = colors.tintAlpha(238, 0.06)
        c.fillRect(left, 0, bandWidth, h)
      }

const x = centerX + Math.cos(angle) * radius
      const y = centerY + Math.sin(angle * 1.3) * radius

c.fillStyle = colors.tint(20)
      c.beginPath()
      c.arc(x, y, 4, 0, Math.PI * 2)
      c.fill()
    }

c.fillStyle = colors.tintAlpha(60, 0.9)
    for (let band = 0; band < 3; band++) {
      c.fillRect(band * bandWidth, h - 6, bandWidth - 2, 6)
    }
  }
}

帯と帯の境目を薄塗りが越えないよう、塗る矩形を帯の幅で区切っている。塗る濃さが尾の長さを決める。tintAlpha(238, 0.06) のアルファを上げると古い点の消えが速くなって尾が短くなり、下げると尾が長く伸びて画面が埋まる。

薄塗りで尾を残すのは指数減衰そのもの。アルファ a の紙色を上から重ねるたび、古い点の「紙からの距離」が毎フレーム (1 − a) 倍に縮む。n フレーム後には (1 − a)ⁿ まで沈むので、点は急に消えるのでなく指数関数で紙に溶けていく。globalAlpha を下げて紙を塗るのと tintAlpha(238, a) で塗るのは、同じ「上から半透明を一枚かける」操作で効きはほぼ同じ。clearRect は a = 1（一回で全部消す）の極端、不透明塗りも同じく a = 1 に当たる。

この薄塗りの膜で軌跡を引く描き方を全面で回しているのが flow。向きの場に沿って大量の粒子を歩かせ、毎フレーム tintAlpha の膜を一枚かけて尾を引かせる。下は同じ仕掛けを最小化したもの。sin と cos で各点の向きを決め、その向きへ一歩進めて点を打つ。背景を薄塗りで重ねるので、粒子の通った道が筋になって残る。

const fieldAngle = (x, y, time) =>
  (Math.sin(x * 0.012 + time) + Math.cos(y * 0.012 - time)) * Math.PI

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const count = 600
  const step = 1.4

const particles = []
  for (let i = 0; i < count; i++) {
    particles.push({ x: Math.random() * w, y: Math.random() * h, life: 1 })
  }

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

let time = 0

return () => {
    time += 0.004

c.fillStyle = colors.tintAlpha(238, 0.05)
    c.fillRect(0, 0, w, h)

for (const particle of particles) {
      const angle = fieldAngle(particle.x, particle.y, time)
      particle.x += Math.cos(angle) * step
      particle.y += Math.sin(angle) * step
      particle.life -= 0.003

const offMap =
        particle.life <= 0 || particle.x < 0 || particle.x >= w || particle.y < 0 || particle.y >= h

if (offMap) {
        particle.x = Math.random() * w
        particle.y = Math.random() * h
        particle.life = 1
      }

c.fillStyle = colors.tint(20)
      c.fillRect(particle.x, particle.y, 1.6, 1.6)
    }
  }
}

粒子の寿命が尽きるか画面の外へ出たら、別の一様な位置へ撒き直す。clearRect を一度も呼ばず tintAlpha の膜だけで描くので、点が忘れられていく速さが尾の長さになる。膜のアルファを step の大きさと合わせて握ると、短い破線から長い流線まで筋の質が変わる。