Compare commits
No commits in common. "main" and "feature-fns-are-closures" have entirely different histories.
main
...
feature-fn
14
CHANGELOG.md
14
CHANGELOG.md
@ -1,17 +1,5 @@
|
||||
# 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
|
||||
@ -31,4 +19,4 @@ Added palettes
|
||||
|
||||
## v1.0.0
|
||||
|
||||
First deployed version
|
||||
First deployed version
|
||||
135
poptimal.js
135
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, radius_func, DotMaker} from './src/components/dots.js';
|
||||
import {RADIUS_OPTS, RADIUS_DESC, 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 = radius_func(p.f);
|
||||
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, width, height))
|
||||
.attr("r", (d) => rfunc(d, p.r))
|
||||
.attr("fill", p.colour)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
@ -179,61 +179,7 @@ function poptimal_svg(params) {
|
||||
}
|
||||
|
||||
|
||||
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) {
|
||||
async function post_image(image, alt_text, cf) {
|
||||
const status_url = `${cf.base_url}/api/v1/statuses`;
|
||||
const media_url = `${cf.base_url}/api/v1/media`;
|
||||
const headers = {
|
||||
@ -253,46 +199,36 @@ async function post_image(image, alt_text, cf, reply) {
|
||||
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(status_body)
|
||||
body: JSON.stringify({ media_ids: [ media_id ] })
|
||||
});
|
||||
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;
|
||||
|
||||
|
||||
function make_unique_filename(reply_to) {
|
||||
const cfjson = await promises.readFile(argv.c);
|
||||
const cf = JSON.parse(cfjson);
|
||||
|
||||
const ts = String(Date.now());
|
||||
if( reply_to ) {
|
||||
return `${ts}-${reply_to.id}`;
|
||||
} else {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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 fn = (argv.o || ts) + '.png';
|
||||
const jsfn = (argv.o || ts) + '.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'];
|
||||
|
||||
@ -302,18 +238,19 @@ async function post(argv, cf, reply_to) {
|
||||
|
||||
const svg = poptimal_svg(params);
|
||||
const opts = {
|
||||
background: 'rgba(255, 255, 255, 1.0)',
|
||||
fitTo: {
|
||||
mode: 'width',
|
||||
value: argv.s,
|
||||
},
|
||||
};
|
||||
background: 'rgba(255, 255, 255, 1.0)',
|
||||
fitTo: {
|
||||
mode: 'width',
|
||||
value: argv.s,
|
||||
},
|
||||
};
|
||||
|
||||
const resvg = new Resvg(svg, opts);
|
||||
const pngData = resvg.render();
|
||||
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);
|
||||
@ -321,34 +258,12 @@ async function post(argv, cf, reply_to) {
|
||||
params.alt_text = alt_text;
|
||||
await save_params(paramsfile, params);
|
||||
console.log(alt_text);
|
||||
if( cf['base_url'] && !argv.n ) {
|
||||
await post_image(imgfile, alt_text, cf, reply_to);
|
||||
console.log(imgfile);
|
||||
if( cf['base_url'] ) {
|
||||
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();
|
||||
|
||||
@ -81,48 +81,47 @@ class DotMaker {
|
||||
});
|
||||
return ps;
|
||||
}
|
||||
|
||||
radius(func) {
|
||||
switch (func) {
|
||||
case "const":
|
||||
return (d, r) => r;
|
||||
case "right":
|
||||
return (d, r) => r * d.x / this.width;
|
||||
case "left":
|
||||
return (d, r) => r * (this.width - d.x) / this.width;
|
||||
case "down":
|
||||
return (d, r) => r * d.y / this.height;
|
||||
case "up":
|
||||
return (d, r) => r * (this.height - d.y) / this.height;
|
||||
case "right-up":
|
||||
return (d, r) => 0.5 * r * (d.x + this.height - d.y) / this.wh;
|
||||
case "left-up":
|
||||
return (d, r) => 0.5 * r * (this.width - d.x + this.height - d.y) / this.wh;
|
||||
case "right-down":
|
||||
return (d, r) => 0.5 * r * (d.x + d.y) / this.wh;
|
||||
case "left-down":
|
||||
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 * (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 "noise":
|
||||
return (d, r) => r * Math.random();
|
||||
case "grid":
|
||||
const xk = Math.PI * (2 * randint(1, 10) - 1) / this.width;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function radius_func(func) {
|
||||
switch (func) {
|
||||
case "const":
|
||||
return (d, r, w, h) => r;
|
||||
case "right":
|
||||
return (d, r, w, h) => r * d.x / w;
|
||||
case "left":
|
||||
return (d, r, w, h) => r * (w - d.x) / w;
|
||||
case "down":
|
||||
return (d, r, w, h) => r * d.y / h;
|
||||
case "up":
|
||||
return (d, r, w, h) => r * (h - d.y) / h;
|
||||
case "right-up":
|
||||
return (d, r, w, h) => r * (d.x + h - d.y) / (w + h);
|
||||
case "left-up":
|
||||
return (d, r, w, h) => r * (w - d.x + h - d.y) / (w + h);
|
||||
case "right-down":
|
||||
return (d, r, w, h) => r * (d.x + d.y) / (w + h);
|
||||
case "left-down":
|
||||
return (d, r, w, h) => r * (w - d.x + d.y) / (w + h);
|
||||
case "circle-out":
|
||||
return (d, r, w, h) => 4 * r * distance((d.x - w / 2), (d.y - h / 2)) / (w + h);
|
||||
case "circle-in":
|
||||
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, w, h) => 2 * r * (1 - Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h));
|
||||
case "hyper-out":
|
||||
return (d, r, w, h) => 2 * r * Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h);
|
||||
case "noise":
|
||||
return (d, r, w, h) => r * Math.random();
|
||||
case "grid":
|
||||
const xk = Math.PI * (2 * randint(1, 10) - 1);
|
||||
const yk = Math.PI * (2 * randint(1, 10) - 1);
|
||||
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, w, h) => r;
|
||||
}
|
||||
}
|
||||
|
||||
export { RADIUS_OPTS, RADIUS_DESC, DotMaker, radius_func };
|
||||
export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
|
||||
|
||||
|
||||
|
||||
12
src/index.md
12
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.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>
|
||||
<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-3">
|
||||
|
||||
@ -16,7 +16,7 @@ colourful generative patterns using [d3](https://d3js.org/) and [Observable Fram
|
||||
|
||||
```js
|
||||
|
||||
import {RADIUS_OPTS, DotMaker, radius_func} from './components/dots.js';
|
||||
import {RADIUS_OPTS, DotMaker} 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 = radius_func(f1);
|
||||
const rfunc2 = radius_func(f2);
|
||||
const rfunc1 = dm.radius(f1);
|
||||
const rfunc2 = dm.radius(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, width, height));
|
||||
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2, width, height));
|
||||
dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1));
|
||||
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));
|
||||
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user