bombinans/poptimal
1
0
Fork 0
Code Issues 12 Pull Requests Packages Projects 1 Releases Wiki Activity

Broke controls into a class and made everything randomisable

Browse Source
This commit is contained in:
Mike Lynch 2025-01-06 12:28:13 +11:00
parent 4c292031b5
commit db222246f2
2 changed files with 100 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/controls.js vendored Normal file
View File

@ -0,0 +1,49 @@
// controls
import * as Inputs from "npm:@observablehq/inputs";
import random from "npm:random";
import * as d3 from "npm:d3-color";
console.log("Hi there");
console.log(d3);
console.log(d3.rgb(1, 0, 0));
function random_colour() {
const r = random.float(0, 1) * 255;
const g = random.float(0, 1) * 255;
const b = random.float(0, 1) * 255;
return d3.rgb(r, g, b).formatHex();
}
class DotControls {
//
constructor(fg, radius_opts) {
this.radius_opts = radius_opts;
this.fg = Inputs.color({label: "colour", value: fg});
this.m = Inputs.range([1, 5], {value: 2, step: 1, label:"m"});
this.n = Inputs.range([1, 5], {value: 2, step: 1, label:"n"});
this.r = Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"});
this.f = Inputs.select(radius_opts, {value: radius_opts[0]});
}
random_grid() {
this.m.value = random.choice([1, 2, 3, 4, 5]);
this.n.value = random.choice([1, 2, 3, 4, 5]);
this.r.value = random.float(0, 0.5);
this.f.value = random.choice(this.radius_opts);
this.m.dispatchEvent(new Event("input"));
this.n.dispatchEvent(new Event("input"));
this.r.dispatchEvent(new Event("input"));
this.f.dispatchEvent(new Event("input"));
}
random_colours() {
this.fg.value = random_colour();
this.fg.dispatchEvent(new Event("input"));
}
}
export { DotControls, random_colour };

71
src/index.md
View File

@ -10,7 +10,8 @@ toc: false
```js ```js
import {RADIUS_OPTS, DotMaker} from './components/dots.js' import {RADIUS_OPTS, DotMaker} from './components/dots.js';
import {DotControls, random_colour} from './components/controls.js';
const CELL = 10; const CELL = 10;
const MAG = 2; const MAG = 2;
@ -20,41 +21,71 @@ const HEIGHT = WIDTH;
const dm = new DotMaker(WIDTH); const dm = new DotMaker(WIDTH);
const bg = view(Inputs.color({label: "background", value: d3.color("yellow").formatHex()})) const bg_input = Inputs.color({label: "background", value: d3.color("yellow").formatHex()});
const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()})) const bg = view(bg_input);
const m1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m1"}));
const n1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n1"})); const ctrl1 = new DotControls(d3.color("red").formatHex(), RADIUS_OPTS);
const r1 = view(Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"})); const ctrl2 = new DotControls(d3.color("blue").formatHex(), RADIUS_OPTS);
const f1 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
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 v2 = view(Inputs.toggle({label: "Second grid", value:true})); 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 ```js
const fg2 = view(Inputs.color({ randomise_colours;
label: "fg2", value: d3.color("blue").formatHex(), bg_input.value = random_colour();
disabled: !v2 bg_input.dispatchEvent(new Event("input"));
})); ctrl1.random_colours();
ctrl2.random_colours();
const m2 = view(Inputs.range([1, 5], {value: 1, step: 1, label:"m2", disabled: !v2}));
const n2 = view(Inputs.range([1, 5], {value: 3, step: 1, label:"n2", disabled: !v2}));
const r2 = view(Inputs.range([0, 0.5], {value: 0.2, step: 0.01, label: "radius"}));
const f2 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
``` ```
```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>
<div> <div>
```js ```js
const dots1 = dm.dots(1 / m1, n1) const dots1 = dm.dots(1 / m1, n1);
const dots2 = v2 ? dm.dots(1 / m2, n2) : [] const dots2 = dm.dots(1 / m2, n2);
``` ```