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

Palettes are working with three basic kinds

pull/14/head
Mike Lynch 2025-01-08 14:02:47 +11:00
parent c8aad099c5
commit 2b839fdbee
2 changed files with 65 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/controls.js vendored
View File

@ -4,20 +4,11 @@ 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();
}
function random_palette() {
const PALETTES = new Map([
[ "random RGB", palette_random ],
[ "grayscale", palette_grayscale ],
[ "monochrome", palette_monochrome ],
]);
// monochrome
// one spot
@ -30,10 +21,27 @@ function random_palette() {
// trial - dusk
// random HSV
// random RGB
function palette_random() {
const u = random.uniform(0, 255);
return [1,2,3].map((x)=> d3.rgb(u(), u(), u()));
}
function palette_grayscale() {
const u = random.uniform(0, 1);
return [1,2,3].map((x)=> d3.hsl(0, 0, u()));
}
function palette_monochrome() {
const u = random.uniform(0, 1);
const h = u() * 360;
return [1,2,3].map((x)=> d3.hsl(h, u(), u()));
}
class DotControls {
//
constructor(fg, radius_opts) {
this.radius_opts = radius_opts;
this.fg = Inputs.color({label: "colour", value: fg});
@ -55,11 +63,15 @@ class DotControls {
}
random_colours() {
this.fg.value = random_colour();
this.set_colour(random_colour());
}
set_colour(c) {
this.fg.value = c;
this.fg.dispatchEvent(new Event("input"));
}
}
export { DotControls, random_colour };
export { DotControls, PALETTES };

56
src/index.md
View File

@ -13,7 +13,8 @@ toc: false
```js
import {RADIUS_OPTS, DotMaker} from './components/dots.js';
import {DotControls, random_colour} from './components/controls.js';
import {PALETTES, DotControls} from './components/controls.js';
import random from "npm:random";
const CELL = 10;
const MAG = 2;
@ -29,22 +30,29 @@ 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 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 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 dots"));
const randomise_colours = view(Inputs.button("Random colours"));
const randomise_all = view(Inputs.button("Random all"));
const palette_input = Inputs.select(PALETTES, {label: "Palette type"});
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"}));
```
@ -57,28 +65,36 @@ 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();
const rpalette = random.choice(Array.from(PALETTES.keys()));
palette_input.value = PALETTES.get(rpalette);
palette_input.dispatchEvent(new Event("input"));
```
```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());
}
```
</div>
<div>