Cell size is now randomised

src/components/dots.js

@@ -99,7 +99,7 @@ class DotMaker {
 
 	      	// case "hyper-out":
 	      	// 	return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width;
-	      	// case "hyoer-in":
+	      	// case "hyper-in":
 	      	// 	return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
 
 	      	case "noise":

src/index.md

@@ -24,15 +24,12 @@ import random from "npm:random";
 
 import * as resvg from 'npm:@resvg/resvg-wasm';
 
-const CELL = 10;
 const MAG = 2;
-const WIDTH = 20;
-const HEIGHT = WIDTH;
+const WIDTH = 200;
+const HEIGHT = 200;
 
-const cell = view(Inputs.range([1,20], {value: 10, step:1, label: "Cell size"}));
-const mag = view(Inputs.range([1,5], {value: 2, step:1, label: "Magnificaton"}));
-const width = view(Inputs.range([1,40], {value: 20, step:1, label: "Width"}));
-const height = view(Inputs.range([1,40], {value: 20, step:1, label: "Height"}));
+const cell_input = Inputs.range([5,60], {value: 10,  label: "cell size"});
+const cell = view(cell_input);
 
 
 ```
@@ -40,11 +37,13 @@ const height = view(Inputs.range([1,40], {value: 20, step:1, label: "Height"}));
 
 ```js
 
-const bg_input = Inputs.color({label: "background", value: d3.color("yellow").formatHex()});
+const bg_input = Inputs.color({
+  label: "background", value: d3.color("white").formatHex()
+});
 const bg = view(bg_input);
 
-const ctrl1 = new DotControls(d3.color("red").formatHex(), RADIUS_OPTS);
-const ctrl2 = new DotControls(d3.color("blue").formatHex(), RADIUS_OPTS);
+const ctrl1 = new DotControls(d3.color("white").formatHex(), RADIUS_OPTS);
+const ctrl2 = new DotControls(d3.color("white").formatHex(), RADIUS_OPTS);
 
 
 const fg1 = view(ctrl1.fg);
@@ -96,6 +95,8 @@ ctrl1.null_grid();
 ctrl2.null_grid();
 palette_input.value = PALETTES.get(rpalette);
 palette_input.dispatchEvent(new Event("input"));
+cell_input.value = 5 + random.float() * random.float() * 55;
+cell_input.dispatchEvent(new Event("input"));
 ctrl1.random_grid();
 ctrl2.random_grid();
 
@@ -127,6 +128,9 @@ if( palette_fn ) {
 
 ```js
 
+const width = WIDTH / cell;
+const height = HEIGHT / cell;
+
 const dm = new DotMaker(width, height);
 
 const dots1 = dm.dots(1 / m1, n1, false);
@@ -140,8 +144,8 @@ const dots2 = dm.dots(1 / m2, n2, false);
 
 
 const svg = d3.create("svg")
-  .attr("width", width * cell * mag)
-  .attr("height", height * cell * mag)
+  .attr("width", width * cell * MAG)
+  .attr("height", height * cell * MAG)
   .attr("viewBox", [ 0, 0, width, height ]);