# 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

`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!