test-canvas/grid.js

144 lines
4.2 KiB
JavaScript

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();