Interactive Water Ripple Source Code
CSS
body{
background-color:#222291;
}
HTML5 Markup
The canvas always renders square, however Web queries provide responsive Web design. The canvas scales up and down based on screen size and device orientation.
<body onload="javascript:loadGame()" > <div class="eGraphic" > <canvas id="cv" width="300" height="300" onclick="onMouseClick(event)" > Your browser doesn't support the canvas element. </canvas> </div> <div id="eDebug"> </div> <div class="tutorials" > <button onclick="javascript:startWater()"> Start </button> <button onclick="javascript:stopWater()"> Stop </button> </div>
JavaScript
// Time between frames for the animation:
var N_TIME = new Number(
100
);
// Default canvas dimensions
// along both X and Y
// axes.
// Dimensions scale up
// and down with CSS rule sets.
var N_DIM = new Number(
300
);
// Half the canvas dimensions:
var N_DIM_HALF = new Number(
150
);
// Calculate the
// circumference once,
// for many uses.
var CIRCUM = new Number(
Math.PI*2
);
var nXOffset = new Number(
N_DIM_HALF
);
var nYOffset = new Number(
N_DIM_HALF
);
var canvas,context,eDebug = null;
// Array of particles:
var arrayWater = [];
var timer = null;
var N_PARTICLE_LENGTH = new Number(
11
);
// Array of dimensions
// for each circle gradient:
var aCircleDimensions = [
300,
200,
180,
160,
140,
120,
100,
80,
60,
40,
20,
10
];
// The number of times
// the animation has played:
var nCount = new Number(
0
);
// The X and Y offsets:
// Start at the
// canvas center.
var nX = new Number(
N_DIM_HALF
);
var nY = new Number(
N_DIM_HALF
);
/**
* function radWater()
* creates one radial
* gradient particle
* for the water effect.
*/
function radWater(n){
var j = n % 2;
// The starting radius
// for the gradient:
this.nRadius = new Number(
aCircleDimensions[n]
);
switch(j){
// The lighter color
// for the radial gradient:
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
// for the radial gradient:
this.rgbEnd = new String(
"rgba(0, 0, 34, 0.1)"
);
this.rgbMid = new String(
"rgba(0, 0, 34, 0.8)"
);
break;
}
}
Draw the Gradients
/**
* function
* drawConcentricCircles()
* iterates over an array
* of water particles,
* displays each as a ring,
* then increases
* the diameter of the ring.
*/
function drawConcentricCircles(){
for (var i = 0; i < N_PARTICLE_LENGTH; i++){
var p = arrayWater[i];
// Create a gradient
// centered at the last tap coordinte:
gradient = context.createRadialGradient(
nX,
nY,
0,
nX,
nY,
p.nRadius
);
// Use the colors from
// our particle:
gradient.addColorStop(
1,
p.rgbEnd
);
gradient.addColorStop(
0.5,
p.rgbMid
);
gradient.addColorStop(
0,
p.rgbEnd
);
// Fill the canvas
// with the gradient:
context.fillStyle = gradient;
context.arc(
nX,
nY,
p.nRadius,
0,
CIRCUM
);
context.fill();
p.nRadius += 8;
}
nCount++;
if (nCount > N_PARTICLE_LENGTH){
// Especially for mobile devices
// stop the animation
// programmatically.
// Don't keep the animation
// running indefinitely.
stopWater();
resetWater();
nCount = 0;
}
}
/**
* function loadGame()
* obtains references to elements
* declared in HTML.
* creates an Array of 'water'
* radial gradients.
*/
function loadGame(){
canvas = document.getElementById(
"cv"
);
context = canvas.getContext(
"2d"
);
eDebug = document.getElementById(
"eDebug"
);
// Obtain the position of the
// canvas's bounding box for
// calculating user tap offsets:
var bb = canvas.getBoundingClientRect();
nXOffset = bb.left;
nYOffset = bb.top;
context.fillStyle = "blue";
context.fillRect(
0,
0,
N_DIM,
N_DIM
);
// Make an Array of radial gradients.
for(var i = 0; i < N_PARTICLE_LENGTH; i++)
{
arrayWater.push(
new radWater(
i
)
);
}
}
/**
* function onMouseClick()
* obtains the tapped coordinate
* within the browser window,
* then calculates the offsets
* into the canvas.
*/
function onMouseClick(e)
{
nX = e.pageX - nXOffset;
nY = e.pageY - nYOffset;
startWater();
}
/**
* function resetWater()
* assigns the radius of
* each 'ripple',
* to the original radii.
*/
function resetWater(){
for(var i = 0; i < N_PARTICLE_LENGTH; i++){
arrayWater[i].nRadius = new Number(
aCircleDimensions[i]
);
}
}
/**
* function stopWater()
* stops the timer, and sets the timer to null.
*/
function stopWater(){
if (timer != null){
clearInterval(
timer
);
timer = null;
}
}
/**
* function startWater()
* first, stops the timer,
* if it's running.
* It's helpful to stop the timer,
* while filling the canvas with blue,
* and resetting the water particle.
* Last the timer is restarted.
*/
function startWater(){
if (timer != null){
stopWater();
}
// Fill the canvas with blue:
context.fillRect(
0,
0,
N_DIM,
N_DIM
);
// Reset the diameters
// of each gradient:
resetWater();
// Reset the animation count.
nCount = 0;
context.beginPath();
// Last, set the timer,
// to play
// drawConcentricCircles every
// 'N_TIME' intervals.
timer = setInterval(
drawConcentricCircles,
N_TIME
);
}
Web Development Company
Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.
