Compare commits
No commits in common. "main" and "feature-size" have entirely different histories.
main
...
feature-si
67
poptimal.js
67
poptimal.js
@ -2,7 +2,6 @@ import { Resvg } from "@resvg/resvg-js";
|
||||
import { promises } from "fs";
|
||||
import { JSDOM } from "jsdom";
|
||||
import * as d3 from "d3";
|
||||
import * as d3c from "d3-color";
|
||||
import yargs from "yargs/yargs";
|
||||
import { hideBin } from "yargs/helpers";
|
||||
import spawn from "await-spawn";
|
||||
@ -12,17 +11,15 @@ 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';
|
||||
|
||||
const CELL = 10;
|
||||
const MAG = 2;
|
||||
const WIDTH = 200;
|
||||
const WIDTH = 20;
|
||||
const HEIGHT = WIDTH;
|
||||
// number of pixels which have to be visible for a colour to be
|
||||
// mentioned in the alt text
|
||||
const VISIBLE_DOG = 400;
|
||||
const VISIBLE_DOG = 1000;
|
||||
|
||||
function randomise_params() {
|
||||
const palette_name = random.choice(Array.from(PALETTES.keys()));
|
||||
@ -36,37 +33,13 @@ 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,
|
||||
cell: cell,
|
||||
patterns: patterns
|
||||
}
|
||||
}
|
||||
|
||||
async function load_or_random_params(paramf) {
|
||||
if( paramf ) {
|
||||
const pjson = await promises.readFile(paramf);
|
||||
const params = JSON.parse(pjson);
|
||||
params.background = d3c.color(params.background);
|
||||
params.patterns.forEach((p) => {
|
||||
p.colour = d3c.color(p.colour);
|
||||
});
|
||||
return params;
|
||||
}
|
||||
return randomise_params();
|
||||
}
|
||||
|
||||
async function save_params(paramf, params) {
|
||||
params.background = params.background.formatHex();
|
||||
params.patterns.forEach((p) => {
|
||||
p.colour = p.colour.formatHex();
|
||||
});
|
||||
await promises.writeFile(paramf, JSON.stringify(params));
|
||||
}
|
||||
|
||||
|
||||
|
||||
// lol the best way I found to to this was imagemagick!
|
||||
|
||||
@ -136,34 +109,30 @@ function poptimal_svg(params) {
|
||||
const document = window.document;
|
||||
const container = d3.select(document.body).append("div");
|
||||
|
||||
const width = WIDTH / params.cell;
|
||||
const height = WIDTH / params.cell;
|
||||
|
||||
const dm = new DotMaker(width, height);
|
||||
const dm = new DotMaker(WIDTH);
|
||||
|
||||
const svg = container.append("svg")
|
||||
.attr("width", WIDTH * MAG)
|
||||
.attr("height", HEIGHT * MAG)
|
||||
.attr("viewBox", [ 0, 0, width, height ]);
|
||||
.attr("width", WIDTH * CELL * MAG)
|
||||
.attr("height", HEIGHT * CELL * MAG)
|
||||
.attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
|
||||
|
||||
const background = svg.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("width", WIDTH)
|
||||
.attr("height", WIDTH)
|
||||
.attr("fill", params.background);
|
||||
|
||||
|
||||
params.patterns.map((p) => {
|
||||
const dots = dm.dots(1 / p.m, p.n, false);
|
||||
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, width, height))
|
||||
.attr("r", (d) => dm.radius(d, p.f, p.r))
|
||||
.attr("fill", p.colour)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
@ -214,22 +183,20 @@ async function post_image(image, alt_text, cf) {
|
||||
|
||||
async function main() {
|
||||
const argv = yargs(hideBin(process.argv))
|
||||
.usage("Usage: -s SIZE [-o output] -c config.json [-p params.json]")
|
||||
.usage("Usage: -s SIZE -o output.png -c config.json")
|
||||
.default('s', 1200)
|
||||
.default('c', 'config.json').argv;
|
||||
|
||||
const cfjson = await promises.readFile(argv.c);
|
||||
const cf = JSON.parse(cfjson);
|
||||
|
||||
const ts = String(Date.now());
|
||||
|
||||
const fn = (argv.o || ts) + '.png';
|
||||
const jsfn = (argv.o || ts) + '.json';
|
||||
|
||||
const fn = argv.o || String(Date.now()) + '.png';
|
||||
|
||||
const imgfile = cf['working_dir'] + '/' + fn;
|
||||
const paramsfile = cf['working_dir'] + '/' + jsfn;
|
||||
|
||||
const params = await load_or_random_params(argv.p);
|
||||
const params = randomise_params();
|
||||
const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
|
||||
|
||||
const namer = new ColourNamer();
|
||||
@ -249,14 +216,14 @@ async function main() {
|
||||
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);
|
||||
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);
|
||||
if( cf['base_url'] ) {
|
||||
|
||||
@ -11,11 +11,8 @@ const RADIUS_OPTS = [
|
||||
"right-down",
|
||||
"left-up",
|
||||
"left-down",
|
||||
"circle-in",
|
||||
"circle-out",
|
||||
"hyper-in",
|
||||
"hyper-out",
|
||||
"grid",
|
||||
"in",
|
||||
"out",
|
||||
"noise",
|
||||
];
|
||||
|
||||
@ -29,19 +26,15 @@ 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",
|
||||
"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 gap in the centre",
|
||||
"in": "getting larger in the centre",
|
||||
"out": "getting larger at the edges",
|
||||
"noise": "of random sizes",
|
||||
"grid": "forming a grid pattern",
|
||||
}
|
||||
|
||||
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);
|
||||
@ -50,12 +43,9 @@ function int_range(v1, v2) {
|
||||
return [...Array(high - low + 1).keys()].map((i) => i + low);
|
||||
}
|
||||
|
||||
function randint(min, max) {
|
||||
return min + Math.floor(Math.random() * (max + 1));
|
||||
}
|
||||
|
||||
class DotMaker {
|
||||
constructor(width, height) {
|
||||
console.log(width, height);
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.wh = 0.5 * (width + height);
|
||||
@ -81,48 +71,45 @@ class DotMaker {
|
||||
});
|
||||
return ps;
|
||||
}
|
||||
|
||||
radius(d, func, maxr) {
|
||||
switch (func) {
|
||||
case "const":
|
||||
return maxr;
|
||||
case "right":
|
||||
return maxr * d.x / this.width;
|
||||
case "left":
|
||||
return maxr * (this.width - d.x) / this.width;
|
||||
case "down":
|
||||
return maxr * d.y / this.height;
|
||||
case "up":
|
||||
return maxr * (this.height - d.y) / this.height;
|
||||
case "right-up":
|
||||
return 0.5 * maxr * (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;
|
||||
case "right-down":
|
||||
return 0.5 * maxr * (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;
|
||||
|
||||
case "noise":
|
||||
return maxr * Math.random();
|
||||
default:
|
||||
return maxr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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 };
|
||||
|
||||
|
||||
|
||||
19
src/index.md
19
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.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> | <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';
|
||||
@ -137,13 +137,6 @@ const dots1 = dm.dots(1 / m1, n1, false);
|
||||
const dots2 = dm.dots(1 / m2, n2, false);
|
||||
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
const rfunc1 = radius_func(f1);
|
||||
const rfunc2 = radius_func(f2);
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
@ -151,8 +144,8 @@ const rfunc2 = radius_func(f2);
|
||||
|
||||
|
||||
const svg = d3.create("svg")
|
||||
.attr("width", WIDTH * MAG)
|
||||
.attr("height", HEIGHT * MAG)
|
||||
.attr("width", width * cell * MAG)
|
||||
.attr("height", height * cell * MAG)
|
||||
.attr("viewBox", [ 0, 0, width, height ]);
|
||||
|
||||
|
||||
@ -217,8 +210,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) => dm.radius(d, f1, r1));
|
||||
dots_g2.selectAll("circle").attr("r", (d) => dm.radius(d, f2, r2));
|
||||
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user