# Liquid Effect Tutorial

## Introduction

This tutorial demonstrates how to create unique visual effects with HTML5 radial gradients and global composite operations. The article focuses on the molten lava example. However change colors for visual effects such as colorful paint, liquid, jello, and other beautiful blending colors. Images are generated with radial gradients. Graphical images aren't required for the examples related to this tutorial. If you're unfamiliar with radial gradients see the introduction to radial gradients tutorial.

Use radial gradients in your own Websites or games. Experiment with different colors, radii, and distances for even more amazing visual effects. Tap the images above and at the bottom of the Web page, for examples created with radial gradients.

## Create Lava Particles

Create particles, which represent lava, with individual radial gradients. Each particle is a self enclosed class. `this` represents a particle with properties `this.nX, this.nY, this.radius` and `this.gradient`.

Display a number of particles at different coordinates with varying radii. Function `particleLava()` creates a radial gradient particle with semi random radius, X, and Y coordinates. The particleLava() function calls `Math.random()` for each particle.

First generate X and Y coordinates per particle. `Math.random()` returns a number between `0.0` and `1.0`. The molten lava example assigns `150` to variable `N_D`. The molten lava example assigns `75` to variable `N_DIM_Q`. Variable `N_DIM_Q` represents one quarter of the `300` pixel square canvas. The following line of code creates a semi random X coordinate within the range `75` to `225`. Apply the same expression for the Y coordinate too.

`this.nX = Math.random() * N_D + N_DIM_Q;`

The origin of each circular particle ranges between `(75,75)` and `(225,225)`. The origin of each particle is never closer than `75` pixels from the edge of the canvas. Remember the canvas is `300` pixels square.

Second generate a radius. Variable `N_RAD` equals `32`. Variable `N_RAD` represents the maximum radius for a particle. The following expression generates a radius in the range `0` to `32`.

`this.radius = Math.random() * N_RAD`

Last create a radial gradient with inner and outer circles centered at coordinates `(this.nX,this.nY)` and radii of `this.radius`. The following listing creates a radial gradient with semi random X,Y coordinates and radius.

```this.gradient = context.createRadialGradient(
this.nX,
this.nY,
0,
this.nX,
this.nY,
);
```

Add color stops to make gradients flow from one color to the next. The lava effect was generated with an `Array` of particles composed of carefully colored radial gradients. The gradients radiate outward from yellow, to orange, red, then black. The background is black.

The following listing demonstrates how to add color stops with each particle displaying four colors. The origin of the circle is yellow. One quarter of the distance from the origin is orange. Three quarters of the distance from the origin is red. The perimeter is black. See the particleLava() function for more details.

Colors in the following listing start yellow, change to orange, then red, and finally black.

```this.gradient.addColorStop(
0,
"yellow"
);

0.25,
"orange"
);

0.75,
"red"
);

1,
"black"
);
```

## The Key to Glowing Particles

`globalCompositeOperation = "lighter"` provides the key to display glowing, flowing particles. As radial gradients display on the canvas they combine in unusual patterns, providing bright glowing areas.

The default `globalCompositeOperation` equals source-over. With source-over graphics display opaquely on top of each other. For example, first draw a blue rectangle on the canvas. Second draw a red rectangle, in the same location with the same dimensions, on the canvas. The red rectangle would completely cover the blue rectangle and you would only see the red rectangle, with the `"source-over"` value.

However the `"lighter"` global composite operation, combines the lightest colors from both the red rectangle and the blue rectangle. Displaying a red rectangle over a blue rectangle results in a bright violet rectangle, with the `globalCompositeOperation` lighter value.

The Molten Lava, Colorful Paint, and Beautiful Blending Colors examples, apply global composition lighter to provide brilliance where colors overlap.

## Display the Particles

Clear the canvas before displaying an `Array` of particles. Assign `globalCompositeOperation = "source-over"` and fill the entire canvas with the background color. If the canvas isn't cleared, then the lightest colors from previous drawing operations continue to display.

The code below clears the canvas. Variable `N_DIM` represents both the width and the height of the canvas.

```context.globalCompositeOperation = "source-over";

context.fillStyle = "black";

context.fillRect(
0,
0,
N_DIM,
N_DIM
);
```

To display the particles, assign `globalCompositeOperation = "lighter"`. Then iterate over the `Array` of particles, displaying one at a time. See the drawLava() function for details.

## Tips

Remember to assign `globalCompositeOperation = "source-over"` when clearing the canvas, and `globalCompositeOperation = "lighter"` when drawing particles.

Keep the number of particles to a minimum for individual Web pages. Some mobile devices slow down with large drawing operations.

Enjoy modifying colors, sizes, and locations to create liquid light effects, spilled paint, rain drops, and more.

## Summary

This tutorial demonstrated how to create unique visual effects with HTML5 radial gradients and global composite operations. The article focused on the molten lava example. However change colors for visual effects such as colorful paint, liquid, jello, and other beautiful blending colors. Images are generated with radial gradients. Graphical images weren't required for the examples related to this tutorial. If you're unfamiliar with radial gradients see the introduction to radial gradients tutorial.