poptimal.js

@@ -156,14 +156,13 @@ 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 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) => dm.radius(d, p.f, p.r))
 		  .attr("fill", p.colour)
 		  .attr("cx", (d) => d.x)
 		  .attr("cy", (d) => d.y);

src/components/dots.js

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

src/index.md

@@ -137,13 +137,6 @@ const dots1 = dm.dots(1 / m1, n1, false);
 const dots2 = dm.dots(1 / m2, n2, false);
 
 
-```
-
-```js
-
-const rfunc1 = dm.radius(f1);
-const rfunc2 = dm.radius(f2);
-
 ```
   
 ```js
@@ -217,6 +210,9 @@ 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) => rfunc1(d, r1));
   dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));