手触りを足す — シェイクとパーティクル
反応を見せる小細工がジュース。動き自体は変えず、当たった瞬間に画面を揺らし、火花を散らす層を上に重ねる。
画面シェイクは trauma(衝撃の蓄積値)を一個持ち、衝撃のたびに加算、毎フレーム一定率で減衰させる手口。描画の直前に trauma ぶんだけランダムに translate をかける。trauma をそのまま揺れ幅に使わず二乗(または三乗)すると、小さな残り揺れが潰れて大きな衝撃だけが際立つ。Vlambeer の Jan Willem Nijman が trauma 方式として広めた。
画面シェイクは trauma という一個の値で持つ。衝撃のたびに足し、毎フレーム指数で減らす。描く直前に、その値ぶんだけ translate をランダムにずらす。
// 衝撃で足して、毎フレーム指数で減る trauma = Math.min(1, trauma + 0.7) // ... const shake = trauma * trauma // 二乗で曲げる c.translate((Math.random() * 2 - 1) * shake * 16, (Math.random() * 2 - 1) * shake * 16) trauma *= 0.9
trauma をそのまま揺れ幅にすると、小さな揺れがいつまでも残る。二乗すると、小さい値はさらに小さく潰れて、大きい値だけが派手に出る。下はスペースで trauma を足して、円を揺らす版。
スペースを叩くと、円がびくっと揺れて、すぐ収まる。0.9 倍ずつ減るから指数で落ち着く。叩き続けると trauma が上限の 1 まで溜まって、揺れが大きくなる。trauma * trauma を素の trauma に戻すと、小さな揺れが長く尾を引いて残る。