refactor(examples): restructure/refactor/simplify canvas-recorder exa…

…mple

- re-order functions & initialization process
- consolidate global vars into State (now defined inside `init()`)
- update grid to store pre-defined text elements (avoiding multiple
  arrays and re-allocations each frame)
- use vector algebra for computing various state values
- add global `RND` to allow switching to deterministic behavior
- use thi.ng/adapt-dpi to simplify HDPI canvas resizing
- update naming & exports convention for constants
- simplify sentences/symbols defs/handling (avoiding slicing)
- extrace start/stop recording functions
- update UI button logic, update init() to stop any active recording
- add more doc strings / comments
- update pkg deps & meta
- move screenshot to /assets/examples

examples/canvas-recorder/README.md

@@ -8,7 +8,8 @@ Please refer to the [example build instructions](https://github.com/thi-ng/umbre
 
 ## Authors
 
-- Karsten Schmidt
+- Nicolas Lebrun
+- Karsten Schmidt (refactoring only)
 
 ## License
 

examples/canvas-recorder/package.json

@@ -2,7 +2,7 @@
 	"name": "@example/canvas-recorder",
 	"version": "0.0.1",
 	"private": true,
-	"description": "A grid made of type (similar to pixel grid), each loop new char are added from top, left, bottom and right.",
+	"description": "Self-modifying, animated typographic grid with emergent complex patterns",
 	"repository": "https://github.com/thi-ng/umbrella",
 	"author": "Nicolas Lebrun <[email protected]>",
 	"license": "Apache-2.0",
@@ -16,23 +16,22 @@
 		"vite": "^4.4.9"
 	},
 	"dependencies": {
-		"@thi.ng/api": "workspace:^",
+		"@thi.ng/adapt-dpi": "workspace:^",
 		"@thi.ng/dl-asset": "workspace:^",
 		"@thi.ng/geom": "workspace:^",
 		"@thi.ng/hiccup-canvas": "workspace:^",
 		"@thi.ng/hiccup-html": "workspace:^",
 		"@thi.ng/random": "workspace:^",
 		"@thi.ng/rdom": "workspace:^",
-		"@thi.ng/rdom-canvas": "workspace:^"
+		"@thi.ng/rstream": "workspace:^",
+		"@thi.ng/transducers": "workspace:^",
+		"@thi.ng/vectors": "workspace:^"
 	},
 	"browser": {
 		"process": false
 	},
 	"thi.ng": {
-		"skip": true,
-		"readme": [
-			"hiccup-canvas"
-		],
-		"screenshot": "hiccup-canvas/canvas-recorder.png"
+		"readme": true,
+		"screenshot": "examples/canvas-recorder.png"
 	}
 }

examples/canvas-recorder/src/api.ts

@@ -1,20 +1,96 @@
-// Each random element (chosen when the program is launched) 
-// is saved here, so that all these choices can be displayed
-// when debugging the program or saving it 
-// (but this is not the case here).
+import type { Text } from "@thi.ng/geom";
+import type { ReadonlyVec } from "@thi.ng/vectors";
+
+/**
+ * Essential state/configuration required for updating, drawing & recording the
+ * grid of characters
+ */
 export interface State {
-    cellSize: number
-    cols: number
-    rows: number
-    margin: number[]
+	/**
+	 * Canvas drawing context
+	 */
+	ctx: CanvasRenderingContext2D;
+	/**
+	 * Canvas video recorder (only defined whilst recording is active)
+	 */
+	recorder?: MediaRecorder;
+	/**
+	 * Array of text elements/characters
+	 */
+	grid: Text[];
+	/**
+	 * Object describing the current grid modification behavior. Will be
+	 * updated/modified each frame.
+	 */
+	alterDef: AlterDefinition;
+	/**
+	 * Randomly selected sentence (see {@link SENTENCES})
+	 */
+	sentence: string;
+	/**
+	 * Randomly selected fill symbols (see {@link SYMBOLS})
+	 */
+	symbols: string;
+	/**
+	 * Randomly selected color palette (see {@link PALETTES})
+	 */
+	palette: string[];
+	/**
+	 * Size of a single grid cell
+	 */
+	cellSize: number;
+	/**
+	 * Number of grid columns
+	 */
+	cols: number;
+	/**
+	 * Number of grid rows
+	 */
+	rows: number;
+	/**
+	 * Pixel dimensions of usable canvas area
+	 */
+	bounds: ReadonlyVec;
+	/**
+	 * Offset position of 1st grid cell
+	 */
+	offset: ReadonlyVec;
+	/**
+	 * frame counter, used to trigger various animation changes
+	 */
+	frame: number;
+	/**
+	 * requestAnimationFrame ID
+	 */
+	timer: number;
 }
 
-// An object that defines the changes made in each loop
+/**
+ * Object that defines the changes made in each loop
+ */
 export interface AlterDefinition {
-    dir: boolean // go forward or backward
-    sel: 'x' | 'y' // axis of the alteration
-    x: number // how many time box to fill on x (-1 none) 
-    y: number // same for y
-    char: string // the item to push on the grid
-    color: string // the color applyed to the char
-}
+	/**
+	 * Flag to control forward/backward direction
+	 */
+	dir: boolean;
+	/**
+	 * Axis of the alteration
+	 */
+	sel: "x" | "y";
+	/**
+	 * Number of times box to fill on X (-1 none)
+	 */
+	x: number;
+	/**
+	 * Number of times box to fill on Y (-1 none)
+	 */
+	y: number;
+	/**
+	 * The character to push onto the grid
+	 */
+	char: string;
+	/**
+	 * Charactor color for new char being pushed onto the grid
+	 */
+	color: string;
+}