Interactive Water Ripple Source Code

Water Ripple Example Water Ripple Tutorial CSS HTML5 JavaScript Draw the Gradients

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

Tags

Web developer, Web design, Website design, Web design company, Web programming Web development company, Website developers,webdev, how to design a Website, create a Website, Web application development, freelance Web developer, freelance Web designer, Web creator, developer Website, new Website design, Webpage development, Weebsite design company JavaScript, html5, Web development, Web programming, WebGL programming, Web projects, html 5, Web GL, Web design, Website developer, Web programming, design a Website, js, JavaScript code,JavaScripts, JavaScript help, css3, JavaScript program, css,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.