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

Generalised grids and bands into a single function

Browse Source
This commit is contained in:
Mike Lynch 2025-04-20 16:02:41 +10:00
parent 077dc5254d
commit bf7ae246a3
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/dots.js
View File

@ -1,6 +1,5 @@
// calculate tiles // calculate tiles
const SIN_PERIOD = 100 / Math.PI;
const RADIUS_OPTS = [ const RADIUS_OPTS = [
"const", "const",
@ -16,10 +15,8 @@ const RADIUS_OPTS = [
"circle-out", "circle-out",
"hyper-in", "hyper-in",
"hyper-out", "hyper-out",
"grid",
"noise", "noise",
"diamonds",
"horizontal-bands",
"vertical-bands",
]; ];
const RADIUS_DESC = { const RADIUS_DESC = {
@ -37,9 +34,7 @@ const RADIUS_DESC = {
"hyper-in": "forming a starlike pattern at the centre", "hyper-in": "forming a starlike pattern at the centre",
"hyper-out": "leaving a starlike gap in the centre", "hyper-out": "leaving a starlike gap in the centre",
"noise": "of random sizes", "noise": "of random sizes",
"diamonds": "in a grid tilted at 45 degrees", "grid": "forming a grid pattern",
"horizontal-bands": "in horizontal bands",
"vertical-bands": "in a vertical bands",
} }
function distance(dx, dy) { function distance(dx, dy) {
@ -55,6 +50,10 @@ function int_range(v1, v2) {
return [...Array(high - low + 1).keys()].map((i) => i + low); return [...Array(high - low + 1).keys()].map((i) => i + low);
} }
function randint(min, max) {
return min + Math.floor(Math.random() * (max + 1));
}
class DotMaker { class DotMaker {
constructor(width, height) { constructor(width, height) {
this.width = width; this.width = width;
@ -108,17 +107,15 @@ class DotMaker {
case "circle-in": case "circle-in":
return (d, r) => 2 * r * (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 (d, r) => r * Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh;
case "hyper-out":
return (d, r) => r * (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 "hyper-out":
return (d, r) => r * Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh;
case "noise": case "noise":
return (d, r) => r * Math.random(); return (d, r) => r * Math.random();
case "horizontal-bands":
return (d, r) => r * (1 + Math.cos(SIN_PERIOD *(d.y - this.cy)/ this.wh));
case "vertical-bands":
return (d, r) => r * (1 + Math.cos(SIN_PERIOD *(d.x - this.cx)/ this.wh));
case "grid": case "grid":
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))); const xk = Math.PI * (2 * randint(1, 10) - 1) / this.width;
const yk = Math.PI * (2 * randint(1, 10) - 1) / this.height;
return (d, r) => r * (0.5 + 0.5 * (Math.sin(xk * d.x) + Math.sin(yk * d.y)));
default: default:
return (d, r) => r; return (d, r) => r;
} }

10
src/index.md
View File

@ -137,6 +137,13 @@ const dots1 = dm.dots(1 / m1, n1, false);
const dots2 = dm.dots(1 / m2, n2, false); const dots2 = dm.dots(1 / m2, n2, false);
```
```js
const rfunc1 = dm.radius(f1);
const rfunc2 = dm.radius(f2);
``` ```
```js ```js
@ -209,9 +216,6 @@ display(svg.node());
```js ```js
// separate code block for when I understand transitions better // 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) => rfunc1(d, r1)); dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1));
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2)); dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));