```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());
}
```
```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
resvg-wasm in-browser)