Merge pull request 'rc-1.1.1 - pulling to get the sample image onto main' (#22) from rc-1.1.1 into main
Reviewed-on: #22rc-1.1.1^2
commit
78e696e7e9
47
README.md
47
README.md
|
|
@ -3,8 +3,12 @@
|
|||
An experiment in using Observable to generate colourful SVG patterns
|
||||
reminiscent of op art or halftone dots.
|
||||
|
||||
See it in action [here](https://etc.mikelynch.org/poptimal/)
|
||||
|
||||
Comments, feedback via Mastodon: [Mike Lynch](https://aus.social/@mikelynch)
|
||||
|
||||
|
||||
|
||||
## Observable
|
||||
|
||||
This is an [Observable Framework](https://observablehq.com/framework/) app. To install the required dependencies, run:
|
||||
|
|
@ -21,46 +25,3 @@ npm run dev
|
|||
|
||||
Then visit <http://localhost:3000> to preview your app.
|
||||
|
||||
For more, see <https://observablehq.com/framework/getting-started>.
|
||||
|
||||
## Project structure
|
||||
|
||||
A typical Framework project looks like this:
|
||||
|
||||
```ini
|
||||
.
|
||||
├─ src
|
||||
│ ├─ components
|
||||
│ │ └─ timeline.js # an importable module
|
||||
│ ├─ data
|
||||
│ │ ├─ launches.csv.js # a data loader
|
||||
│ │ └─ events.json # a static data file
|
||||
│ ├─ example-dashboard.md # a page
|
||||
│ ├─ example-report.md # another page
|
||||
│ └─ index.md # the home page
|
||||
├─ .gitignore
|
||||
├─ observablehq.config.js # the app config file
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
|
||||
**`src`** - This is the “source root” — where your source files live. Pages go here. Each page is a Markdown file. Observable Framework uses [file-based routing](https://observablehq.com/framework/project-structure#routing), which means that the name of the file controls where the page is served. You can create as many pages as you like. Use folders to organize your pages.
|
||||
|
||||
**`src/index.md`** - This is the home page for your app. You can have as many additional pages as you’d like, but you should always have a home page, too.
|
||||
|
||||
**`src/data`** - You can put [data loaders](https://observablehq.com/framework/data-loaders) or static data files anywhere in your source root, but we recommend putting them here.
|
||||
|
||||
**`src/components`** - You can put shared [JavaScript modules](https://observablehq.com/framework/imports) anywhere in your source root, but we recommend putting them here. This helps you pull code out of Markdown files and into JavaScript modules, making it easier to reuse code across pages, write tests and run linters, and even share code with vanilla web applications.
|
||||
|
||||
**`observablehq.config.js`** - This is the [app configuration](https://observablehq.com/framework/config) file, such as the pages and sections in the sidebar navigation, and the app’s title.
|
||||
|
||||
## Command reference
|
||||
|
||||
| Command | Description |
|
||||
| ----------------- | -------------------------------------------------------- |
|
||||
| `npm install` | Install or reinstall dependencies |
|
||||
| `npm run dev` | Start local preview server |
|
||||
| `npm run build` | Build your static site, generating `./dist` |
|
||||
| `npm run deploy` | Deploy your app to Observable |
|
||||
| `npm run clean` | Clear the local data loader cache |
|
||||
| `npm run observable` | Run commands like `observable help` |
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -10,8 +10,15 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@observablehq/framework": "^1.13.0",
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"d3": "^7.9.0",
|
||||
"d3-color": "^3.1.0",
|
||||
"d3-dsv": "^3.0.1",
|
||||
"d3-time-format": "^4.1.0"
|
||||
"d3-time-format": "^4.1.0",
|
||||
"jsdom": "^26.0.0",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
"random": "^5.1.1",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rimraf": "^5.0.5"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
import { Resvg } from "@resvg/resvg-js";
|
||||
import { promises } from "fs";
|
||||
import { JSDOM } from "jsdom";
|
||||
import * as d3 from "d3";
|
||||
import yargs from "yargs/yargs";
|
||||
import { hideBin } from "yargs/helpers";
|
||||
|
||||
import random from "random";
|
||||
|
||||
const xmlns = "http://www.w3.org/2000/xmlns/";
|
||||
const xlinkns = "http://www.w3.org/1999/xlink";
|
||||
const svgns = "http://www.w3.org/2000/svg";
|
||||
|
||||
import {RADIUS_OPTS, DotMaker} from './src/components/dots.js';
|
||||
import {PALETTES} from './src/components/palettes.js';
|
||||
|
||||
const CELL = 10;
|
||||
const MAG = 2;
|
||||
const WIDTH = 20;
|
||||
const HEIGHT = WIDTH;
|
||||
|
||||
function poptimal_svg() {
|
||||
const window = new JSDOM().window;
|
||||
const document = window.document;
|
||||
const container = d3.select(document.body).append("div");
|
||||
|
||||
const dm = new DotMaker(WIDTH);
|
||||
|
||||
const m1 = random.choice([1, 2, 3, 4, 5]);
|
||||
const n1 = random.choice([1, 2, 3, 4, 5]);
|
||||
const m2 = random.choice([1, 2, 3, 4, 5]);
|
||||
const n2 = random.choice([1, 2, 3, 4, 5]);
|
||||
const palette_fn = random.choice(Array.from(PALETTES.values()));
|
||||
const palette = palette_fn();
|
||||
const bg = palette[0];
|
||||
const fg1 = palette[1];
|
||||
const fg2 = palette[2];
|
||||
const f1 = random.choice(RADIUS_OPTS);
|
||||
const f2 = random.choice(RADIUS_OPTS);
|
||||
const r1 = random.float(0, 0.4);
|
||||
const r2 = random.float(0, 0.4);
|
||||
|
||||
const dots1 = dm.dots(1 / m1, n1);
|
||||
const dots2 = dm.dots(1 / m2, n2);
|
||||
|
||||
|
||||
const svg = container.append("svg")
|
||||
.attr("width", WIDTH * CELL * MAG)
|
||||
.attr("height", HEIGHT * CELL * MAG)
|
||||
.attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
|
||||
|
||||
const background = svg.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", WIDTH)
|
||||
.attr("height", WIDTH)
|
||||
.attr("fill", bg);
|
||||
|
||||
const dots_g1 = svg.append("g")
|
||||
.attr("id", "dots1");
|
||||
|
||||
dots_g1.selectAll("circle")
|
||||
.data(dots1)
|
||||
.join("circle")
|
||||
.attr("r", (d) => dm.radius(d, f1, r1))
|
||||
.attr("fill", fg1)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
|
||||
const dots_g2 = svg.append("g")
|
||||
.attr("id", "dots2");
|
||||
|
||||
dots_g2.selectAll("circle")
|
||||
.data(dots2)
|
||||
.join("circle")
|
||||
.attr("r", (d) => dm.radius(d, f2, r2))
|
||||
.attr("fill", fg2)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
|
||||
const node = svg.node();
|
||||
|
||||
node.setAttributeNS(xmlns, "xmlns", svgns);
|
||||
node.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
|
||||
const serializer = new window.XMLSerializer;
|
||||
return serializer.serializeToString(node);
|
||||
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const argv = yargs(hideBin(process.argv))
|
||||
.usage("Usage: -w WIDTH -o OUTPUT_PNG")
|
||||
.default('w', 1200)
|
||||
.default('o', 'poptimal.png').argv;
|
||||
|
||||
const svg = poptimal_svg(argv.w);
|
||||
const opts = {
|
||||
background: 'rgba(255, 255, 255, 1.0)',
|
||||
fitTo: {
|
||||
mode: 'width',
|
||||
value: argv.w,
|
||||
},
|
||||
};
|
||||
const resvg = new Resvg(svg, opts)
|
||||
const pngData = resvg.render()
|
||||
const pngBuffer = pngData.asPng()
|
||||
|
||||
await promises.writeFile(argv.o, pngBuffer);
|
||||
}
|
||||
|
||||
|
||||
|
||||
main();
|
||||
|
|
@ -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 {
|
||||
|
|
@ -116,10 +32,6 @@ class DotControls {
|
|||
this.r.dispatchEvent(new Event("input"));
|
||||
}
|
||||
|
||||
random_colours() {
|
||||
this.set_colour(random_colour());
|
||||
}
|
||||
|
||||
set_colour(c) {
|
||||
this.fg.value = c;
|
||||
this.fg.dispatchEvent(new Event("input"));
|
||||
|
|
@ -128,4 +40,4 @@ class DotControls {
|
|||
|
||||
}
|
||||
|
||||
export { DotControls, PALETTES };
|
||||
export { DotControls };
|
||||
|
|
@ -61,7 +61,6 @@ export function svg_to_string(svg) {
|
|||
|
||||
|
||||
export function download_as_svg(svg) {
|
||||
console.log("HEY download_as_svg");
|
||||
const str = svg_to_string(svg);
|
||||
return new Blob([str], {type: "image/svg+xml"})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
import * as d3 from "d3-color";
|
||||
import shuffle from "lodash.shuffle";
|
||||
import random from "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