Packaging, distribution, portability

.gitignore

@@ -0,0 +1,15 @@
+.idea/
+.vscode/
+node_modules/
+build/
+.DS_Store
+*.tgz
+my-app*
+template/src/__tests__/__snapshots__/
+lerna-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.changelog
+.npm/
+/dist

README.md

@@ -180,3 +180,19 @@ The glyphs used in the "Palimpsest" and "Twilight" versions are derived from [Te
 The glyphs are formatted as a multi-channel distance field (or MSDF) via Victor Chlumsky's [msdfgen](https://github.com/Chlumsky/msdfgen). This format preserves the crisp edges and corners of vector graphics when rendered as textures. Chlumsky's thesis paper, which is in English and is also easy to read, is [available to download here](https://dspace.cvut.cz/handle/10467/62770).
 
 The raindrops themselves are particles [computed on the GPU and stored in textures](https://threejs.org/examples/webgl_gpgpu_water.html), much smaller than the final render. The data sent from the CPU to the GPU every frame is negligible.
+
+
+## react-matrix-rain
+This is an effort to produce an npm package that bundles this repo's effects as a single react component for use in SPA applications.  Work on the legacy code will update the component. Steps to build the component are as follows.
+
+### Offline testing
+```
+npm pack --dry-run # assess that the package is viable.
+
+npm pack # creates the tarball
+
+npm install react-matrix-rain-<version>.tgz
+```
+
+### Publishing
+... TBD

TODO.txt

@@ -1,79 +1,100 @@
 TODO:
+	Rethink bundling
+		Core
+			Includes core assets
+			Does not require React
+		Extras
+			Includes other fonts, presets
+			Does not require React
+		React
+			Includes react component
+			Requires React
+	Minimum react requirement?
+	Minify bundles
+	Naming "matrix" for the github repo, "digital-rain" and "DigitalRain" for everything else
+	Preserve time across configure calls, move times into renderer and uniforms
+	Move off of regl
+		Unify implementations?
+	Reshape all passes to react to config changes, ie. "configure"
+		simple deltas only require updating the uniforms
+		return boolean of whether all deltas are simple
+			Resource changes are simple if they're cached and loaded, false otherwise
+		remake the pipeline if anything returns false
+	Expanded configurability
+		Modify regl pass
+			async build(config, inputs)
+				loads all required stuff
+			async resize - adjusts the sizes
+			run — performs the GPU operation
+		Rewrite main code to accept changes to config
 
-Live config update roadmap
-  Modify regl pass
-    async build(config, inputs)
-      loads all required stuff
-    async resize - adjusts the sizes
-    run — performs the GPU operation
-  Rewrite main code to accept changes to config
-  Build a Tweakpane for config
-    https://cocopon.github.io/tweakpane
-    Show a gear emoji in the top right on mouse move
-      Hide after three seconds
-      If tapped, show the tweakpane
+Build a Tweakpane for config
+	https://cocopon.github.io/tweakpane
+	Show a gear emoji in the top right on mouse move
+		Hide after three seconds
+		If tapped, show the tweakpane
 
 Seems like bloom size and resolution impact the REGL and WebGPU bloom implementations differently
-  Move high pass into WebGPU bloom
+	Move high pass into WebGPU bloom
 
 Dithering bug on mobile?
-  Looks like a subtle fade occurring at a per-second interval
+	Looks like a subtle fade occurring at a per-second interval
 
 Write an explanation of the rain pass (and include images)
-  Compute
-  Volumetric quads
-  Fullscreen quad and spacial mapping
-  MSDFs
+	Compute
+	Volumetric quads
+	Fullscreen quad and spacial mapping
+	MSDFs
 
 Audio system
-  Toggle (or number representing frequency)
-  Load the sound effect
-  Play it multiple times with delay
-    Random pan
-    Random volume?
-    Randomize pitch a little?
+	Toggle (or number representing frequency)
+	Load the sound effect
+	Play it multiple times with delay
+		Random pan
+		Random volume?
+		Randomize pitch a little?
 
 Playdate version
-  Audio system
-    Falling sound
-    Launch sound
-    Undocking sound
-    Docking sound
-    Maybe crank sounds? Not sure yet
+	Audio system
+		Falling sound
+		Launch sound
+		Undocking sound
+		Docking sound
+		Maybe crank sounds? Not sure yet
 
 Support Resurrections SDF bevel and "lights"
-  https://shaderfun.com/2018/07/23/signed-distance-fields-part-8-gradients-bevels-and-noise/
-  Get the "normals" and color right
-    Note: even completely dark glyphs can have glint on their edges
-    "Golden hour"
-  Stuff MSDF-derived normal vectors from rain pass frag into two of its output channels
-  Anomaly mode toggles between this and anomaly streaks
+	https://shaderfun.com/2018/07/23/signed-distance-fields-part-8-gradients-bevels-and-noise/
+	Get the "normals" and color right
+		Note: even completely dark glyphs can have glint on their edges
+		"Golden hour"
+	Stuff MSDF-derived normal vectors from rain pass frag into two of its output channels
+	Anomaly mode toggles between this and anomaly streaks
 
 WebGPU
-  Try https://github.com/brendan-duncan/wgsl_reflect
-  Get rid of end pass once it's possible to copy a bgra8unorm to a canvas texture
-  Switch to rgba32float somehow?
-    Why isn't this straightforward?
-  Try shorthand
-  Share a bind group and layout just for time?
-  Try using a buffer for the stripe pass 1D texture
+	Try https://github.com/brendan-duncan/wgsl_reflect
+	Get rid of end pass once it's possible to copy a bgra8unorm to a canvas texture
+	Switch to rgba32float somehow?
+		Why isn't this straightforward?
+	Try shorthand
+	Share a bind group and layout just for time?
+	Try using a buffer for the stripe pass 1D texture
 
 Improve loop support
 
 Idea: Build a UI
-  Replace versions with presets
-  Simple changes update the values
-  Complex changes replace the pipeline
-  Make it a form, so it's accessible
-  Then, make it look cool like the UI from the old site
+	Replace versions with presets
+	Simple changes update the values
+	Complex changes replace the pipeline
+	Make it a form, so it's accessible
+	Then, make it look cool like the UI from the old site
 
 Maybe pay someone to make Mac/Windows screensavers
 
 Zion Control's matrix variant
-  From Reloaded
+	From Reloaded
 
 gpu-buffer, working title
-  Support type aliasing (type Q = array<i32, 5>)
-  Support shorthand (vec4f)
-  Build mocha tests, example project
-  Give it its own repo, microsite
+	Support type aliasing (type Q = array<i32, 5>)
+	Support shorthand (vec4f)
+	Build mocha tests, example project
+	Give it its own repo, microsite

eslint.config.js

@@ -0,0 +1,31 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default [
+	{ ignores: ["dist", "lib"] },
+	{
+		files: ["**/*.{js,jsx,mjs}"],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+			parserOptions: {
+				ecmaVersion: "latest",
+				ecmaFeatures: { jsx: true },
+				sourceType: "module",
+			},
+		},
+		plugins: {
+			"react-hooks": reactHooks,
+			"react-refresh": reactRefresh,
+		},
+		rules: {
+			...js.configs.recommended.rules,
+			...reactHooks.configs.recommended.rules,
+			"no-unused-vars": "off",
+			"no-unused-labels": "off",
+			"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+		},
+	},
+];

index.html

@@ -5,19 +5,27 @@
 		<meta charset="utf-8" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
+		<meta
+			name="viewport"
+			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"
+		/>
 		<style>
+			html,
+			body {
+				height: 100%;
+				overflow: hidden;
+				margin: 0;
+			}
+
 			@supports (padding-top: env(safe-area-inset-top)) {
 				body {
 					padding: 0;
 					height: calc(100% + env(safe-area-inset-top));
 				}
 			}
+
 			body {
 				background: black;
-				overflow: hidden;
-				margin: 0;
-
 				font-family: monospace;
 				font-size: 2em;
 				text-align: center;