sam/Parchment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

performant rendering of 30k

Browse Source
This commit is contained in:
metacryst
2025-12-29 18:35:37 -06:00
parent b4e388b14d
commit 51ec1161ad
1 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
cave/index.js
View File

@@ -101,23 +101,54 @@ class Canvas {
} }
let drawSpaces = () => { let drawSpaces = () => {
for(let i=0; i<this.rects.length; i++) { ctx.translate(this.c.width / 2, this.c.height / 2);
let rect = this.rects[i] ctx.scale(scale, scale);
ctx.translate(-camera.x, -camera.y);
let x = -300 + i ctx.strokeStyle = this.STROKE_COLOR;
let y = -200 + i ctx.lineWidth = 0.5 / scale;
let w = 600 + i
let h = 400 + i
ctx.translate(this.c.width / 2, this.c.height / 2); const baseRadius = 40; // distance of first ring
ctx.scale(scale, scale); const ringSpacing = 70; // distance between rings
ctx.translate(-camera.x, -camera.y); const dotRadius = 18; // circle size
ctx.strokeStyle = this.STROKE_COLOR; let index = 0;
ctx.lineWidth = 0.5 / scale; let ring = 0;
ctx.strokeRect(x, y, w, h);
while (index < this.rects.length) {
// how many items fit on this ring
const circumference = 2 * Math.PI * (baseRadius + ring * ringSpacing);
const itemsInRing = Math.max(6, Math.floor(circumference / (dotRadius * 2.5)));
for (let i = 0; i < itemsInRing && index < this.rects.length; i++) {
const angle = (i / itemsInRing) * Math.PI * 2;
const r = baseRadius + ring * ringSpacing;
const x = Math.cos(angle) * r;
const y = Math.sin(angle) * r;
ctx.beginPath();
ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
ctx.stroke();
const cssDiameter = dotRadius * 2 * scale;
if (cssDiameter >= 30) {
ctx.fillStyle = "#000";
ctx.font = `${3}px Arial`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(this.rects[index].name, x, y);
}
index++;
}
ring++;
} }
} };
ctx.save() ctx.save()