Interactive Particle Explosion Tutorial
Introduction
This tutorial explains how to create a particle explosion effect with the HTML5 canvas
for mobile and desktop Web development.
The code uses an Array of particles.
Each particle includes a set of properties.
When the user taps the canvas, particles draw to the canvas in concentric circles
around the location of the tap.
Each iteration through the Array of particles,
displays the particles in a larger circle,
with more opacity, and slightly random offsets.
This tutorial explains one method to create explosions
which gradually expand and become brighter over time.
Opacity values increase and the
lighter
global composite operation lightens gradients
which draw over other gradients.
This tutorial covers preparing graphics which radiate from touch coordinates. Where the user taps the canvas an explosion displays.
Particles Draw with Increasing Brightness
Use the globalCompositeOperation = "lighter" setting to magnify the brightness
of particles as they render over each other.
During a reset, assign
the global composition operation to globalCompositeOperation = "source-over".
Clear the canvas to black.
Assign globalCompositeOperation = "lighter".
Then begin drawing again.
Position Particles
The primary functions for positioning particles are Math.cos() and Math.sin().
Assume the variable named n represents an angle in radians.
Math.cos(n) provides the X position for the particle located at angle n.
Math.sin(n)
provides the Y position for the particle located at angle n.
Math.cos() and Math.sin() allow code to place the particles in a circle.
The draw() function increases the radius of the circle, to simulate expansion of an explosion.
Particles
A particle is a circular radial gradient with a set of properties. Each Radial Gradient Particle includes the following properties.
nRadius,nOpacity,nRadIncrease,aaLocation,r,g,b.
Property nRadius is a number representing the radius of the radial gradient.
nOpacity is the opacity the current radial gradient will display.
nRadIncrease is the radial increase of the
X and Y coordinate of the particle, around the center of the explosion.
aaLocation is an associative array with the properties x,
and y.
Property x represents the X coordinate of the center
of the explosion. Property y represents the Y coordinate of the center of the explosion.
Properties
r,g,b are the red, green, and blue, components of color for a
radial gradient. The colors within any given gradient don't change during animation.
Property nOpacity increases by 0.005
for each iteration over the array of particles.
For each rendering of a set of particles in the array, both the opacity and (X,Y) coordinate offsets increase. The increased values provide the effect of an ever expanding explosion.
Draw the Particles
The function draw()
iterates over the array of particles named arrayParticles.
For each particle, new X and Y coordinates are calculated,
based on taps by the user.
The X and Y coordinates
are modified by a semi random value,
and the nRadIncrease property.
nOpacity is increased as well, causing
the explosion to appear brighter, while the animation runs.
The particle animation stops running when any particle's
nOpacity property exceeds the maximum
opacity setting.
The maximum opacity setting is assigned to
constant
N_OPACITY.
The particle explosion's maximum
opacity value equals 0.4.
That opacity level might seem small, however
as particles draw over each other with the
lighter
global composite operation, the
explosion increases in brilliance.
Tips
Minimize the number of particles
and number of calculations for mobile devices.
The particle count for this example
equals 30 however as processing
power increases, particle count can increase too.
Test on Old Devices
Test on the widest range of devices available. Include old devices and computers. Testing for the least common denominator, helps find issues, and enables examples to run on older as well as newer devices. Usually if an example runs on an older device, it runs great on a newer device too. But the opposite isn't often the case.
Precalculate
Precalculate as many variables as possible.
A lot happens when function draw() executes
during an animation sequence.
Process as much as possible
before an animation runs. For example
var CIRCUM = new Number(Math.PI*2); provides
the circumference of a circle once at the beginning of
the program. It can slow processing to include
unnecessary computations during the draw() function.
Try-Catch Blocks
The example deliberately left the try-catch block in the code.
The try-catch block provides
output during development. However try-catch
blocks can slow down processing and probably shouldn't be found in
code which runs repeatedly. However,
programmers who might try the example code and make
modifications could find the try-catch block useful.
Graphics Applications
Photoshop or other graphics applications
can help determine explosion
colors.
Use the color picker and some experiments to find
colors for explosions and other Web page projects.
Summary
This tutorial explained how to create a particle explosion effect with the HTML5 canvas
for mobile and desktop Web development.
The code uses an Array of particles.
Each particle includes a set of properties.
When the user taps the canvas, particles draw to the canvas in concentric circles
around the location of the tap.
Each iteration through the Array of particles,
displays the particles in a larger circle,
with more opacity, and slightly random offsets.
This tutorial explained one method to create explosions
which gradually expand and become brighter over time.
Opacity values increase and the
lighter
global composite operation lightens gradients
which draw over other gradients.
This article also included some helpful tips. See the Interactive Particle Explosion Source Code for more details.
Have fun and love learning!
