HTML5 Water Ripple Tutorial

Introduction

This HTML5 canvas tutorial explains how to create a water ripple effect which responds when you tap the canvas. Use a series of radial gradients to simulate small waves of water.

The water effect draws concentric circles on the canvas, in response to user taps. The circles are composed of radial gradients with alpha transparency. Draw the largest circles first and then the smaller circles. Transparency maximizes the color from the smaller circles in the center.

The water example doesn't take into account scroll events. If users scroll the window up or down, tap locations are incorrect. Learn to respond to scroll events with the Drag a Sprite series of tutorials. If you're unfamiliar with radial gradients see the Introduction to Radial Gradients Tutorial.

Coordinates in Response to Taps

When the user taps the canvas calculate the offset. onclick event parameters provide the X and Y coordinates of the browser window, not the canvas. Therefore use the canvas' bounding box to calculate offsets.

Save offsets to the bounding client rectangle to variable, bb, representing bounding box.

var bb = canvas.getBoundingClientRect();

nXOffset =  bb.left;

nYOffset = bb.top;

When the user taps the canvas, calculate the X and Y position within the canvas:

nX = e.pageX - nXOffset;

nY = e.pageY - nYOffset;

Use the nX and nY coordinates when drawing each gradient circle. The variable CIRCUM equals the circumference of a full circle calculated with Math.PI*2.

nX,
nY,
0,
nX,
nY,
);

...

context.arc(
nX,
nY,
0,
CIRCUM
);

Particles

When the Web page loads, function radWater(n) executes for each gradient in an array of gradients. The array is named arrayWater. Number N_PARTICLE_LENGTH, determines the number of water ripples to create. The following listing creates an array filled with radial gradients representing water.

for(var i = 0; i < N_PARTICLE_LENGTH; i++)
{
arrayWater.push(
i
)
);
}

Each particle includes properties, rgbEnd,rgbMid and nRadius. String rgbEnd maintains the ending stop color and opacity for the gradient. String rgbMid represents the middle stop color and opacity for the gradient. Number nRadius is the radius of the circle. Property nRadius increases gradually as the animation runs. The function radWater(n) creates one radial gradient, as follows.

n
)
{

var j = n % 2;

aCircleDimensions[n]
);

switch(j){

// The lighter color
case 0:

// The end stop:
this.rgbEnd = new String(
"rgba(64, 64, 255, 0.1)"
);

// The middle stop:
this.rgbMid = new String(
"rgba(64, 64, 255, 0.8)"
);
break;

case 1:

// The darker color
this.rgbEnd = new String(
"rgba(0, 0, 34, 0.1)"
);

this.rgbMid = new String(
"rgba(0, 0, 34, 0.8)"
);
break;
}

}

The function drawConcentricCircles() iterates over the Array of radial gradient ripples. drawConcentricCircles() creates a gradient from the rgbEnd and rgbMid stop color properties of each particle. Function drawConcentricCircles() draws an arc with the nRadius property of each particle, then increments nRadius, for the next loop of the animation. See the drawConcentricCircles() source code.

Tips

The water ripple effect looks great on personal computers, however it runs rather slowly on older Androids. Decrease the number of gradients for faster playback.

Reducing the number of water ripples displays the most dramatic performance improvement. Unfortunately the water looks less realistic with too few ripples. However with modifications to the colors, timing, and gradient diameters, the effect could look good with fewer gradients, as well.

Stop Programmatically

Code stops the animation after a specified number of loops. It's important to have a stopping point on any loop with JavaScript. It's especially important to run short loops, with processor intensive animation. Alpha values require processing power to calculate transparency with color.

If code is going to stop the timer in a function, it's usually best to stop the timer first. Then perform any other clean up operations. Running the timer, can use up processing time.

Photoshop

Color values for the Interactive Water Ripple Example were selected with Photoshop. It's easier to pick colors by eye. It's also faster to run code with prepared colors. You can calculate colors dynamically with code, but animation might slow down noticeably, especially with mobile devices.

Summary

This tutorial explained how to create a water ripple effect which responds when the user taps the canvas. Use a series of radial gradients to simulate small waves of water.

The water effect draws concentric circles on the canvas in response to taps on the canvas. The circles are composed of radial gradients with alpha transparency. Draw the largest circles first and then the smaller circles. Transparency maximizes the color on smaller circles in the center. See the Interactive Water Ripple Source code for more details.

The water example doesn't take into account scroll events. If users scroll the window up or down, tap locations are incorrect. Learn to respond to scroll events with the Drag a Sprite series of tutorials. tutorial. If you're unfamiliar with radial gradients see the Introduction to Radial Gradients Tutorial.

Web Development Company

Seven Thunder Software's Web application development scales beautifully to fit a wide range of devices from Android to iPhone and desktop PCs. If you need JavaScript help, a freelance Web developer or assistance with an existing Website, contact Seven Thunder Software.

Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.

Tags
Website developers, Website developer, freelance Web developer, webdev, create a Website, Web creator, developer Website, new Website design, Webpage development, Website development company, Web development, Web projects, design a Website, html 5, Web GL, js, JavaScript code, JavaScripts, JavaScript program, css,