From f5d8a5ed0b711c5fc5bc81ebf0c1aa9a514102fa Mon Sep 17 00:00:00 2001 From: Thibaud Date: Thu, 30 Jan 2025 22:03:24 +0100 Subject: [PATCH] remove grid example --- grid.html | 12 ----- grid.js | 143 ----------------------------------------------------- index.html | 2 +- 3 files changed, 1 insertion(+), 156 deletions(-) delete mode 100644 grid.html delete mode 100644 grid.js diff --git a/grid.html b/grid.html deleted file mode 100644 index 0eb8684..0000000 --- a/grid.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Document - - - - - - diff --git a/grid.js b/grid.js deleted file mode 100644 index 9697482..0000000 --- a/grid.js +++ /dev/null @@ -1,143 +0,0 @@ -const CELL_SIZE = 150; -const GRID_SIZE = CELL_SIZE * 3; -const SHAPE_SIZE = 100; -const ANIMATE_DURATION = 500; // ms - -let ctx = undefined; -let circle = true; -let pendingClicks = []; -let shapes = []; - -function resizeCanvas() { - ctx.canvas.width = window.innerWidth; - ctx.canvas.height = window.innerHeight; -} - -function drawGrid(origin) { - ctx.strokeStyle = "white"; - ctx.lineWidth = 5; - - for (let x = 1; x < 3; ++x) { - ctx.moveTo(origin.x + x * CELL_SIZE, 0 + origin.y); - ctx.lineTo(origin.x + x * CELL_SIZE, origin.y + GRID_SIZE); - } - - for (let y = 1; y < 3; ++y) { - ctx.moveTo(origin.x + 0, origin.y + y * CELL_SIZE); - ctx.lineTo(origin.x + GRID_SIZE, origin.y + y * CELL_SIZE); - } - - ctx.stroke(); -} - -function drawAnimatedCircle(dt, x, y, hue) { - const radius = SHAPE_SIZE / 2; - const end = dt*2*Math.PI/ANIMATE_DURATION; - ctx.save(); - ctx.beginPath(); - ctx.arc(x, y, radius, 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 drawAnimatedCross(dt, x, y, hue) { - const startPoint = { x: x-SHAPE_SIZE/2, y: y-SHAPE_SIZE/2 }; - const halfAnim = ANIMATE_DURATION/2; - - ctx.beginPath(); - ctx.moveTo(startPoint.x, startPoint.y); - - const delta = SHAPE_SIZE*dt/halfAnim; - if (delta < SHAPE_SIZE) { // draw \ - d = Math.min(delta, SHAPE_SIZE); - ctx.lineTo(startPoint.x + d, startPoint.y + d); - } else { // draw / - ctx.lineTo(startPoint.x + SHAPE_SIZE, startPoint.y + SHAPE_SIZE); // keep \ drawn - ctx.moveTo(startPoint.x + SHAPE_SIZE, startPoint.y); - d = Math.min(delta - SHAPE_SIZE, SHAPE_SIZE); - ctx.lineTo(startPoint.x + SHAPE_SIZE - d, startPoint.y + d); - } - - ctx.lineWidth = 5; - const percent = Math.trunc(100*Math.min(delta, SHAPE_SIZE)/SHAPE_SIZE); - ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; - ctx.stroke(); -} - - -function update(time) { - const origin = { - x: ctx.canvas.width / 2 - GRID_SIZE / 2, - y: ctx.canvas.height / 2 - GRID_SIZE / 2 - }; - - ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); - drawGrid(origin); - - for (const evt of pendingClicks) { - const snapped = snapToGrid(origin, {x: evt.x, y: evt.y}); - const h = Math.floor(Math.random() * 255); - if (snapped) { - if (circle) { - shapes.push({kind: "circle", x: snapped.x, y: snapped.y, t: time, hue: h}); - } else { - shapes.push({kind: "cross", x: snapped.x, y: snapped.y, t: time, hue: h}); - } - circle = !circle; - } - } - pendingClicks = []; - - for (const shape of shapes) { - const dt = time - shape.t; - switch (shape.kind) { - case "circle": - drawAnimatedCircle(dt, shape.x, shape.y, shape.hue); - break; - case "cross": - drawAnimatedCross(dt, shape.x, shape.y, shape.hue); - break; - } - } - - window.requestAnimationFrame(update); -} - -function snapToGrid(origin, clientPos) { - // Coord relative to origin of the grid (origin) - const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y }; - const gridIndex = { - x: Math.floor(3 * pt.x / GRID_SIZE), - y: Math.floor(3 * pt.y / GRID_SIZE) - }; - if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) { - const center = { - x: origin.x + gridIndex.x * CELL_SIZE + CELL_SIZE/2, - y: origin.y + gridIndex.y * CELL_SIZE + CELL_SIZE/2 - }; - return center; - } - return undefined; -} - -function init() { - const canvas = document.getElementById("canvas"); - if (canvas.getContext) { - ctx = canvas.getContext("2d"); - resizeCanvas(ctx); // Init canvas - - canvas.addEventListener("click", (evt) => { - const {clientX, clientY} = evt; - pendingClicks.push({x: clientX, y: clientY}); - }); - - //window.addEventListener('resize', () => resizeCanvas(ctx)); - window.requestAnimationFrame(update) - } -} - -init(); - diff --git a/index.html b/index.html index fc929dd..645a5e2 100644 --- a/index.html +++ b/index.html @@ -15,10 +15,10 @@