Merge pull request 'Fixed flashing grids' (#37) from rc-1.2.2 into main

Reviewed-on: #37

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);

src/components/dots.js

@@ -81,47 +81,48 @@ class DotMaker {
 		});
 		return ps;
 	}
+}
 
-	radius(func) {
+
+function radius_func(func) {
   	switch (func) {
     	case "const":
-	      		return (d, r) => r;
+      		return (d, r, w, h) => r;
     	case "right":
-	      		return (d, r) => r * d.x / this.width;
+      		return (d, r, w, h) => r * d.x / w;
     	case "left":
-	      		return (d, r) => r * (this.width - d.x) / this.width;
+      		return (d, r, w, h) => r * (w - d.x) / w;
     	case "down":
-	      		return (d, r) => r * d.y / this.height;
+      		return (d, r, w, h) => r * d.y / h;
     	case "up":
-	      		return (d, r) => r * (this.height - d.y) / this.height;
+      		return (d, r, w, h) => r * (h - d.y) / h;
       	case "right-up":
-	      		return (d, r) => 0.5 * r * (d.x + this.height - d.y) / this.wh;
+      		return (d, r, w, h) => r * (d.x + h - d.y) / (w + h);
       	case "left-up":
-	      		return (d, r) => 0.5 * r * (this.width - d.x + this.height - d.y) / this.wh;
+      		return (d, r, w, h) => r * (w - d.x + h - d.y) / (w + h);
       	case "right-down":
-	      		return (d, r) => 0.5 * r * (d.x + d.y) / this.wh;
+      		return (d, r, w, h) => r * (d.x + d.y) / (w + h);
       	case "left-down":
-	      		return (d, r) => 0.5 * r * (this.width - d.x + d.y) / this.wh;
+      		return (d, r, w, h) => r * (w - d.x + d.y) / (w + h);
       	case "circle-out":
-	      		return (d, r) => 2 * r * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
+      		return (d, r, w, h) => 4 * r * distance((d.x - w / 2), (d.y - h / 2)) / (w + h);
       	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, 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) => r * (1 - Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh);
+      		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) => r * Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh;
+      		return (d, r, w, h) => 2 * r * Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h);
       	case "noise":
-	      		return (d, r) => r * Math.random();
+      		return (d, r, w, h) => r * Math.random();
       	case "grid":
-	      		const xk = Math.PI * (2 * randint(1, 10) - 1) / this.width;
+      		const xk = Math.PI * (2 * randint(1, 10) - 1);
-	      		const yk = Math.PI * (2 * randint(1, 10) - 1) / this.height;
+      		const yk = Math.PI * (2 * randint(1, 10) - 1);
-	      		return (d, r) => r * (0.5 + 0.5 * (Math.sin(xk * d.x) + Math.sin(yk * d.y)));
+      		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) => r;
+      		return (d, r, w, h) => r;
-	  }
   	}
 }
 
-export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
+export { RADIUS_OPTS, RADIUS_DESC, DotMaker, radius_func };
 
 

src/index.md

@@ -8,7 +8,7 @@ toc: false
 
 colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/)
 
-<p>v1.2.1 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
+<p>v1.2.2 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a> | <a href="https://mikelynch.org/2025/Mar/09/poptimal/">about</a></p>
 
 <div class="grid grid-cols-3">
 
@@ -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 rfunc1 = radius_func(f1);
-const rfunc2 = dm.radius(f2);
+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_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1, width, height));
-  dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));
+  dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2, width, height));
 
 ```