shigureni.dev

火花を散らす

衝撃の位置から飛ぶ火花。短い寿命を持った点を放射状にばらまいて、寿命が尽きたら消す。寿命を life として持ち、毎フレーム減らす。

パーティクルは、寿命と速度を持った小さな点の群れ。生成時に向きをランダムに振って放射状に撒き、毎フレーム位置と寿命を進める。life を 1→0 に減らしながら透明度や大きさに写すと、点が時間とともに薄れて消える。配列から消すときは、後ろから舐めて、尽きた要素を末尾の要素で上書きしてから pop する。順序を保たない代わりに、要素のずらしが起きず一定時間で間引ける手口が swap-pop（swap-remove）。

const a = Math.random() * Math.PI * 2 // 向きはランダム
sparks.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s, life: 1 })
// life を透明度に使って、尽きた点を末尾と入れ替えて pop
c.fillStyle = colors.tintAlpha(8, p.life)

配列を後ろから舐めて、life が尽きた点を末尾の要素で上書きしてから pop する。穴を空けずに間引くので、生きている点の順序は崩れるが、splice のような後続要素のずらしが起きない。下はスペースで火花だけ出す。

export default (c, signal) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const key = keyboard(signal)

const sparks = []

key.onKeydown((event) => {
    if (event.key === " " && !event.repeat) {
      for (let i = 0; i < 18; i++) {
        const a = Math.random() * Math.PI * 2
        const s = 1.5 + Math.random() * 3
        sparks.push({
          x: w * 0.5,
          y: h * 0.5,
          vx: Math.cos(a) * s,
          vy: Math.sin(a) * s,
          life: 1,
        })
      }
    }
  })

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

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

c.fillStyle = colors.ink
    c.beginPath()
    c.arc(w * 0.5, h * 0.5, 14, 0, Math.PI * 2)
    c.fill()

for (let i = sparks.length - 1; i >= 0; i--) {
      const p = sparks[i]
      p.x += p.vx
      p.y += p.vy
      p.vy += 0.06
      p.life -= 0.03
      if (p.life <= 0) {
        sparks[i] = sparks[sparks.length - 1]
        sparks.pop()
        continue
      }
      c.fillStyle = colors.tintAlpha(8, p.life)
      c.fillRect(p.x - 1.5, p.y - 1.5, 3, 3)
    }
  }
}

スペースを叩くと、中央から 18 個の点が放射状に散る。向きはランダムで、vy を毎フレーム足すので少し落ちる。life が透明度に効いて、消える寸前は薄くなる。life が 0 を切った点だけが末尾と入れ替えて消えるので、画面の外まで飛んでも勝手に片付く。

画面シェイクと火花を同じ hit に束ねる。スペースで trauma を足し、同じ位置に火花をばらまく。揺れと火花が同時に出る。

export default (c, signal) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const key = keyboard(signal)

let trauma = 0
  const sparks = []

const hit = () => {
    trauma = Math.min(1, trauma + 0.7)
    for (let i = 0; i < 18; i++) {
      const a = Math.random() * Math.PI * 2
      const s = 1.5 + Math.random() * 3
      sparks.push({
        x: w * 0.5,
        y: h * 0.5,
        vx: Math.cos(a) * s,
        vy: Math.sin(a) * s,
        life: 1,
      })
    }
  }

key.onKeydown((event) => {
    if (event.key === " " && !event.repeat) hit()
  })

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

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

c.save()
    const shake = trauma * trauma
    c.translate((Math.random() * 2 - 1) * shake * 16, (Math.random() * 2 - 1) * shake * 16)
    trauma *= 0.9

c.fillStyle = colors.ink
    c.beginPath()
    c.arc(w * 0.5, h * 0.5, 14, 0, Math.PI * 2)
    c.fill()

c.restore()
  }
}

スペースを叩くと、円がびくっと揺れて、同じ中央から火花が散る。hit の中で trauma を足し、同じループで火花を生む。trauma * trauma の揺れは数フレームで収まり、火花は life が尽きるまで飛んで落ちる。同じ「円が一個ある」絵に、揺れと火花が同時に乗る。