Chris Trottier on Nostr: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wave Animation</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="waveCanvas"></canvas>
<script>
const canvas = document.getElementById("waveCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// I always crave
// Hypnotic waves
// Rolling to shore
// Eternal, more
let waveY = canvas.height / 2;
const amplitude = 50;
const frequency = 0.01;
let increment = 0.05;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let x = 0; x < canvas.width; x++) {
const y = waveY + Math.sin(x * frequency + increment) * amplitude;
ctx.lineTo(x, y);
}
ctx.strokeStyle = "blue";
ctx.stroke();
increment += 0.05;
}
animate();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wave Animation</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="waveCanvas"></canvas>
<script>
const canvas = document.getElementById("waveCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// I always crave
// Hypnotic waves
// Rolling to shore
// Eternal, more
let waveY = canvas.height / 2;
const amplitude = 50;
const frequency = 0.01;
let increment = 0.05;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let x = 0; x < canvas.width; x++) {
const y = waveY + Math.sin(x * frequency + increment) * amplitude;
ctx.lineTo(x, y);
}
ctx.strokeStyle = "blue";
ctx.stroke();
increment += 0.05;
}
animate();
</script>
</body>
</html>