thib8956/test-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extract magic numbers to constants

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-24 13:57:41 +02:00
parent 7a20daa045
commit c0cf1d7005
1 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
grid.js
View File

@ -1,6 +1,7 @@
const cellSize = 150; const CELL_SIZE = 150;
const size = cellSize * 3; const GRID_SIZE = CELL_SIZE * 3;
const margin = 10; const SHAPE_SIZE = 100;
const ANIMATE_DURATION = 500; // ms
let ctx = undefined; let ctx = undefined;
let circle = true; let circle = true;
@ -17,23 +18,24 @@ function drawGrid(origin) {
ctx.lineWidth = 5; ctx.lineWidth = 5;
for (let x = 1; x < 3; ++x) { for (let x = 1; x < 3; ++x) {
ctx.moveTo(origin.x + x * cellSize, 0 + origin.y); ctx.moveTo(origin.x + x * CELL_SIZE, 0 + origin.y);
ctx.lineTo(origin.x + x * cellSize, origin.y + size); ctx.lineTo(origin.x + x * CELL_SIZE, origin.y + GRID_SIZE);
} }
for (let y = 1; y < 3; ++y) { for (let y = 1; y < 3; ++y) {
ctx.moveTo(origin.x + 0, origin.y + y * cellSize); ctx.moveTo(origin.x + 0, origin.y + y * CELL_SIZE);
ctx.lineTo(origin.x + size, origin.y + y * cellSize); ctx.lineTo(origin.x + GRID_SIZE, origin.y + y * CELL_SIZE);
} }
ctx.stroke(); ctx.stroke();
} }
function drawAnimatedCircle(dt, x, y, hue) { function drawAnimatedCircle(dt, x, y, hue) {
const end = dt*2*Math.PI/500; const radius = SHAPE_SIZE / 2;
const end = dt*2*Math.PI/ANIMATE_DURATION;
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI)); 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)); const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI));
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.lineWidth = 5; ctx.lineWidth = 5;
@ -42,23 +44,25 @@ function drawAnimatedCircle(dt, x, y, hue) {
} }
function drawAnimatedCross(dt, x, y, hue) { function drawAnimatedCross(dt, x, y, hue) {
startPoint = { x: x-50, y: y-50 }; const startPoint = { x: x-SHAPE_SIZE/2, y: y-SHAPE_SIZE/2 };
const halfAnim = ANIMATE_DURATION/2;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y); ctx.moveTo(startPoint.x, startPoint.y);
delta = 100*dt/250; const delta = SHAPE_SIZE*dt/halfAnim;
if (delta < 100) { // draw \ if (delta < SHAPE_SIZE) { // draw \
d = Math.min(delta, 100); d = Math.min(delta, SHAPE_SIZE);
ctx.lineTo(startPoint.x + d, startPoint.y + d); ctx.lineTo(startPoint.x + d, startPoint.y + d);
} else { // draw / } else { // draw /
ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn ctx.lineTo(startPoint.x + SHAPE_SIZE, startPoint.y + SHAPE_SIZE); // keep \ drawn
ctx.moveTo(startPoint.x + 100, startPoint.y); ctx.moveTo(startPoint.x + SHAPE_SIZE, startPoint.y);
d = Math.min(delta-100, 100); d = Math.min(delta - SHAPE_SIZE, SHAPE_SIZE);
ctx.lineTo(startPoint.x +100 - d, startPoint.y + d); ctx.lineTo(startPoint.x + SHAPE_SIZE - d, startPoint.y + d);
} }
ctx.lineWidth = 5; ctx.lineWidth = 5;
const percent = Math.trunc(100*Math.min(delta, 100)/100); const percent = Math.trunc(100*Math.min(delta, SHAPE_SIZE)/SHAPE_SIZE);
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.stroke(); ctx.stroke();
} }
@ -66,8 +70,8 @@ function drawAnimatedCross(dt, x, y, hue) {
function update(time) { function update(time) {
const origin = { const origin = {
x: ctx.canvas.width / 2 - size / 2, x: ctx.canvas.width / 2 - GRID_SIZE / 2,
y: ctx.canvas.height / 2 - size / 2 y: ctx.canvas.height / 2 - GRID_SIZE / 2
}; };
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@ -106,13 +110,13 @@ function snapToGrid(origin, clientPos) {
// Coord relative to origin of the grid (origin) // Coord relative to origin of the grid (origin)
const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y }; const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y };
const gridIndex = { const gridIndex = {
x: Math.floor(3 * pt.x / size), x: Math.floor(3 * pt.x / GRID_SIZE),
y: Math.floor(3 * pt.y / size) y: Math.floor(3 * pt.y / GRID_SIZE)
}; };
if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) { if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
const center = { const center = {
x: origin.x + gridIndex.x * cellSize + cellSize/2, x: origin.x + gridIndex.x * CELL_SIZE + CELL_SIZE/2,
y: origin.y + gridIndex.y * cellSize + cellSize/2 y: origin.y + gridIndex.y * CELL_SIZE + CELL_SIZE/2
}; };
return center; return center;
} }