the radius method now returns a closure, so we can pick random

parameters for things like the sinusoid grids or centre points

poptimal.js

@@ -18,7 +18,7 @@ import {ColourNamer} from './src/components/colour_namer.js';
 
 const CELL = 10;
 const MAG = 2;
-const WIDTH = 20;
+const WIDTH = 200;
 const HEIGHT = WIDTH;
 // number of pixels which have to be visible for a colour to be
 // mentioned in the alt text
@@ -36,10 +36,12 @@ function randomise_params() {
 		f: random.choice(RADIUS_OPTS),
 		r: random.float(0, 0.4),
 	}});
+	const cell = 5 + random.float() * random.float() * 55;
 	return {
 		background: palette[0],
 		palette: palette_name,
-		patterns: patterns
+		patterns: patterns,
+		cell: cell,
 	}
 }
 
@@ -134,18 +136,21 @@ function poptimal_svg(params) {
 	const document = window.document;
 	const container = d3.select(document.body).append("div");
 
-	const dm = new DotMaker(WIDTH);
+	const width = WIDTH / params.cell;
+	const height = WIDTH / params.cell;
+
+	const dm = new DotMaker(width, height);
 
 	const svg = container.append("svg")
-	  .attr("width", WIDTH * CELL * MAG)
-	  .attr("height", HEIGHT * CELL * MAG)
-	  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
+	  .attr("width", WIDTH * MAG)
+	  .attr("height", HEIGHT * MAG)
+	  .attr("viewBox", [ 0, 0, width, height ]);
 
 	const background = svg.append("rect")
 	  .attr("x", 0)
 	  .attr("y", 0)
-	  .attr("width", WIDTH)
-	  .attr("height", WIDTH)
+	  .attr("width", width)
+	  .attr("height", height)
 	  .attr("fill", params.background);
 
 
@@ -227,7 +232,6 @@ async function main() {
 	const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
 
 	const namer = new ColourNamer();
-	console.log(`Loading colours ${colourf}`);
 	await namer.load_colours(colourf);
 
 
@@ -250,7 +254,7 @@ async function main() {
   	// so we don't include obscured colours
   	const hist = await get_histogram(imgfile);
 	const alt_text = image_description(namer, params, hist);
-
+	params.alt_text = alt_text;
 	await save_params(paramsfile, params);
 	console.log(alt_text);
 	console.log(imgfile);

src/components/dots.js

@@ -1,5 +1,6 @@
 // calculate tiles
 
+const SIN_PERIOD = 100 / Math.PI;
 
 const RADIUS_OPTS = [ 
 	"const",
@@ -11,9 +12,14 @@ const RADIUS_OPTS = [
 	"right-down",
 	"left-up",
 	"left-down",
-	"in",
-	"out",
+	"circle-in",
+	"circle-out",
+	"hyper-in",
+	"hyper-out",
 	"noise",
+	"diamonds",
+	"horizontal-bands",
+	"vertical-bands",
 ];
 
 const RADIUS_DESC = {
@@ -26,15 +32,21 @@ const RADIUS_DESC = {
 	"right-down": "getting larger towards the lower right",
 	"left-up": "getting larger towards the upper left",
 	"left-down": "getting larger towards the lower left",
-	"in": "getting larger in the centre",
-	"out": "getting larger at the edges",
+	"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 pattern gap in the centre",
 	"noise": "of random sizes",
+	"diamonds": "in a grid tilted at 45 degrees",
+	"horizontal-bands": "in horizontal bands",
+	"vertical-bands": "in a vertical bands",
 }
 
 function distance(dx, dy) {
 	return Math.sqrt(dx ** 2 + dy ** 2);
 }
 
+
 function int_range(v1, v2) {
 	const vs = [v1, v2];
 	vs.sort((a, b) => a - b);
@@ -45,7 +57,6 @@ function int_range(v1, v2) {
 
 class DotMaker {
 	constructor(width, height) {
-		console.log(width, height);
 		this.width = width;
 		this.height = height;
 		this.wh = 0.5 * (width + height);
@@ -72,40 +83,44 @@ class DotMaker {
 		return ps;
 	}
 
-	radius(d, func, maxr) {
+	radius(func) {
 	  	switch (func) {
 	    	case "const":
-	      		return maxr;
+	      		return (d, r) => r;
 	    	case "right":
-	      		return maxr * d.x / this.width;
+	      		return (d, r) => r * d.x / this.width;
 	    	case "left":
-	      		return maxr * (this.width - d.x) / this.width;
+	      		return (d, r) => r * (this.width - d.x) / this.width;
 	    	case "down":
-	      		return maxr * d.y / this.height;
+	      		return (d, r) => r * d.y / this.height;
 	    	case "up":
-	      		return maxr * (this.height - d.y) / this.height;
+	      		return (d, r) => r * (this.height - d.y) / this.height;
 	      	case "right-up":
-	      		return 0.5 * maxr * (d.x + this.height - d.y) / this.wh;
+	      		return (d, r) => 0.5 * r * (d.x + this.height - d.y) / this.wh;
 	      	case "left-up":
-	      		return 0.5 * maxr * (this.width - d.x + this.height - d.y) / this.wh;
+	      		return (d, r) => 0.5 * r * (this.width - d.x + this.height - d.y) / this.wh;
 	      	case "right-down":
-	      		return 0.5 * maxr * (d.x + d.y) / this.wh;
+	      		return (d, r) => 0.5 * r * (d.x + d.y) / this.wh;
 	      	case "left-down":
-	      		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.wh;
-	      	case "in":
-	      		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;
-	      	// case "hyper-in":
-	      	// 	return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
-
+	      		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 * 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 maxr * Math.random();
+	      		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":
+	      		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)));
 	    	default:
-	      		return maxr;
+	      		return (d, r) => r;
 	  }
 	}
 }

src/index.md

@@ -144,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 * MAG)
+  .attr("height", HEIGHT * MAG)
   .attr("viewBox", [ 0, 0, width, height ]);
 
 
@@ -209,9 +209,12 @@ 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) => dm.radius(d, f1, r1));
-  dots_g2.selectAll("circle").attr("r", (d) => dm.radius(d, f2, r2));
+  dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1));
+  dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));
 
 ```