poptimal/src/index.md

---
toc: false
---



<h1>poptimal</h1>

<p>v1.1.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>

<div class="grid grid-cols-2">

  <div class="card">

```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';
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 dm = new DotMaker(WIDTH);

const bg_input = Inputs.color({label: "background", value: d3.color("yellow").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 fg1 = view(ctrl1.fg);
const m1 = view(ctrl1.m);
const n1 = view(ctrl1.n);
const r1 = view(ctrl1.r);
const f1 = view(ctrl1.f);


const fg2 = view(ctrl2.fg);
const m2 = view(ctrl2.m);
const n2 = view(ctrl2.n);
const r2 = view(ctrl2.r);
const f2 = view(ctrl2.f);

const palette_input = Inputs.select(PALETTES, {label: "palette"});
const palette_fn = view(palette_input);

const randomise_pattern = view(Inputs.button("Random", {label:"grids"}));
const randomise_colours = view(Inputs.button("Random", {label:"colours"}));
const randomise_palette = view(Inputs.button("Random", {label:"palette"}));
const randomise_all = view(Inputs.button("Random", {label:"all"}));


```

```js
// in its own code block so that it doesn't slow down load for the rest
// of the page
await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'));

const wasm_init = "ready";
```


```js

randomise_pattern;
ctrl1.random_grid();
ctrl2.random_grid();

```


```js
randomise_all;
const rpalette = random.choice(Array.from(PALETTES.keys()));
ctrl1.null_grid();
ctrl2.null_grid();
palette_input.value = PALETTES.get(rpalette);
palette_input.dispatchEvent(new Event("input"));
ctrl1.random_grid();
ctrl2.random_grid();

```

```js
randomise_palette
const rpalette = random.choice(Array.from(PALETTES.keys()));
palette_input.value = PALETTES.get(rpalette);
palette_input.dispatchEvent(new Event("input"));

```

```js
randomise_colours;
if( palette_fn ) {
  const palette = palette_fn();
  bg_input.value = palette[0].formatHex();
  bg_input.dispatchEvent(new Event("input"));
  ctrl1.set_colour(palette[1].formatHex());
  ctrl2.set_colour(palette[2].formatHex());
}

```

</div>
<div>


```js

const dots1 = dm.dots(1 / m1, n1);
const dots2 = dm.dots(1 / m2, n2);


```
  
```js
// Set up the svg canvas 


const svg = d3.create("svg")
  .attr("width", WIDTH * CELL * MAG)
  .attr("height", HEIGHT * CELL * MAG)
  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);


// re transitions: they should only run when updating the palette and
// grid, not via the sliders

// see https://www.d3indepth.com/transitions/ and use enter / exit etc

// note 

// do background as a select so that transitions work

const bg_g = svg.append("g")
  .attr("id", "background");

bg_g.selectAll("rect")
  .data( [ { bg: bg } ] )
  .join("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", WIDTH)
  .attr("height", WIDTH)
  .attr("fill", (d) => d.bg)
;


const dots_g1 = svg.append("g")
  .attr("id", "dots1");

dots_g1.selectAll("circle")
  .data(dots1)
  .join("circle")
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y)
  .attr("fill", fg1);

const dots_g2 = svg.append("g")
  .attr("id", "dots2");

dots_g2.selectAll("circle")
  .data(dots2)
  .join("circle")
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y)
  .attr("fill", fg2);

display(svg.node());

```

```js
  // separate code block for when I understand transitions better
  
  dots_g1.selectAll("circle").attr("r", (d) => dm.radius(d, f1, r1));
  dots_g2.selectAll("circle").attr("r", (d) => dm.radius(d, f2, r2));

```

```js

display(download(() => {
  const thing = download_as_svg(svg.node())
  return thing;
}, "poptimal.svg", "Save as SVG"));
```

```js

await wasm_init;

display(download(() => {
  console.log("PNG value");
  const thing = download_as_png(svg.node())
  return thing;
}, "poptimal.png", "Save as PNG"));


```
(PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)

</div>

<style>
h1 {
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
}

p {
  font-family: helvetica, arial, sans-serif;
  font-size: 9pt
}


</style>