Broke controls into a class and made everything randomisable
Mike Lynch
parent
4c292031b5
commit
db222246f2
|
|
@ -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
71
src/index.md
|
|
@ -10,7 +10,8 @@ toc: false
|
|||
|
||||
```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 MAG = 2;
|
||||
|
|
@ -20,41 +21,71 @@ const HEIGHT = WIDTH;
|
|||
const dm = new DotMaker(WIDTH);
|
||||
|
||||
|
||||
const bg = view(Inputs.color({label: "background", value: d3.color("yellow").formatHex()}))
|
||||
const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()}))
|
||||
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 r1 = view(Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"}));
|
||||
const f1 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
|
||||
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 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
|
||||
|
||||
const fg2 = view(Inputs.color({
|
||||
label: "fg2", value: d3.color("blue").formatHex(),
|
||||
disabled: !v2
|
||||
}));
|
||||
|
||||
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]}));
|
||||
|
||||
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 = v2 ? dm.dots(1 / m2, n2) : []
|
||||
const dots1 = dm.dots(1 / m1, n1);
|
||||
const dots2 = dm.dots(1 / m2, n2);
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in New Issue