Water test

by jcubed111

HTML

<canvas id='canvas' width='500' height='500'></canvas>

CSS

body{
    background:#EEE;
    /*background: 
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee) 0 0 / 20px 20px fixed,
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee) 10px 10px / 20px 20px fixed,
    #fff;*/
}
canvas{
    width:500px;
    height:500px;
    /*background:#FFF;*/
    border:1px solid #CCC;
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-attachment: fixed;
}

JavaScript

//canvas base
function rgba(r,g,b,a) {
	return 'rgba('+Math.round(r)+','+Math.round(g)+','+Math.round(b)+','+a+')';
}

ctx=document.getElementById('canvas').getContext('2d');

xsize = 70;
ysize = 30;
movingRows = 5;

var points = [];
for(var y=0; y<13; y++) {
  points[y] = [];
  for(var i=-100; i<=600; i+=xsize) {
    points[y].push({
      x: i + ((y%2)?xsize/2:0),
      y: 150 + ysize*y,
      topness: Math.max(0, (movingRows-y)/movingRows),
    })
  }
}

offset = 0;
wavelength = 140;
amp = 15;

function newY(point) {
	return point.y + amp*Math.sin((point.x - offset)/wavelength*2*Math.PI)*point.topness;
}

function animate() {
	ctx.clearRect(0, 0, 500, 500);
	ctx.beginPath();
  
  for(var y=0; y<points.length; y++) {
    ctx.moveTo(points[y][0].x, newY(points[y][0]));
    for(var x=1; x<points[y].length; x++) {
      ctx.lineTo(points[y][x].x, newY(points[y][x]));
    }
    
    if(y == points.length-1) continue;
    
    if(y%2){
    	ctx.moveTo(points[y+1][0].x, newY(points[y+1][0]));
      for(var x=0; x<points[y].length-1; x++) {
        ctx.lineTo(points[y][x].x, newY(points[y][x]));
        ctx.lineTo(points[y+1][x+1].x, newY(points[y+1][x+1]));
      }
    }else{
      ctx.moveTo(points[y][0].x, newY(points[y][0]));
      for(var x=0; x<points[y].length-1; x++) {
        ctx.lineTo(points[y+1][x].x, newY(points[y+1][x]));
        ctx.lineTo(points[y][x+1].x, newY(points[y][x+1]));
      }
    }
  }
  
  ctx.stroke();
  offset++;
}

function color(topness) {
	//topness = Math.pow(topness,2);
	//if(topness == 1)
  	//return rgba(200, 200, 255, 0.7);
	return rgba(topness*200, topness*220, 255, 0.5+topness*0.2);
}

function animate2() {
	ctx.clearRect(0, 0, 500, 500);

  for(var y=0; y<points.length-1; y++) {
  	for(var x=0; x<points[y].length-1; x++){
			ctx.beginPath();
    	ctx.moveTo(points[y][x].x, newY(points[y][x]));
    	ctx.lineTo(points[y][x+1].x, newY(points[y][x+1]));
    	ctx.lineTo(points[y+1][x+(y%2)].x, newY(points[y+1][x+(y%2)]));
   ...