Javascript Physics - Creating an Explosion Effect
This is a fun demo of an explosion effect using the TweenLite animation library.
(more)
The green square can be repositioned to set the center of the force that will eminate outward
at the rate entered in the Speed box (px/s). The wave will have a starting intensity based
on the value in the Intensity box (kg*px^2/s^2). The Drag field will control the deacceleration (px/s^s)
of each box. This demo makes heavy use of the TimelineLite object to control the timing of the
animation. You can step through the animation one "frame" at a time, run it in slow-motion, or
use the slider control to move through the sequence. Please read my blog post for a detailed look
at how this demo was created.
Intensity:
Speed:
Drag:
Time Index: 0 seconds
Key:
area:area of box
mass:fictional mass of box
surf:perimeter of box
dx:x-delta from epicenter
dy:y-delta from epicenter
dr:distance (radius) from epicenter
sst:time of wave impact
mmt:fully accelerated time
eet:time of complete stop
osd:speed at mmt
md:distance during acceleration
td:distance during deacceleration
mx:accerating X-delta
my:accerating Y-delta
fx:final X-delta
fy:final Y-delta
rota:rotation during acceleration
rotb:rotation during deacceleration
cx:box x-coord
cy:box y-coord
total:total time of animation