Bumped version v1.1.2 -> 1.2.0 and improved styling

src/components/dots.js

@@ -44,11 +44,13 @@ function int_range(v1, v2) {
 }
 
 class DotMaker {
-	constructor(width) {
-		console.log(width);
+	constructor(width, height) {
+		console.log(width, height);
 		this.width = width;
+		this.height = height;
+		this.wh = 0.5 * (width + height);
 		this.cx = 0.5 * width;
-		this.cy = 0.5 * width;
+		this.cy = 0.5 * height;
 	}
 
 	dots(m, n, clip) {
@@ -56,13 +58,13 @@ class DotMaker {
 			return [];
 		}
 		const ps = [];
-		const is = int_range(-this.width, this.width / m)
+		const is = int_range(-this.width, this.height / m)
 		is.map((i) => {
 			const js = int_range(m * i + (m - n) * this.width, m * i)
 			js.map((j) => {
 				const x = (j - m * i) / (m - n);
 				const y = m * (x + i);
-				if( !clip || (x > 0 && y > 0 && x < this.width && y < this.width) ) {
+				if( !clip || (x > 0 && y > 0 && x < this.width && y < this.height) ) {
 					ps.push({i:i, j:j, x:x, y:y});
 				}
 			});
@@ -79,21 +81,21 @@ class DotMaker {
 	    	case "left":
 	      		return maxr * (this.width - d.x) / this.width;
 	    	case "down":
-	      		return maxr * d.y / this.width;
+	      		return maxr * d.y / this.height;
 	    	case "up":
-	      		return maxr * (this.width - d.y) / this.width;
+	      		return maxr * (this.height - d.y) / this.height;
 	      	case "right-up":
-	      		return 0.5 * maxr * (d.x + this.width - d.y) / this.width;
+	      		return 0.5 * maxr * (d.x + this.height - d.y) / this.wh;
 	      	case "left-up":
-	      		return 0.5 * maxr * (this.width - d.x + this.width - d.y) / this.width;
+	      		return 0.5 * maxr * (this.width - d.x + this.height - d.y) / this.wh;
 	      	case "right-down":
-	      		return 0.5 * maxr * (d.x + d.y) / this.width;
+	      		return 0.5 * maxr * (d.x + d.y) / this.wh;
 	      	case "left-down":
-	      		return 0.5 * maxr * (this.width - d.x + d.y) / this.width;
+	      		return 0.5 * maxr * (this.width - d.x + d.y) / this.wh;
 	      	case "out":
-	      		return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width;
+	      		return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
 	      	case "in":
-	      		return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
+	      		return 2 * maxr * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh;
 
 	      	// case "hyper-out":
 	      	// 	return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width;

src/index.md

@@ -8,11 +8,11 @@ toc: false
 
 colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/)
 
-<p>v1.1.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></p>
+<p>v1.2.0 | 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>
 
-<div class="grid grid-cols-2">
+<div class="grid grid-cols-3">
 
-  <div class="card">
+  <div class="card grid-colspan-1">
 
 ```js
 
@@ -122,7 +122,7 @@ if( palette_fn ) {
 ```
 
 </div>
-<div>
+<div class="card grid-colspan-2">
 
 
 ```js
@@ -233,6 +233,7 @@ display(download(() => {
 ```
 (PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)
 
+</div>
 </div>
 
 <style>