From e1573b6d36bf24bbf7a18efac48828dd53587705 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Mon, 23 Sep 2024 17:58:55 +0200 Subject: [PATCH] initial commit --- index.html | 12 +++++++ main.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+) create mode 100644 index.html create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..d09e01d --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..dbd1aab --- /dev/null +++ b/main.js @@ -0,0 +1,93 @@ + +function drawCross(ctx, hue) { + ctx.beginPath(); + ctx.moveTo(200, 200); + ctx.lineTo(300, 300); + ctx.moveTo(300, 200); + ctx.lineTo(200, 300); + ctx.lineWidth = 5; + ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 1)`; + ctx.stroke(); +} + +function drawCircle(ctx) { + ctx.beginPath(); + // arc(x, y, radius, startAngle, endAngle) + ctx.arc(75, 75, 50, 0, Math.PI * 2); + ctx.stroke(); +} + +let startTime = undefined; + +let circles = []; +let crosses = []; +let pendingClicks = []; + +function animate(ctx, time) { + if (!startTime) { + startTime = time; + } + + for (const evt of pendingClicks) { + const h = Math.floor(Math.random() * 255); + if (evt.kind == "circle") { + circles.push({x: evt.x, y: evt.y, t: time, hue: h}); + } else if (evt.kind == "cross") { + crosses.push({x: evt.x, y: evt.y, t: time, hue: h}); + } + } + pendingClicks = []; + + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + for (const circle of circles) { + const dt = time - circle.t; + drawAnimatedCircle(ctx, dt, circle.x, circle.y, circle.hue); + } + + for (const cross of crosses) { + drawCross(ctx, cross.hue); + } + + window.requestAnimationFrame(time => animate(ctx, time)); +} + +function drawAnimatedCircle(ctx, dt, x, y, hue) { + const end = dt*((2*Math.PI) / 1000); + ctx.save(); + ctx.beginPath(); + ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI)); + const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI)); + ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; + ctx.lineWidth = 5; + ctx.stroke(); + ctx.restore(); +} + +function resizeCanvas(ctx) { + ctx.canvas.width = window.innerWidth; + ctx.canvas.height = window.innerHeight; +} + +function init() { + const canvas = document.getElementById("canvas"); + if (canvas.getContext) { + const ctx = canvas.getContext("2d"); + resizeCanvas(ctx); // Init canvas + + window.addEventListener('resize', () => resizeCanvas(ctx)); + window.requestAnimationFrame(time => animate(ctx, time)) + + canvas.addEventListener("click", (evt) => { + const {clientX, clientY} = evt; + pendingClicks.push({x: clientX, y: clientY, kind: "circle"}); + }); + + canvas.addEventListener("contextmenu", (evt) => { + evt.preventDefault(); + const {clientX, clientY} = evt; + pendingClicks.push({x: clientX, y: clientY, kind: "cross"}); + }); + } +} + +init();