Respects visibility of post it's replying to

the bot giving me another pattern when I reply to one of its posts

CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG.md
 
+## v1.2.3
+
+Gave the bot the ability to reply with a customised pattern
+
+## v1.2.1
+
+Minor refactoring
+
+## v1.2.0
+
+I think this was when I added the gotosocial bot
+
 ## v1.1.1
 
 Made the flashing transitions a bit better, but it still needs more work

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);
@@ -179,7 +179,61 @@ function poptimal_svg(params) {
 }
 
 
-async function post_image(image, alt_text, cf) {
+async function send_replies(argv, cf) {
+
+	const mentionsjson = await promises.readFile(cf.mentions);
+  	const oldids = JSON.parse(mentionsjson).map((m) => m.id);
+
+	const params = new URLSearchParams();
+
+	params.append("types", ["mention"]) // this isn't working
+	                                    // so filter it explicitly
+	const notifications_url = `${cf.base_url}/api/v1/notifications?${params}`;
+	const headers = {
+		'Authorization': `Bearer ${cf.access_token}`,
+	};
+	const resp = await fetch(notifications_url, {
+		method: 'GET',
+		headers: headers,
+	});
+
+	const bodyjson = await resp.text();
+	const response = JSON.parse(bodyjson);
+	const mentions = response.filter((s) => s.type === "mention").map((s) => {
+    		const account = s.account;
+    		const status = s.status;
+    		return {
+        		id: s.id,
+        		created: s.created_at,
+        		status_id: status.id,
+        		account: account.acct,
+        		url: status.url,
+        		in_reply_to_id: status.in_reply_to_id,
+        		visibility: status.visibility
+    		};
+    	});
+	const newmentions = mentions.filter((m) => !oldids.includes(m.id));
+	for (const mention of newmentions) {
+    	    console.log(JSON.stringify(mention, null, 2));
+    	    if( mention.in_reply_to_id ) {
+        	    console.log(`won't reply to ${mention.id} as it's a reply to ${mention.in_reply_to_id}`);
+    	    } else {
+    	    	console.log(`new mention ${mention.id}`);
+        	    const reply = {
+            	    	id: mention.status_id,
+            	    	account: `@${mention.account}`,
+            	    	visibility: mention.visibility,
+        	    };
+        	    
+    	    	post(argv, cf, reply);
+    	    }
+	}
+        if( !argv.n ) {
+		await promises.writeFile(cf.mentions, JSON.stringify(mentions, null, 4));
+        }
+}
+
+async function post_image(image, alt_text, cf, reply) {
 	const status_url = `${cf.base_url}/api/v1/statuses`;
 	const media_url = `${cf.base_url}/api/v1/media`;
 	const headers = {
@@ -199,36 +253,46 @@ async function post_image(image, alt_text, cf) {
 	const bodyjson = await resp.text();
 	const response = JSON.parse(bodyjson);
 	const media_id = response["id"];
-
+	const status_body = { media_ids: [ media_id ] };
+	if( reply ) {
+    	    status_body["in_reply_to_id"] = reply.id;
+    	    status_body["status"] = reply.account;
+    	    status_body["visibility"] = reply.visibility;
+	}
 	headers['Accept'] = 'application/json';
 	headers['Content-Type'] = 'application/json';
 	const resp2 = await fetch(status_url, {
 		method: 'POST',
 		headers: headers,
-		body: JSON.stringify({ media_ids: [ media_id ] })
+		body: JSON.stringify(status_body)
 	});
 	const bodyjson2 = await resp2.text();
 
 }
 
 
-async function main() {
-	const argv = yargs(hideBin(process.argv))
-		.usage("Usage: -s SIZE [-o output] -c config.json [-p params.json]")
-		.default('s', 1200)
-		.default('c', 'config.json').argv;
 
-	const cfjson = await promises.readFile(argv.c);
+
-  	const cf = JSON.parse(cfjson);
+function make_unique_filename(reply_to) {
 
         const ts = String(Date.now());
+        if( reply_to ) {
+            return `${ts}-${reply_to.id}`;
+        } else {
+            return ts;
+        }
+}
 
-  	const fn = (argv.o || ts) + '.png';
+
-	const jsfn = (argv.o || ts) + '.json';
+async function post(argv, cf, reply_to) {
+	const filebase = make_unique_filename(reply_to);
+ 	const fn = (argv.o || filebase) + '.png';
+	const jsfn = (argv.o || filebase) + '.json';
 
   	const imgfile = cf['working_dir'] + '/' + fn;
 	const paramsfile = cf['working_dir'] + '/' + jsfn;
 
+	console.log(`Generating ${imgfile}`);
 	const params = await load_or_random_params(argv.p);
 	const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
 
@@ -250,7 +314,6 @@ async function main() {
   	const pngBuffer = pngData.asPng();
 
   	await promises.writeFile(imgfile, pngBuffer);
-
   	// generate the alt_text last to check the image file histogram
   	// so we don't include obscured colours
   	const hist = await get_histogram(imgfile);
@@ -258,12 +321,34 @@ async function main() {
 	params.alt_text = alt_text;
 	await save_params(paramsfile, params);
 	console.log(alt_text);
-	console.log(imgfile);
+  	if( cf['base_url'] && !argv.n ) {
-  	if( cf['base_url'] ) {
+  		await post_image(imgfile, alt_text, cf, reply_to);
-  		await post_image(imgfile, alt_text, cf);
   	}
 }
 
 
+async function main() {
+	const argv = yargs(hideBin(process.argv))
+		.usage("Usage: -s SIZE [-o output] [-r] [-n] -c config.json [-p params.json]")
+		.default('s', 1200)
+		.default('c', 'config.json').argv;
+
+	const cfjson = await promises.readFile(argv.c);
+  	const cf = JSON.parse(cfjson);
+
+
+        if( argv.r ) {
+                if( !cf.base_url ) {
+                    	console.log("Can't check mentions without base_url");
+                } else {
+       	     		send_replies(argv, cf);
+                }
+        } else {
+        	post(argv, cf);
+        }
+
+}
+
+
 
 main();

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.3 | 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));
 
 ```