Particle Explosion Example Introduction Particles Tips Summary Particle Explosion Source Code

Interactive Particle Explosion Tutorial

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.

For details regarding interactivity for mobile and desktop devices please see the very thorough Drag a Sprite example with tutorials. The Drag a Sprite example links to a series of tutorials which explain processing touch and mouse movement with scrolling, resizing, and reorienting the device. 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. See more HTML5 examples.

For details regarding interactivity for mobile and desktop devices please see the very thorough Drag a Sprite example with tutorials. The Drag a Sprite example links to a series of tutorials which explain processing touch and mouse movement with scrolling, resizing, and reorienting the device. This tutorial covered preparing graphics which radiate from touch coordinates. Where the user taps the canvas an explosion displays.

Have fun and love learning!

More HTML5 Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.