Skip to content

Instantly share code, notes, and snippets.

@shov

shov/waves.html

Created June 4, 2022 20:37
Show Gist options
  • Save shov/7a1ced6164cf2f2cad9af4e056755f30 to your computer and use it in GitHub Desktop.
Save shov/7a1ced6164cf2f2cad9af4e056755f30 to your computer and use it in GitHub Desktop.
Download ZIP
draw waves on html canavs 2d context
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment