```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 MAG = 2;
const WIDTH = 200;
const HEIGHT = 200;
const cell_input = Inputs.range([5,60], {value: 10, label: "cell size"});
const cell = view(cell_input);
```
```js
const bg_input = Inputs.color({
label: "background", value: d3.color("white").formatHex()
});
const bg = view(bg_input);
const ctrl1 = new DotControls(d3.color("white").formatHex(), RADIUS_OPTS);
const ctrl2 = new DotControls(d3.color("white").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"));
cell_input.value = 5 + random.float() * random.float() * 55;
cell_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 width = WIDTH / cell;
const height = HEIGHT / cell;
const dm = new DotMaker(width, height);
const dots1 = dm.dots(1 / m1, n1, false);
const dots2 = dm.dots(1 / m2, n2, false);
```
```js
const rfunc1 = dm.radius(f1);
const rfunc2 = dm.radius(f2);
```
```js
// Set up the svg canvas
const svg = d3.create("svg")
.attr("width", WIDTH * MAG)
.attr("height", HEIGHT * MAG)
.attr("viewBox", [ 0, 0, width, height ]);
svg.append("clipPath")
.attr("id", "clipRect")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", 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", height)
.attr("fill", (d) => d.bg)
;
const dots_g1 = svg.append("g")
.attr("id", "dots1")
.attr("clip-path", "url(#clipRect)");
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")
.attr("clip-path", "url(#clipRect)");
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) => rfunc1(d, r1));
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, 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)