Merge pull request 'Put the wasm load in its own code block' (#18) from feature-downloads into main

Reviewed-on: #18

CHANGELOG.md

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

src/components/controls.js

@@ -2,25 +2,22 @@
 
 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
@@ -30,10 +27,69 @@ 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()));
+}
+
+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});
@@ -55,11 +111,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 };

src/components/dots.js

@@ -1,5 +1,6 @@
 // calculate tiles
 
+
 const RADIUS_OPTS = [ 
 	"const",
 	"right",
@@ -12,12 +13,21 @@ 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;
@@ -30,19 +40,17 @@ class DotMaker {
 			return [];
 		}
 		const ps = [];
-		const imin = -this.width;
+		const is = int_range(-this.width, this.width / m)
-		const imax = this.width / m;
+		is.map((i) => {
-		for( let i = imin; i <= imax; i++ ) {
+			const js = int_range(m * i + (m - n) * this.width, m * i)
-			const jmin = m * i + (m - n) * this.width;
+			js.map((j) => {
-			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;
 	}
 
@@ -70,6 +78,14 @@ 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;
 	  }

src/components/download.js

@@ -0,0 +1,85 @@
+
+import * as resvg from 'npm:@resvg/resvg-wasm';
+
+
+const xmlns = "http://www.w3.org/2000/xmlns/";
+const xlinkns = "http://www.w3.org/1999/xlink";
+const svgns = "http://www.w3.org/2000/svg";
+
+// adapted from the DOM.download method as per this issue:
+
+// https://github.com/observablehq/framework/issues/906
+
+
+export function download(value, name = "untitled", label = "Save") {
+  const a = document.createElement("a");
+  const b = a.appendChild(document.createElement("button"));
+  b.textContent = label;
+  a.download = name;
+
+  async function reset() {
+    await new Promise(requestAnimationFrame);
+    URL.revokeObjectURL(a.href);
+    a.removeAttribute("href");
+    b.textContent = label;
+    b.disabled = false;
+  }
+
+  a.onclick = async event => {
+    console.log("clicked download");
+    b.disabled = true;
+    if (a.href) {
+      console.log(`already saved: ${a.href}`);
+      return reset(); // Already saved.
+    }
+    b.textContent = "Saving…";
+    try {
+      console.log("awaiting value function");
+      const object = await (typeof value === "function" ? value() : value);
+      console.log(object);
+      b.textContent = "Download";
+      a.href = URL.createObjectURL(object); // eslint-disable-line require-atomic-updates
+      console.log(`url = ${a.href}`);
+    } catch (ignore) {
+      b.textContent = label;
+    }
+    if (event.eventPhase) return reset(); // Already downloaded.
+    b.disabled = false;
+  };
+
+  return a;
+}
+
+
+export function svg_to_string(svg) {
+  svg = svg.cloneNode(true);
+  svg.setAttributeNS(xmlns, "xmlns", svgns);
+  svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
+  const serializer = new window.XMLSerializer;
+  return serializer.serializeToString(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"})
+}
+
+export async function download_as_png (svg) {
+  // The Wasm must be initialized first
+
+  const svgstr = svg_to_string(svg);
+
+  const opts = {
+      fitTo: {
+        mode: 'width', // If you need to change the size
+        value: 400,
+      }
+    };
+  const resvgJS = new resvg.Resvg(svgstr, opts)
+  const pngData = resvgJS.render(svgstr, opts) 
+  const pngBuffer = pngData.asPng();
+  return new Blob([pngBuffer], { type: 'image/png' });
+}
+

src/index.md

@@ -2,9 +2,11 @@
 toc: false
 ---
 
+
+
 <h1>poptimal</h1>
 
-<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>
+<p>v1.1.0 | 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,7 +15,11 @@ 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 {download, download_as_svg, download_as_png} from './components/download.js';
+import random from "npm:random";
+
+import * as resvg from 'npm:@resvg/resvg-wasm';
 
 const CELL = 10;
 const MAG = 2;
@@ -29,23 +35,38 @@ 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 palette_input = Inputs.select(PALETTES, {label: "palette"});
-const randomise_colours = view(Inputs.button("Random colours"));
+const palette_fn = view(palette_input);
-const randomise_all = view(Inputs.button("Random all"));
 
+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"}));
+
+
+
+
+```
+
+```js
+// in its own code block so that it doesn't slow down load for the rest
+// of the page
+await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'));
+
+const wasm_init = "ready";
 ```
 
 
@@ -57,28 +78,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();
+const rpalette = random.choice(Array.from(PALETTES.keys()));
-bg_input.dispatchEvent(new Event("input"));
+palette_input.value = PALETTES.get(rpalette);
-ctrl1.random_colours();
+palette_input.dispatchEvent(new Event("input"));
-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>
@@ -133,10 +162,32 @@ dots_g2.selectAll("circle")
 
 display(svg.node());
 
-
 ```
 
-</div>
+```js
+
+display(download(() => {
+  const thing = download_as_svg(svg.node())
+  return thing;
+}, "poptimal.svg", "Save as SVG"));
+```
+
+```js
+
+await wasm_init;
+
+display(download(() => {
+  console.log("PNG value");
+  const thing = download_as_png(svg.node())
+  return thing;
+}, "poptimal.png", "Save as PNG"));
+
+
+```
+(PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)
+
+
+
 </div>
 
 <style>