diff --git a/grid.js b/grid.js
index c94c2d3..6a1fc2a 100644
--- a/grid.js
+++ b/grid.js
@@ -3,87 +3,135 @@ const size = cellSize * 3;
const margin = 10;
let ctx = undefined;
-let initialPos = undefined;
let circle = true;
+let pendingClicks = [];
+let shapes = [];
function resizeCanvas() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
-function drawGrid() {
+function drawGrid(origin) {
ctx.strokeStyle = "white";
ctx.lineWidth = 5;
-
+
for (let x = 1; x < 3; ++x) {
- ctx.moveTo(initialPos.x + x * cellSize, 0 + initialPos.y);
- ctx.lineTo(initialPos.x + x * cellSize, initialPos.y + size);
+ ctx.moveTo(origin.x + x * cellSize, 0 + origin.y);
+ ctx.lineTo(origin.x + x * cellSize, origin.y + size);
}
for (let y = 1; y < 3; ++y) {
- ctx.moveTo(initialPos.x + 0, initialPos.y + y * cellSize);
- ctx.lineTo(initialPos.x + size, initialPos.y + y * cellSize);
+ ctx.moveTo(origin.x + 0, origin.y + y * cellSize);
+ ctx.lineTo(origin.x + size, origin.y + y * cellSize);
}
ctx.stroke();
}
-
-function drawCircle(x, y) {
- ctx.beginPath();
- // arc(x, y, radius, startAngle, endAngle)
- ctx.arc(x, y, 50, 0, Math.PI * 2);
- ctx.stroke();
+function drawAnimatedCircle(dt, x, y, hue) {
+ const end = dt*2*Math.PI/500;
+ 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 drawCross(x, y) {
+function drawAnimatedCross(dt, x, y, hue) {
startPoint = { x: x-50, y: y-50 };
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
- ctx.lineTo(startPoint.x + 100, startPoint.y + 100);
- ctx.moveTo(startPoint.x + 100, startPoint.y);
- ctx.lineTo(startPoint.x, startPoint.y + 100);
+
+ delta = 100*dt/250;
+ if (delta < 100) { // draw \
+ d = Math.min(delta, 100);
+ ctx.lineTo(startPoint.x + d, startPoint.y + d);
+ } else { // draw /
+ ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn
+ ctx.moveTo(startPoint.x + 100, startPoint.y);
+ d = Math.min(delta-100, 100);
+ ctx.lineTo(startPoint.x +100 - d, startPoint.y + d);
+ }
+
+ ctx.lineWidth = 5;
+ const percent = Math.trunc(100*Math.min(delta, 100)/100);
+ ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.stroke();
}
+
+function update(time) {
+ const origin = {
+ x: ctx.canvas.width / 2 - size / 2,
+ y: ctx.canvas.height / 2 - 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 / size),
+ y: Math.floor(3 * pt.y / size)
+ };
+ if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
+ const center = {
+ x: origin.x + gridIndex.x * cellSize + cellSize/2,
+ y: origin.y + gridIndex.y * cellSize + cellSize/2
+ };
+ return center;
+ }
+ return undefined;
+}
+
function init() {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
resizeCanvas(ctx); // Init canvas
- ctx.fillStyle = "red";
-
- initialPos = {
- x: ctx.canvas.width / 2 - size / 2,
- y: ctx.canvas.height / 2 - size / 2
- };
-
- ctx.fillRect(initialPos.x, initialPos.y, 5, 5); // origin of grid
canvas.addEventListener("click", (evt) => {
const {clientX, clientY} = evt;
- // Coord relative to origin of the grid (initialPos)
- const pt = { x: clientX - initialPos.x, y: clientY - initialPos.y };
- const gridIndex = {
- x: Math.floor(3 * pt.x / size),
- y: Math.floor(3 * pt.y / size)
- };
- if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
- ctx.fillStyle = "blue";
- const center = {
- x: initialPos.x + gridIndex.x * cellSize + cellSize/2,
- y: initialPos.y + gridIndex.y * cellSize + cellSize/2
- };
- if (circle) drawCircle(center.x, center.y);
- else drawCross(center.x, center.y);
- circle = !circle;
- }
+ pendingClicks.push({x: clientX, y: clientY});
});
//window.addEventListener('resize', () => resizeCanvas(ctx));
- //window.requestAnimationFrame(time => update(ctx, time))
-
- drawGrid(ctx);
+ window.requestAnimationFrame(update)
}
}
diff --git a/index.html b/index.html
deleted file mode 100644
index d09e01d..0000000
--- a/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
- Document
-
-
-
-
-
-
\ No newline at end of file
diff --git a/main.js b/main.js
deleted file mode 100644
index f767489..0000000
--- a/main.js
+++ /dev/null
@@ -1,98 +0,0 @@
-let startTime = undefined;
-
-let shapes = [];
-let pendingClicks = [];
-
-function update(ctx, time) {
- if (!startTime) {
- startTime = time;
- }
-
- for (const evt of pendingClicks) {
- const h = Math.floor(Math.random() * 255);
- if (evt.kind == "circle") {
- shapes.push({kind: evt.kind, x: evt.x, y: evt.y, t: time, hue: h});
- } else if (evt.kind == "cross") {
- shapes.push({kind: evt.kind, x: evt.x, y: evt.y, t: time, hue: h});
- }
- }
- pendingClicks = [];
-
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- for (const shape of shapes) {
- const dt = time - shape.t;
- switch (shape.kind) {
- case "circle":
- drawAnimatedCircle(ctx, dt, shape.x, shape.y, shape.hue);
- break;
- case "cross":
- drawAnimatedCross(ctx, dt, shape.x, shape.y, shape.hue);
- break;
- }
- }
-
- window.requestAnimationFrame(time => update(ctx, time));
-}
-
-function drawAnimatedCircle(ctx, dt, x, y, hue) {
- const end = dt*2*Math.PI/500;
- 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 drawAnimatedCross(ctx, dt, x, y, hue) {
- startPoint = { x: x-50, y: y-50 };
- ctx.beginPath();
- ctx.moveTo(startPoint.x, startPoint.y);
-
- delta = 100*dt/250;
- if (delta < 100) { // draw \
- d = Math.min(delta, 100);
- ctx.lineTo(startPoint.x + d, startPoint.y + d);
- } else { // draw /
- ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn
- ctx.moveTo(startPoint.x + 100, startPoint.y);
- d = Math.min(delta-100, 100);
- ctx.lineTo(startPoint.x +100 - d, startPoint.y + d);
- }
-
- ctx.lineWidth = 5;
- const percent = Math.trunc(100*Math.min(delta, 100)/100);
- ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
- ctx.stroke();
-}
-
-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
-
- 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"});
- });
-
- window.addEventListener('resize', () => resizeCanvas(ctx));
- window.requestAnimationFrame(time => update(ctx, time))
- }
-}
-
-init();