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

the radius method now returns a closure, so we can pick random

Browse Source 
parameters for things like the sinusoid grids or centre points
This commit is contained in:
Mike Lynch 2025-04-20 15:25:08 +10:00
parent 31c093e1ed
commit f397af24cd
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/dots.js
View File

@ -83,44 +83,44 @@ class DotMaker {
return ps;
}
radius(d, func, maxr) {
radius(func) {
switch (func) {
case "const":
return maxr;
return (d, r) => r;
case "right":
return maxr * d.x / this.width;
return (d, r) => r * d.x / this.width;
case "left":
return maxr * (this.width - d.x) / this.width;
return (d, r) => r * (this.width - d.x) / this.width;
case "down":
return maxr * d.y / this.height;
return (d, r) => r * d.y / this.height;
case "up":
return maxr * (this.height - d.y) / this.height;
return (d, r) => r * (this.height - d.y) / this.height;
case "right-up":
return 0.5 * maxr * (d.x + this.height - d.y) / this.wh;
return (d, r) => 0.5 * r * (d.x + this.height - d.y) / this.wh;
case "left-up":
return 0.5 * maxr * (this.width - d.x + this.height - d.y) / this.wh;
return (d, r) => 0.5 * r * (this.width - d.x + this.height - d.y) / this.wh;
case "right-down":
return 0.5 * maxr * (d.x + d.y) / this.wh;
return (d, r) => 0.5 * r * (d.x + d.y) / this.wh;
case "left-down":
return 0.5 * maxr * (this.width - d.x + d.y) / this.wh;
return (d, r) => 0.5 * r * (this.width - d.x + d.y) / this.wh;
case "circle-out":
return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
return (d, r) => 2 * r * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
case "circle-in":
return 2 * maxr * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh;
return (d, r) => 2 * r * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh;
case "hyper-in":
return maxr * Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh;
return (d, r) => r * Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh;
case "hyper-out":
return maxr * (1 - Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh);
return (d, r) => r * (1 - Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh);
case "noise":
return maxr * Math.random();
return (d, r) => r * Math.random();
case "horizontal-bands":
return maxr * (1 + Math.cos(SIN_PERIOD *(d.y - this.cy)/ this.wh));
return (d, r) => r * (1 + Math.cos(SIN_PERIOD *(d.y - this.cy)/ this.wh));
case "vertical-bands":
return maxr * (1 + Math.cos(SIN_PERIOD *(d.x - this.cx)/ this.wh));
return (d, r) => r * (1 + Math.cos(SIN_PERIOD *(d.x - this.cx)/ this.wh));
case "grid":
return maxr * (0.5 + 0.5 * (Math.cos(SIN_PERIOD *(d.x - this.cx)/ this.wh) + Math.cos(SIN_PERIOD * (d.y - this.cy)/ this.wh)));
return (d, r) => r * (0.5 + 0.5 * (Math.cos(SIN_PERIOD *(d.x - this.cx)/ this.wh) + Math.cos(SIN_PERIOD * (d.y - this.cy)/ this.wh)));
default:
return maxr;
return (d, r) => r;
}
}
}

7
src/index.md
View File

@ -209,9 +209,12 @@ display(svg.node());
```js
// separate code block for when I understand transitions better
const rfunc1 = dm.radius(f1);
const rfunc2 = dm.radius(f2);
dots_g1.selectAll("circle").attr("r", (d) => dm.radius(d, f1, r1));
dots_g2.selectAll("circle").attr("r", (d) => dm.radius(d, f2, r2));
dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1));
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));
```