diff --git a/grid.html b/grid.html
deleted file mode 100644
index 0eb8684..0000000
--- a/grid.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
-</head>
-<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
- <canvas id="canvas" width="800" height="600"></canvas>
-</body>
-<script src="grid.js"></script>
-</html>
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 @@
</head>
<body>
<ul>
- <li><a href="/grid.html">Grid</a></li>
<li><a href="/bezier-1.html">Bezier demo #1</a></li>
<li><a href="/bezier-2.html">Bezier demo #2</a></li>
<li><a href="/spline.html">Bezier spline demo</a></li>
+ <li><a href="/image.html">Image demo</a></li>
</ul>
</body>
</html>