diff --git a/poptimal.js b/poptimal.js
index dc0cb69..7a0e334 100644
--- a/poptimal.js
+++ b/poptimal.js
@@ -12,7 +12,7 @@ const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
-import {RADIUS_OPTS, RADIUS_DESC, DotMaker} from './src/components/dots.js';
+import {RADIUS_OPTS, RADIUS_DESC, radius_func, DotMaker} from './src/components/dots.js';
import {PALETTES} from './src/components/palettes.js';
import {ColourNamer} from './src/components/colour_namer.js';
@@ -156,14 +156,14 @@ function poptimal_svg(params) {
params.patterns.map((p) => {
const dots = dm.dots(1 / p.m, p.n, false);
- const rfunc = dm.radius(p.f);
+ const rfunc = radius_func(p.f);
const dots_g = svg.append("g")
.attr("id", `dots${p.i}`);
dots_g.selectAll("circle")
.data(dots)
.join("circle")
- .attr("r", (d) => rfunc(d, p.r))
+ .attr("r", (d) => rfunc(d, p.r, width, height))
.attr("fill", p.colour)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);
diff --git a/src/components/dots.js b/src/components/dots.js
index 0030bdd..3e0d5b6 100644
--- a/src/components/dots.js
+++ b/src/components/dots.js
@@ -81,47 +81,48 @@ class DotMaker {
});
return ps;
}
-
- radius(func) {
- switch (func) {
- case "const":
- return (d, r) => r;
- case "right":
- return (d, r) => r * d.x / this.width;
- case "left":
- return (d, r) => r * (this.width - d.x) / this.width;
- case "down":
- return (d, r) => r * d.y / this.height;
- case "up":
- return (d, r) => r * (this.height - d.y) / this.height;
- case "right-up":
- return (d, r) => 0.5 * r * (d.x + this.height - d.y) / this.wh;
- case "left-up":
- return (d, r) => 0.5 * r * (this.width - d.x + this.height - d.y) / this.wh;
- case "right-down":
- return (d, r) => 0.5 * r * (d.x + d.y) / this.wh;
- case "left-down":
- return (d, r) => 0.5 * r * (this.width - d.x + d.y) / this.wh;
- case "circle-out":
- return (d, r) => 2 * r * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
- case "circle-in":
- return (d, r) => 2 * r * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh;
- case "hyper-in":
- 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":
- return (d, r) => r * Math.random();
- case "grid":
- 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:
- return (d, r) => r;
- }
- }
}
-export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
+
+function radius_func(func) {
+ switch (func) {
+ case "const":
+ return (d, r, w, h) => r;
+ case "right":
+ return (d, r, w, h) => r * d.x / w;
+ case "left":
+ return (d, r, w, h) => r * (w - d.x) / w;
+ case "down":
+ return (d, r, w, h) => r * d.y / h;
+ case "up":
+ return (d, r, w, h) => r * (h - d.y) / h;
+ case "right-up":
+ return (d, r, w, h) => r * (d.x + h - d.y) / (w + h);
+ case "left-up":
+ return (d, r, w, h) => r * (w - d.x + h - d.y) / (w + h);
+ case "right-down":
+ return (d, r, w, h) => r * (d.x + d.y) / (w + h);
+ case "left-down":
+ return (d, r, w, h) => r * (w - d.x + d.y) / (w + h);
+ case "circle-out":
+ return (d, r, w, h) => 4 * r * distance((d.x - w / 2), (d.y - h / 2)) / (w + h);
+ case "circle-in":
+ return (d, r, w, h) => 4 * r * (0.5 * (w + h) - distance((d.x - w / 2), (d.y - h / 2))) / (w + h);
+ case "hyper-in":
+ return (d, r, w, h) => 2 * r * (1 - Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h));
+ case "hyper-out":
+ return (d, r, w, h) => 2 * r * Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h);
+ case "noise":
+ return (d, r, w, h) => r * Math.random();
+ case "grid":
+ const xk = Math.PI * (2 * randint(1, 10) - 1);
+ const yk = Math.PI * (2 * randint(1, 10) - 1);
+ return (d, r, w, h) => r * (0.5 + 0.5 * (Math.sin(xk * d.x / w) + Math.sin(yk * d.y / h)));
+ default:
+ return (d, r, w, h) => r;
+ }
+}
+
+export { RADIUS_OPTS, RADIUS_DESC, DotMaker, radius_func };
diff --git a/src/index.md b/src/index.md
index 36bb782..9a043fe 100644
--- a/src/index.md
+++ b/src/index.md
@@ -8,7 +8,7 @@ toc: false
colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/)
-v1.2.1 | by mike lynch | @mikelynch@aus.social | source
+v1.2.2 | by mike lynch | @mikelynch@aus.social | source | about
@@ -16,7 +16,7 @@ colourful generative patterns using [d3](https://d3js.org/) and [Observable Fram
```js
-import {RADIUS_OPTS, DotMaker} from './components/dots.js';
+import {RADIUS_OPTS, DotMaker, radius_func} from './components/dots.js';
import {DotControls} from './components/controls.js';
import {PALETTES} from './components/palettes.js';
import {download, download_as_svg, download_as_png} from './components/download.js';
@@ -141,8 +141,8 @@ const dots2 = dm.dots(1 / m2, n2, false);
```js
-const rfunc1 = dm.radius(f1);
-const rfunc2 = dm.radius(f2);
+const rfunc1 = radius_func(f1);
+const rfunc2 = radius_func(f2);
```
@@ -217,8 +217,8 @@ display(svg.node());
```js
// separate code block for when I understand transitions better
- dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1));
- dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));
+ dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1, width, height));
+ dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2, width, height));
```