poptimal/src/index.md

---
toc: false
---

<h1>poptimal</h1>

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

  <div class="card">

```js

import {RADIUS_OPTS, DotMaker} from './components/dots.js';
import {DotControls, random_colour} from './components/controls.js';

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 randomise_pattern = view(Inputs.button("Random grids"));
const randomise_colours = view(Inputs.button("Random colours"));
const randomise_all = view(Inputs.button("Random all"));

```


```js

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

```

```js

randomise_colours;
bg_input.value = random_colour();
bg_input.dispatchEvent(new Event("input"));
ctrl1.random_colours();
ctrl2.random_colours();

```

```js

randomise_all;
ctrl1.random_grid();
ctrl2.random_grid();
bg_input.value = random_colour();
bg_input.dispatchEvent(new Event("input"));
ctrl1.random_colours();
ctrl2.random_colours();

```


</div>
<div>


```js

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


```
  
```js


const svg = d3.create("svg")
  .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", WIDTH)
  .attr("fill", bg);

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

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

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

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



display(svg.node());


```

</div>
</div>

<style>


</style>