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

Compare commits

base: bombinans:main
Branches Tags
bombinans:main
bombinans:feature-more-radius-fns
bombinans:rc-1.0.0
..
compare: bombinans:rc-1.0.0
Branches Tags
bombinans:main
bombinans:feature-more-radius-fns
bombinans:rc-1.0.0

No commits in common. "main" and "rc-1.0.0" have entirely different histories.
main ... rc-1.0.0

4 changed files with 48 additions and 149 deletions
Show Stats Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -1,14 +1,5 @@
# CHANGELOG.md
## v1.0.2
* Fixed bug which was stopping slanted grids
* Added noise
## v1.0.1
Added palettes
## v1.0.0
First deployed version

98
src/components/controls.js vendored
View File

@ -2,22 +2,25 @@
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 ],
]);
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() {
// monochrome
// one spot
// two spot
// RGB
// CMY
@ -27,69 +30,10 @@ const PALETTES = new Map([
// 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 {
//
constructor(fg, radius_opts) {
this.radius_opts = radius_opts;
this.fg = Inputs.color({label: "colour", value: fg});
@ -111,15 +55,11 @@ class DotControls {
}
random_colours() {
this.set_colour(random_colour());
}
set_colour(c) {
this.fg.value = c;
this.fg.value = random_colour();
this.fg.dispatchEvent(new Event("input"));
}
}
export { DotControls, PALETTES };
export { DotControls, random_colour };

32
src/components/dots.js
View File

@ -1,6 +1,5 @@
// calculate tiles
const RADIUS_OPTS = [
"const",
"right",
@ -13,21 +12,12 @@ const RADIUS_OPTS = [
"left-down",
"in",
"out",
"noise",
];
function distance(dx, dy) {
return Math.sqrt(dx ** 2 + dy ** 2);
}
function int_range(v1, v2) {
const vs = [v1, v2];
vs.sort((a, b) => a - b);
const low = Math.floor(vs[0]);
const high = Math.ceil(vs[1]);
return [...Array(high - low + 1).keys()].map((i) => i + low);
}
class DotMaker {
constructor(width) {
this.width = width;
@ -40,17 +30,19 @@ class DotMaker {
return [];
}
const ps = [];
const is = int_range(-this.width, this.width / m)
is.map((i) => {
const js = int_range(m * i + (m - n) * this.width, m * i)
js.map((j) => {
const imin = -this.width;
const imax = this.width / m;
for( let i = imin; i <= imax; i++ ) {
const jmin = m * i + (m - n) * this.width;
const jmax = m * i;
for( let j = jmin; j <= jmax; j++ ) {
const x = (j - m * i) / (m - n);
const y = m * (x + i);
if( x > 0 && y > 0 && x < this.width && y < this.width ) {
ps.push({i:i, j:j, x:x, y:y});
}
});
});
}
}
return ps;
}
@ -78,14 +70,6 @@ class DotMaker {
return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width;
case "in":
return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
// case "hyper-out":
// return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width;
// case "hyoer-in":
// return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
case "noise":
return maxr * Math.random();
default:
return maxr;
}

58
src/index.md
View File

@ -4,7 +4,7 @@ toc: false
<h1>poptimal</h1>
<p>v1.0.2 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
<p>by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
<div class="grid grid-cols-2">
@ -13,8 +13,7 @@ toc: false
```js
import {RADIUS_OPTS, DotMaker} from './components/dots.js';
import {PALETTES, DotControls} from './components/controls.js';
import random from "npm:random";
import {DotControls, random_colour} from './components/controls.js';
const CELL = 10;
const MAG = 2;
@ -30,29 +29,22 @@ 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 palette_input = Inputs.select(PALETTES, {label: "palette"});
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"}));
const randomise_pattern = view(Inputs.button("Random dots"));
const randomise_colours = view(Inputs.button("Random colours"));
const randomise_all = view(Inputs.button("Random all"));
```
@ -65,36 +57,28 @@ 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();
const rpalette = random.choice(Array.from(PALETTES.keys()));
palette_input.value = PALETTES.get(rpalette);
palette_input.dispatchEvent(new Event("input"));
bg_input.value = random_colour();
bg_input.dispatchEvent(new Event("input"));
ctrl1.random_colours();
ctrl2.random_colours();
```
```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>