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>
Published at
2023-10-30 05:52:09Event JSON
{
"id": "10d02c3ab3a5509d98703d47048d3813d2fc8db58f2d41f1734605f2a8b7cca6",
"pubkey": "964189b1fc2cc823b2569e5035074a4d2b74ee2c2c07c6b81518ba31556075bc",
"created_at": 1698641529,
"kind": 1,
"tags": [
[
"proxy",
"https://atomicpoet.org/objects/6116b051-db79-4243-8657-6355e0133f6c",
"activitypub"
]
],
"content": "\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eWave Animation\u003c/title\u003e\n \u003cstyle\u003e\n canvas {\n border: 1px solid black;\n }\n \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003ccanvas id=\"waveCanvas\"\u003e\u003c/canvas\u003e\n\n \u003cscript\u003e\n const canvas = document.getElementById(\"waveCanvas\");\n const ctx = canvas.getContext(\"2d\");\n\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n // I always crave\n // Hypnotic waves\n // Rolling to shore\n // Eternal, more\n\n let waveY = canvas.height / 2;\n const amplitude = 50;\n const frequency = 0.01;\n let increment = 0.05;\n\n function animate() {\n requestAnimationFrame(animate);\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n ctx.beginPath();\n for (let x = 0; x \u003c canvas.width; x++) {\n const y = waveY + Math.sin(x * frequency + increment) * amplitude;\n ctx.lineTo(x, y);\n }\n\n ctx.strokeStyle = \"blue\";\n ctx.stroke();\n\n increment += 0.05;\n }\n\n animate();\n\n \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\nhttps://atomicpoet.org/media/81586532-8fa8-42bd-8baa-4624b3406caa/7ec13e23da89be3a4e51397dcfd54bfc.jpg",
"sig": "126dfd36232766bd77d188c50937e9e78e1b36f0f7d7d555d1d059da009541046dd187cc3dd5bd764aa29f5183becfbd7dcb4b061ef3e87131fa6a75c0c6cfb0"
}