Broke out the colour stuff to its own component
Mike Lynch
parent
6fc02a1f3e
commit
d2c38a4053
|
|
@ -2,90 +2,6 @@
|
|||
|
||||
import * as Inputs from "npm:@observablehq/inputs";
|
||||
import random from "npm:random";
|
||||
import shuffle from "npm:lodash.shuffle";
|
||||
import * as d3 from "npm:d3-color";
|
||||
|
||||
const PALETTES = new Map([
|
||||
[ "random RGB", palette_random ],
|
||||
[ "grayscale", palette_grayscale ],
|
||||
[ "monochrome", palette_monochrome ],
|
||||
[ "one spot", palette_one_spot ],
|
||||
[ "triad", triad_saturated ],
|
||||
[ "triad pastel", triad_pastel ],
|
||||
[ "triad dusk", triad_dusk ],
|
||||
[ "RGB", palette_rgb ],
|
||||
[ "RBY", palette_rby ],
|
||||
[ "CMY", palette_cmy ],
|
||||
]);
|
||||
|
||||
// two spot
|
||||
// RGB
|
||||
// CMY
|
||||
// RYB
|
||||
// triad - full saturation
|
||||
// triad - pastel
|
||||
// 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()));
|
||||
}
|
||||
|
||||
function palette_one_spot() {
|
||||
const hue = random.uniform(0, 360);
|
||||
const cols = [ d3.color("white"), d3.color("black"), d3.hsl(hue(), 1, 0.5) ]
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function triad_saturated() {
|
||||
return triad(1, 0.5);
|
||||
}
|
||||
|
||||
function triad_pastel() {
|
||||
return triad(0.6, 0.7);
|
||||
}
|
||||
|
||||
function triad_dusk() {
|
||||
return triad(1, 0.25);
|
||||
}
|
||||
|
||||
function triad(s, l) {
|
||||
const u = random.uniform(0, 360);
|
||||
const h1 = u();
|
||||
const h2 = (h1 + 120) % 360;
|
||||
const h3 = (h1 + 240) % 360;
|
||||
const cols = [ h1, h2, h3 ].map((h) => d3.hsl(h, s, l));
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function palette_rgb() {
|
||||
const cols = [ d3.rgb(255, 0, 0), d3.rgb(0, 255, 0), d3.rgb(0, 0, 255) ];
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function palette_rby() {
|
||||
const cols = [ d3.rgb(255, 0, 0), d3.rgb(255, 255, 0), d3.rgb(0, 0, 255) ];
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function palette_cmy() {
|
||||
const cols = [ d3.rgb(0, 255, 255), d3.rgb(255, 255, 0), d3.rgb(255, 0, 255) ];
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
|
||||
class DotControls {
|
||||
|
|
@ -122,4 +38,4 @@ class DotControls {
|
|||
|
||||
}
|
||||
|
||||
export { DotControls, PALETTES };
|
||||
export { DotControls };
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
import * as d3 from "npm:d3-color";
|
||||
import shuffle from "npm:lodash.shuffle";
|
||||
import random from "npm:random";
|
||||
|
||||
const PALETTES = new Map([
|
||||
[ "random RGB", palette_random ],
|
||||
[ "grayscale", palette_grayscale ],
|
||||
[ "monochrome", palette_monochrome ],
|
||||
[ "one spot", palette_one_spot ],
|
||||
[ "triad", triad_saturated ],
|
||||
[ "triad pastel", triad_pastel ],
|
||||
[ "triad dusk", triad_dusk ],
|
||||
[ "RGB", palette_rgb ],
|
||||
[ "RBY", palette_rby ],
|
||||
[ "CMY", palette_cmy ],
|
||||
]);
|
||||
|
||||
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()));
|
||||
}
|
||||
|
||||
function palette_one_spot() {
|
||||
const hue = random.uniform(0, 360);
|
||||
const cols = [ d3.color("white"), d3.color("black"), d3.hsl(hue(), 1, 0.5) ]
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function triad_saturated() {
|
||||
return triad(1, 0.5);
|
||||
}
|
||||
|
||||
function triad_pastel() {
|
||||
return triad(0.6, 0.7);
|
||||
}
|
||||
|
||||
function triad_dusk() {
|
||||
return triad(1, 0.25);
|
||||
}
|
||||
|
||||
function triad(s, l) {
|
||||
const u = random.uniform(0, 360);
|
||||
const h1 = u();
|
||||
const h2 = (h1 + 120) % 360;
|
||||
const h3 = (h1 + 240) % 360;
|
||||
const cols = [ h1, h2, h3 ].map((h) => d3.hsl(h, s, l));
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function palette_rgb() {
|
||||
const cols = [ d3.rgb(255, 0, 0), d3.rgb(0, 255, 0), d3.rgb(0, 0, 255) ];
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function palette_rby() {
|
||||
const cols = [ d3.rgb(255, 0, 0), d3.rgb(255, 255, 0), d3.rgb(0, 0, 255) ];
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
function palette_cmy() {
|
||||
const cols = [ d3.rgb(0, 255, 255), d3.rgb(255, 255, 0), d3.rgb(255, 0, 255) ];
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
export { PALETTES }
|
||||
|
|
@ -15,7 +15,8 @@ toc: false
|
|||
```js
|
||||
|
||||
import {RADIUS_OPTS, DotMaker} from './components/dots.js';
|
||||
import {PALETTES, DotControls} from './components/controls.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";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue