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; return ps;
} }
radius(d, func, maxr) { radius(func) {
switch (func) { switch (func) {
case "const": case "const":
return maxr; return (d, r) => r;
case "right": case "right":
return maxr * d.x / this.width; return (d, r) => r * d.x / this.width;
case "left": case "left":
return maxr * (this.width - d.x) / this.width; return (d, r) => r * (this.width - d.x) / this.width;
case "down": case "down":
return maxr * d.y / this.height; return (d, r) => r * d.y / this.height;
case "up": case "up":
return maxr * (this.height - d.y) / this.height; return (d, r) => r * (this.height - d.y) / this.height;
case "right-up": 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": 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": 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": 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": 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": 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": 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": 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": case "noise":
return maxr * Math.random(); return (d, r) => r * Math.random();
case "horizontal-bands": 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": 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": 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: default:
return maxr; return (d, r) => r;
} }
} }
} }

7
src/index.md
View File

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