shov/waves.html

## waves.html
<html>

<head></head>

<body>
<canvas id="myCanvas" width="1000" height="1000"/>

<script>
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
var i;

var WH = 300
var SH = 360
var SW = 3600
var prevTime = Date.now()

function drawWaves(ctx, color, direction, shift) {
  var baseCounter = 0
  var counter = 0
  return (delta) => {
  	var loopTime = Date.now()
    var delta = loopTime - prevTime
    prevTime = loopTime


    baseCounter += (delta / 16) * 0.25 * direction
    if(baseCounter >= 10000 || baseCounter <= 10000) {
      baseCounter = 0
    }
    counter = baseCounter

    ctx.beginPath()
    var x=0,y=SH;
    ctx.moveTo(x, y)
    y = shift
    ctx.lineTo(x, y)


    var increase = 90/180*Math.PI / 9;


    for(i=0; i<=SW; i+=1){
        x = i;
        y =  shift - Math.sin(counter) * 3;
        counter += increase;

        ctx.lineTo(x,y);
    }

    y = shift
    x = SW
    ctx.lineTo(x,y)

    y = SH
    ctx.lineTo(x,y)

    x = 0
    ctx.lineTo(x,y)
    ctx.fillStyle=color
    ctx.fill()
    ctx.closePath()
  }
}

const blueWaweRenderer = drawWaves(ctx, '#bfb', +1, 300)
const tealWaweRenderer = drawWaves(ctx, '#5fb', -0.5, 350)
setInterval(() => {
	var loopTime = Date.now()
  var delta = loopTime - prevTime
  prevTime = loopTime
  ctx.clearRect(0, 0, SW, SH)

	blueWaweRenderer(delta)
  tealWaweRenderer(delta)

}, 16)
</script>
</body>
</html>
	<html>

	<head></head>

	<body>
	<canvas id="myCanvas" width="1000" height="1000"/>

	<script>
	var c = document.getElementById("myCanvas");

	var ctx = c.getContext("2d");
	var i;

	var WH = 300
	var SH = 360
	var SW = 3600
	var prevTime = Date.now()

	function drawWaves(ctx, color, direction, shift) {
	var baseCounter = 0
	var counter = 0
	return (delta) => {
	var loopTime = Date.now()
	var delta = loopTime - prevTime
	prevTime = loopTime


	baseCounter += (delta / 16) * 0.25 * direction
	if(baseCounter >= 10000 \|\| baseCounter <= 10000) {
	baseCounter = 0
	}
	counter = baseCounter

	ctx.beginPath()
	var x=0,y=SH;
	ctx.moveTo(x, y)
	y = shift
	ctx.lineTo(x, y)


	var increase = 90/180*Math.PI / 9;


	for(i=0; i<=SW; i+=1){
	x = i;
	y = shift - Math.sin(counter) * 3;
	counter += increase;

	ctx.lineTo(x,y);
	}

	y = shift
	x = SW
	ctx.lineTo(x,y)

	y = SH
	ctx.lineTo(x,y)

	x = 0
	ctx.lineTo(x,y)
	ctx.fillStyle=color
	ctx.fill()
	ctx.closePath()
	}
	}

	const blueWaweRenderer = drawWaves(ctx, '#bfb', +1, 300)
	const tealWaweRenderer = drawWaves(ctx, '#5fb', -0.5, 350)
	setInterval(() => {
	var loopTime = Date.now()
	var delta = loopTime - prevTime
	prevTime = loopTime
	ctx.clearRect(0, 0, SW, SH)

	blueWaweRenderer(delta)
	tealWaweRenderer(delta)

	}, 16)
	</script>
	</body>
	</html>