From 357a7f0e55e9f791c76ec652b0c14a693bf48301 Mon Sep 17 00:00:00 2001
From: Nick Baker <ndbaker1@outlook.com>
Date: Sat, 5 Aug 2023 14:24:13 -0700
Subject: [PATCH] convert moves to Js `Array` + UI

---
 Cargo.lock                  |   1 +
 string-bean-wasm/Cargo.toml |   1 +
 string-bean-wasm/src/lib.rs |  56 ++++--
 web/src/lib/utils.js        |  56 ++++++
 web/src/routes/+page.svelte | 340 +++++++++++++++++++-----------------
 5 files changed, 282 insertions(+), 172 deletions(-)
 create mode 100644 web/src/lib/utils.js

diff --git a/Cargo.lock b/Cargo.lock
index 07d9152..d4a1944 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -648,6 +648,7 @@ dependencies = [
 name = "string-bean-wasm"
 version = "0.1.0"
 dependencies = [
+ "js-sys",
  "string-bean",
  "wasm-bindgen",
 ]
diff --git a/string-bean-wasm/Cargo.toml b/string-bean-wasm/Cargo.toml
index d634eff..2001485 100644
--- a/string-bean-wasm/Cargo.toml
+++ b/string-bean-wasm/Cargo.toml
@@ -9,5 +9,6 @@ crate-type = ["cdylib"]
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
+js-sys = "0.3.64"
 string-bean = { path = "../string-bean" }
 wasm-bindgen = "0.2.87"
diff --git a/string-bean-wasm/src/lib.rs b/string-bean-wasm/src/lib.rs
index 8f6b865..6db36ce 100644
--- a/string-bean-wasm/src/lib.rs
+++ b/string-bean-wasm/src/lib.rs
@@ -1,7 +1,9 @@
 use wasm_bindgen::{prelude::wasm_bindgen, JsValue};
 
+type ReturnArray = js_sys::Array;
+
 #[wasm_bindgen]
-pub fn plan_as_json(
+pub fn json_plan_circle(
     line_count: u32,
     line_opacity: f32,
     anchor_count: u32,
@@ -12,7 +14,7 @@ pub fn plan_as_json(
     height: usize,
     image_buffer: &[u8],
     start_anchor: usize,
-) -> JsValue {
+) -> ReturnArray {
     let (x_mid, y_mid) = (width / 2, height / 2);
     let radius = radius.min(x_mid.min(y_mid)) as f64;
 
@@ -37,18 +39,48 @@ pub fn plan_as_json(
         image_buffer,
     );
 
-    let moves = planner
+    planner
         .get_moves(start_anchor, line_count as _)
-        .unwrap_or(Vec::new());
+        .unwrap_or(Vec::new())
+        .into_iter()
+        .map(JsValue::from)
+        .collect()
+}
+
+#[wasm_bindgen]
+pub fn json_plan(
+    line_count: u32,
+    line_opacity: f32,
+    anchor_list: &[f64],
+    anchor_gap_count: usize,
+    penalty: f32,
+    width: usize,
+    height: usize,
+    image_buffer: &[u8],
+    start_anchor: usize,
+) -> ReturnArray {
+    let anchors = anchor_list
+        .chunks_exact(2)
+        .map(|chunk| (chunk[0], chunk[1]))
+        .collect::<Vec<_>>();
 
-    JsValue::from_str(&format!(
-        "[{}]",
-        moves
-            .iter()
-            .map(usize::to_string)
-            .collect::<Vec<_>>()
-            .join(","),
-    ))
+    let mut planner = string_bean::ThreadPlanner::new(
+        line_opacity as _,
+        &anchors,
+        anchor_gap_count,
+        penalty as _,
+        grid_raytrace,
+        width,
+        height,
+        image_buffer,
+    );
+
+    planner
+        .get_moves(start_anchor, line_count as _)
+        .unwrap_or(Vec::new())
+        .into_iter()
+        .map(JsValue::from)
+        .collect()
 }
 
 /// https://playtechs.blogspot.com/2007/03/raytracing-on-grid.html
diff --git a/web/src/lib/utils.js b/web/src/lib/utils.js
new file mode 100644
index 0000000..093e1f4
--- /dev/null
+++ b/web/src/lib/utils.js
@@ -0,0 +1,56 @@
+/**
+ * Compute anchors for a circle
+ * @param {number} anchor_count 
+ * @param {number} width 
+ * @param {number} height 
+ * @param {number} radius 
+ * @returns {[number, number][]}
+ */
+export function circle_anchors(anchor_count, width, height, radius) {
+    const x_mid = width / 2;
+    const y_mid = height / 2;
+
+    return Array.from({ length: anchor_count })
+        .map((_, anchor) => (anchor * 2 * Math.PI) / anchor_count)
+        .map((angle) => [
+            x_mid + radius * Math.cos(angle),
+            y_mid + radius * Math.sin(angle),
+        ]);
+}
+
+/**
+ * Compute anchors for a rectangle. Starts in the top left.
+ * @param {number} anchor_count 
+ * @param {number} width 
+ * @param {number} height 
+ * @returns {[number, number][]}
+ */
+export function rectangle_anchors(anchor_count, width, height) {
+    /** @type {[number, number][]} */
+    const anchors = [[0, 0]];
+
+    const totalLength = width * 2 + height * 2;
+    const gapLength = totalLength / anchor_count;
+
+    let currentLength = 0;
+
+    for (let i = 1; i < anchor_count; i++) {
+        currentLength += gapLength;
+
+        if (currentLength < width) {
+            // walk top left to right
+            anchors.push([currentLength, 0]);
+        } else if (currentLength < width + height) {
+            // walk right top to bottom
+            anchors.push([width, currentLength - (width)]);
+        } else if (currentLength < width * 2 + height) {
+            // walk bottom right to left
+            anchors.push([2 * width - (currentLength - height), height]);
+        } else {
+            // walk left bottom to top
+            anchors.push([0, height + 2 * width - (currentLength - height)]);
+        }
+    }
+
+    return anchors;
+}
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 6a29b52..d3963b2 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,29 +1,55 @@
 <script>
-	import init, { plan_as_json } from 'string-bean';
 	import { onMount } from 'svelte';
 
+	import init, { json_plan } from 'string-bean';
+
+	import { circle_anchors } from '$lib/utils';
+	import { rectangle_anchors } from '../lib/utils';
+
 	/** @type HTMLCanvasElement */
 	// @ts-ignore
 	let imagePreview;
 	/** @type HTMLCanvasElement */
 	// @ts-ignore
+	let imageMonochrome;
+	/** @type HTMLCanvasElement */
+	// @ts-ignore
 	let imageDraw;
 	/** @type HTMLImageElement */
 	// @ts-ignore
 	let imageSource;
-	let maxRadius = 2000;
 
 	/**
 	 * Settings
 	 */
-	let num_chords = 500;
+	let line_count = 500;
 	let line_opacity = 0.2;
 	let num_anchors = 188;
 	let num_anchor_gap = 0;
-	let radius = 0;
 	let penalty = 100;
 	let start_anchor = 0;
 
+	$: num_anchor_gap = Math.min(num_anchor_gap, num_anchors / 2 - 1);
+
+	const SHAPES = {
+		CIRCLE: 'Circle',
+		RECTANGLE: 'Rectangle'
+	};
+	let shape = SHAPES.CIRCLE;
+
+	/**
+	 * @param {number} width
+	 * @param {number} height
+	 */
+	function getAnchors(width, height) {
+		switch (shape) {
+			case SHAPES.CIRCLE:
+				return circle_anchors(num_anchors, width, height, Math.min(width, height) / 2);
+			case SHAPES.RECTANGLE:
+				return rectangle_anchors(num_anchors, width, height);
+		}
+	}
+
 	/**
 	 * @param fileData {Blob}
 	 */
@@ -36,7 +62,6 @@
 
 		await new Promise((resolve, _) => {
 			imageSource.onload = () => {
-				radius = maxRadius = Math.min(imageSource.height, imageSource.width);
 				// block until finished
 				resolve(null);
 			};
@@ -45,64 +70,65 @@
 	}
 
 	function draw() {
-		const size = Math.min(window.innerWidth - 100, window.innerHeight / 2 - 50);
+		const maxSize = Math.max(
+			250,
+			(windowRatio > 1 ? window.innerHeight / 3 : window.innerWidth / 3) - 100
+		);
+
+		const imageRatio = imageSource.height / imageSource.width;
+
+		const width = imageRatio > 1 ? maxSize * imageRatio : maxSize;
+		const height = imageRatio > 1 ? maxSize : maxSize * imageRatio;
+
+		imagePreview.width = imageMonochrome.width = imageDraw.width = width;
+		imagePreview.height = imageMonochrome.height = imageDraw.height = height;
 
-		imagePreview.width = size;
-		imagePreview.height = size;
 		/** @type CanvasRenderingContext2D  */
 		// @ts-ignore
 		const imagePreviewCtx = imagePreview.getContext('2d');
-		imagePreviewCtx.clearRect(0, 0, imagePreview.width, imagePreview.height);
-		imagePreviewCtx.drawImage(imageSource, 0, 0, imagePreview.width, imagePreview.height);
-		const imageBufferTemp = new Uint8Array(
-			imagePreviewCtx.getImageData(0, 0, imagePreview.width, imagePreview.height).data.buffer
-		);
+		imagePreviewCtx.clearRect(0, 0, width, height);
+		imagePreviewCtx.drawImage(imageSource, 0, 0, width, height);
 
-		// pick the bytes affecting the brightness
-		const imageBuffer = Uint8Array.from(
-			Array.from({ length: size * size }, (_, i) => imageBufferTemp[i * 4])
-		);
+		// update imagedata buffer to make image monochrome
+		const imageData = imagePreviewCtx.getImageData(0, 0, width, height);
+		for (let i = 0; i < imageData.data.length; i += 4) {
+			const sum = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
+			imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = sum;
+			imageData.data[i + 3] = 255;
+		}
 
-		const moves = JSON.parse(
-			plan_as_json(
-				num_chords,
-				line_opacity,
-				num_anchors,
-				num_anchor_gap,
-				radius,
-				penalty,
-				size,
-				size,
-				imageBuffer,
-				start_anchor
-			)
-		);
+		/** @type CanvasRenderingContext2D  */
+		// @ts-ignore
+		const imageMonochromeCtx = imageMonochrome.getContext('2d');
+		imageMonochromeCtx.clearRect(0, 0, width, height);
+		imageMonochromeCtx.putImageData(imageData, 0, 0);
 
-		console.log(moves);
+		const monochromeImageBuffer = new Uint8Array(imageData.data.filter((_, i) => i % 4 == 0));
 
-		const x_mid = size / 2;
-		const y_mid = size / 2;
+		const anchorCoords = getAnchors(width, height);
 
-		const draw_radius = Math.min(x_mid, y_mid);
-		const degrees_per_anchor = (2 * Math.PI) / num_anchors;
+		const moves = json_plan(
+			line_count,
+			line_opacity,
+			new Float64Array(anchorCoords.flat()),
+			num_anchor_gap,
+			penalty,
+			width,
+			height,
+			monochromeImageBuffer,
+			start_anchor
+		);
 
-		imageDraw.width = size;
-		imageDraw.height = size;
 		/** @type CanvasRenderingContext2D  */
 		// @ts-ignore
 		const imageDrawCtx = imageDraw.getContext('2d');
 		imageDrawCtx.strokeStyle = `rgba(0,0,0,${line_opacity})`;
 
-		imageDrawCtx.clearRect(0, 0, imageDraw.width, imageDraw.height);
+		imageDrawCtx.clearRect(0, 0, width, height);
 		imageDrawCtx.beginPath();
-		for (let i = 0; i < moves.length; i++) {
-			const [anchor1, anchor2] = [moves[i - 1], moves[i]];
-			const deg1 = degrees_per_anchor * anchor1;
-			const deg2 = degrees_per_anchor * anchor2;
-			const x0 = x_mid + draw_radius * Math.cos(deg1);
-			const y0 = y_mid + draw_radius * Math.sin(deg1);
-			const x1 = x_mid + draw_radius * Math.cos(deg2);
-			const y1 = y_mid + draw_radius * Math.sin(deg2);
+		for (let i = 1; i < moves.length; i++) {
+			const [x0, y0] = anchorCoords[moves[i - 1]];
+			const [x1, y1] = anchorCoords[moves[i]];
 			imageDrawCtx.moveTo(x0, y0);
 			imageDrawCtx.lineTo(x1, y1);
 		}
@@ -112,21 +138,30 @@
 	const STATES = { UPLOAD: 0, CONFIGURE: 1 };
 	let state = STATES.UPLOAD;
 
-	onMount(async () => await init());
+	let windowRatio = 1;
+
+	onMount(async () => {
+		await init();
+		windowRatio = window.innerHeight / window.innerWidth;
+	});
 </script>
 
 <svelte:head>
 	<title>string-bean</title>
-	<meta name="description" content="Svelte demo app" />
+	<meta name="description" content="thread art generator demonstration" />
 </svelte:head>
 
 <!-- Canvas Elements -->
-<div class="max-w-fit h-5/6 m-auto {state == STATES.UPLOAD ? 'hidden' : ''}">
-	<div class="join join-vertical bg-blue-400">
+<div class="max-w-fit m-auto {state == STATES.UPLOAD ? 'hidden' : ''}">
+	<div class="join {windowRatio < 1 ? 'join' : 'join-vertical'} bg-white m-8">
 		<div class="join-item indicator">
 			<span class="indicator-item badge badge-primary">input</span>
 			<canvas bind:this={imagePreview} />
 		</div>
+		<div class="join-item indicator">
+			<span class="indicator-item badge badge-primary">monochrome</span>
+			<canvas bind:this={imageMonochrome} />
+		</div>
 		<div class="join-item indicator">
 			<span class="indicator-item badge badge-secondary">output</span>
 			<canvas bind:this={imageDraw} />
@@ -134,13 +169,14 @@
 	</div>
 </div>
 
+<!-- Image Source Element -->
 <!-- svelte-ignore a11y-img-redundant-alt -->
 <img bind:this={imageSource} class="hidden" alt="image-holder" />
 
 {#if state == STATES.UPLOAD}
 	<div class="w-screen h-screen flex p-4">
 		<label
-			class="m-auto p-10 flex transition border-2
+			class="m-auto px-10 py-4 flex transition border-2
 		border-gray-300 border-dashed rounded-lg
 		appearance-none cursor-pointer
 		hover:border-gray-400 focus:outline-none"
@@ -176,116 +212,100 @@
 		</label>
 	</div>
 {:else if state == STATES.CONFIGURE}
-	<div class="drawer z-50">
-		<input id="my-drawer" type="checkbox" class="drawer-toggle" />
-		<div class="drawer-content">
-			<div class="grid">
-				<label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
-			</div>
+	<div class="flex flex-col px-8 gap-10 items-center">
+		<div class="join">
+			<button class="btn btn-info join-item" on:click={() => (state = STATES.UPLOAD)}>
+				Upload Another
+			</button>
+			<button class="btn btn-primary join-item" on:click={() => draw()}> Redraw </button>
 		</div>
-		<div class="drawer-side">
-			<label for="my-drawer" class="drawer-overlay" />
-			<ul class="menu p-4 w-lg h-full bg-base-200 text-base-content">
-				<div class="max-w-2xl m-auto flex flex-col gap-2">
-					<div>
-						<div>
-							<div class="flex gap-5 items-center">
-								<h1 class="max-w-xl">Anchor Count</h1>
-								<input
-									type="range"
-									min="0"
-									max="500"
-									bind:value={num_anchors}
-									class="range range-primary"
-								/>
-								<input
-									type="number"
-									min="0"
-									max="500"
-									bind:value={num_anchors}
-									class="input input-primary"
-								/>
-							</div>
-
-							<div class="flex gap-5 items-center">
-								<h1 class="max-w-xl">Anchor Gap Count</h1>
-								<input
-									type="range"
-									min="0"
-									max={num_anchors / 2 - 1}
-									bind:value={num_anchor_gap}
-									class="range range-primary"
-								/>
-								<input
-									type="number"
-									min="0"
-									max={num_anchors / 2 - 1}
-									bind:value={num_anchor_gap}
-									class="input input-primary"
-								/>
-							</div>
-
-							<div class="flex gap-5 items-center">
-								<h1 class="max-w-xl">Image Radius</h1>
-								<input
-									type="range"
-									min="0"
-									max={maxRadius}
-									bind:value={radius}
-									class="range range-primary"
-								/>
-								<input
-									type="number"
-									min="0"
-									max={maxRadius}
-									bind:value={radius}
-									class="input input-primary"
-								/>
-							</div>
-
-							<div class="flex gap-5 items-center">
-								<h1 class="max-w-xl">Chord Count</h1>
-								<input
-									type="range"
-									min="0"
-									max="2000"
-									bind:value={num_chords}
-									class="range range-primary"
-								/>
-								<input
-									type="number"
-									min="0"
-									max="2000"
-									bind:value={num_chords}
-									class="input input-primary"
-								/>
-							</div>
-
-							<div class="flex gap-5 items-center">
-								<h1 class="max-w-xl">Line Opacity</h1>
-								<input
-									type="range"
-									min="0"
-									max="1"
-									step="0.01"
-									bind:value={line_opacity}
-									class="range range-primary"
-								/>
-								<input
-									type="number"
-									min="0"
-									max="1"
-									bind:value={line_opacity}
-									class="input input-primary"
-								/>
-							</div>
-							<div class="grid">
-								<button class="btn btn-primary" on:click={draw}>Primary</button>
-							</div>
-						</div>
-					</div>
+
+		<div>
+			<div class="grid max-w-3xl gap-5">
+				<div class="flex gap-5 items-center">
+					<kbd class="kbd">Anchor Count</kbd>
+					<input
+						type="range"
+						min="0"
+						max="500"
+						bind:value={num_anchors}
+						class="range range-primary"
+					/>
+					<input
+						type="number"
+						min="0"
+						max="500"
+						bind:value={num_anchors}
+						class="input input-primary w-48"
+					/>
+				</div>
+
+				<div class="flex gap-5 items-center">
+					<kbd class="kbd">Anchor Gaps</kbd>
+					<input
+						type="range"
+						min="0"
+						max={num_anchors / 2 - 1}
+						bind:value={num_anchor_gap}
+						class="range range-primary"
+					/>
+					<input
+						type="number"
+						min="0"
+						max={Math.round(num_anchors / 2) - 1}
+						bind:value={num_anchor_gap}
+						class="input input-primary w-48"
+					/>
+				</div>
+
+				<div class="flex gap-5 items-center">
+					<kbd class="kbd">Chord Count</kbd>
+					<input
+						type="range"
+						min="0"
+						max="2000"
+						bind:value={line_count}
+						class="range range-primary"
+					/>
+					<input
+						type="number"
+						min="0"
+						max="2000"
+						bind:value={line_count}
+						class="input input-primary w-48"
+					/>
 				</div>
-			</ul>
+
+				<div class="flex gap-5 items-center">
+					<kbd class="kbd">Line Opacity</kbd>
+					<input
+						type="range"
+						min="0"
+						max="1"
+						step="0.01"
+						bind:value={line_opacity}
+						class="range range-primary"
+					/>
+					<input
+						type="number"
+						min="0"
+						max="1"
+						bind:value={line_opacity}
+						class="input input-primary w-48"
+					/>
+				</div>
+
+				<div class="flex gap-5 items-center">
+					<kbd class="kbd">Shape</kbd>
+					<select bind:value={shape} class="select select-bordered w-full max-w-xs">
+						{#each Object.values(SHAPES) as s}
+							<option>{s}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
 		</div>
 	</div>
 {/if}
+
+<footer class="p-5" />