Ben's Sandbox
  • Projects
  • Tags

Javascript Physics - Creating an Explosion Effect


View Blog   View Source  
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
Debug (key)


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

© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap