Liquid Effect Tutorial

HTML5 Web Development

Molten Lava Example Radial Gradient Basics Create Lava Particles Add Color The Key to Glowing Particles Display the Particles Tips Summary Lava HTML Markup Lava JavaScript Source Code Page

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, 
 this.radius
);

Add Color

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"
);

this.gradient.addColorStop(
 0.25, 
 "orange"
);
		
this.gradient.addColorStop(
 0.75, 
 "red"
);

this.gradient.addColorStop(
 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.

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.