bombinans/poptimal
1
0
Fork 0
Code Issues 12 Pull Requests Packages Projects 1 Releases Wiki Activity

Grids are working properly with varying aspect ratios

Browse Source
This commit is contained in:
Mike Lynch 2025-04-06 12:43:17 +10:00
parent 7b05658a7f
commit 844e847eab
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/dots.js
View File

@ -44,11 +44,13 @@ function int_range(v1, v2) {
} }
class DotMaker { class DotMaker {
constructor(width) { constructor(width, height) {
console.log(width); console.log(width, height);
this.width = width; this.width = width;
this.height = height;
this.wh = 0.5 * (width + height);
this.cx = 0.5 * width; this.cx = 0.5 * width;
this.cy = 0.5 * width; this.cy = 0.5 * height;
} }
dots(m, n, clip) { dots(m, n, clip) {
@ -56,13 +58,13 @@ class DotMaker {
return []; return [];
} }
const ps = []; const ps = [];
const is = int_range(-this.width, this.width / m) const is = int_range(-this.width, this.height / m)
is.map((i) => { is.map((i) => {
const js = int_range(m * i + (m - n) * this.width, m * i) const js = int_range(m * i + (m - n) * this.width, m * i)
js.map((j) => { js.map((j) => {
const x = (j - m * i) / (m - n); const x = (j - m * i) / (m - n);
const y = m * (x + i); const y = m * (x + i);
if( !clip || (x > 0 && y > 0 && x < this.width && y < this.width) ) { if( !clip || (x > 0 && y > 0 && x < this.width && y < this.height) ) {
ps.push({i:i, j:j, x:x, y:y}); ps.push({i:i, j:j, x:x, y:y});
} }
}); });
@ -79,21 +81,21 @@ class DotMaker {
case "left": case "left":
return maxr * (this.width - d.x) / this.width; return maxr * (this.width - d.x) / this.width;
case "down": case "down":
return maxr * d.y / this.width; return maxr * d.y / this.height;
case "up": case "up":
return maxr * (this.width - d.y) / this.width; return maxr * (this.height - d.y) / this.height;
case "right-up": case "right-up":
return 0.5 * maxr * (d.x + this.width - d.y) / this.width; return 0.5 * maxr * (d.x + this.height - d.y) / this.wh;
case "left-up": case "left-up":
return 0.5 * maxr * (this.width - d.x + this.width - d.y) / this.width; return 0.5 * maxr * (this.width - d.x + this.height - d.y) / this.wh;
case "right-down": case "right-down":
return 0.5 * maxr * (d.x + d.y) / this.width; return 0.5 * maxr * (d.x + d.y) / this.wh;
case "left-down": case "left-down":
return 0.5 * maxr * (this.width - d.x + d.y) / this.width; return 0.5 * maxr * (this.width - d.x + d.y) / this.wh;
case "out": case "out":
return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width; return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
case "in": case "in":
return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width; return 2 * maxr * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh;
// case "hyper-out": // case "hyper-out":
// return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width; // return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width;