Yesterday, one year ago... (Still wondering how many people actually have read or tried out any of these)

https://mastodon.thi.ng/@toxi/111348591236791838

@khinsen @toxi See "Output of Function toDot" #FederatedWiki #HowToThing

New #ThingUmbrella releases & example: This week's releases included updates to https://thi.ng/system, a minimal and declarative way to compose an app from multiple components, build their dependency graph and manage their lifecycle (async start/stop) in the correct (topological) order. The computed graph (DAG) can then also be serialized to GraphViz format for visualization/debugging/documentation purposes with a single line of code (see readme)...

Even though I've been using this system in dozens of projects, it occurred to me there wasn't any example project yet demonstrating this approach, so I finally fixed that:

https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus

The demo is purposefully minimal and the source code is (hopefully) much more interesting than the result. In addition to showing how the app components are defined, this example also shows another powerful pattern I've been using in my own tools:

Using https://thi.ng/atom as central app state and https://thi.ng/rstream pubsub as central event bus, to both of which various system components can attach topic based subscriptions (aka event and/or change handlers). Since each of these reactive subscriptions are normal rstream subs, they can all be forming graphs of child subs and be filtered/transformed and synchronized via hundreds of composable operators in the https://thi.ng/rstream and https://thi.ng/transducers packages — and — these rstream values can also be directly embedded in https://thi.ng/rdom created reactive UI components/elements/attributes. Some of these techniques are shown in this new example as well... Hope it's helpful to some of you!

Been debugging boids & behavior combinations all evening! Happy to say, I think all force contributions are fixed now (classic off-by-one error was leading to an initially subtle but increasingly obvious directional bias), and I can focus again on experimenting with some new amazing emergent behaviors... Aside from that, maybe this also qualifies for #Genuary2024 (Day 1: Particles)?!

Btw. This is just a variation of this #ThingUmbrella example project:

https://demo.thi.ng/umbrella/boid-basics/

...which was created as part of last year's #HowToThing series:

https://mastodon.thi.ng/@toxi/111308439597090930

One of the best SIMD intro articles I've ever come across thus far. Very nicely explains all the core concepts and operations, lots of sketches/diagrams... Noice!

https://mcyoung.xyz/2023/11/27/simd-base64/

Btw. If you're using TypeScript/JavaScript, you can play with some of these concepts/ops directly from the REPL using https://thi.ng/simd. This package uses WASM behind the scenes, but doesn't expose the full set of available SIMD instructions (it's a lil' bit more highlevel...)

Also see recent #HowToThing post and practical example about it here:
https://mastodon.thi.ng/@toxi/111283262419126958

Almost a week ago I said I'm pausing #HowToThing for a while, but that doesn't preclude adding new examples regardless, e.g. this new one illustrating matrix-based image color adjustments (basic color grading) using floating point pixel buffers via https://thi.ng/pixel and color matrix building blocks (incl. concatenation to produce a single color transform matrix for an arbitrary number of adjustments) via https://thi.ng/color...

Due to lack of time and to keep it simple, there's no image chooser for now (though might still add one...)

Demo (example #146):
https://demo.thi.ng/umbrella/pixel-colormatrix/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/pixel-colormatrix/src/index.ts

Just updated the procedural text generator tool (from the most recent #HowToThing example[1]) to allow storing/loading source template text via the URL hash fragment. That means one can now share small procedural stories/texts like this (hoping Mastodon allows longish URLs):

https://demo.thi.ng/umbrella/procedural-text/#W3NpemVdCmh1bW9uZ291cwpqdXJhc3NpYwpnaW5vcm1vdXMKZ2lnYW50aWMKaHVnZQp1bmZhdGhvbWx5IGxhcmdlCgpbYWRqXQplcGljCmJyZWF0aHRha2luZwppbmNyZWRpYmxlCmludGVydHdpbmVkCgpbbm91bl0KY29sbGVjdGlvbgplY29zeXN0ZW0KY29tcGVuZGl1bQphZ2dyZWdhdGlvbgoKW25vdmljZV0KdG90YWwgYmVnaW5uZXJzCmFic29sdXRlIG5vdmljZXMKCnRoaS5uZyBpcyBhIDxhZGo+IDxub3VuPiBvZiBhcm91bmQgMTg1IGNvZGUgbGlicmFyaWVzIGFuZCB0b29scywgcmVhbGx5IGEgPHNpemU+LCA8YWRqPiA8bm91bj4uIEV2ZW4gdGhvdWdoIGl0J3Mgbm90IGFpbWVkIGF0IDxub3ZpY2U+LCB0aGUgbGFyZ2VyIHByb2plY3QgaXMgYWxzbyBob3BpbmcgdG8gaW50cm9kdWNlIHBlb3BsZSB0byBzb21lIGV4cHJlc3NpdmUgYW5kIG1heWJlIG1vcmUgdW51c3VhbCAoaXQncyBhbGwgcmVsYXRpdmUhKSBwcm9ncmFtbWluZyBjb25jZXB0cyAmIHRlY2huaXF1ZXMuIEl0IGFsc28gaW5jbHVkZXMgYSA8c2l6ZT4gYW1vdW50IG9mIGNvbW1lbnRlZCBleGFtcGxlcyBhbmQgbGlua3MgdG8gZnVydGhlciByZWFkaW5nLiBTb29uIHRoaXMgd2lsbCBiZSBzdXBwbGVtZW50ZWQgYnkgc3Vic2NyaXB0aW9uLWJhc2VkIGxlYXJuaW5nIG1hdGVyaWFscyAmIG9ubGluZSBjb3Vyc2VzLg==

[1] For context/reference: https://mastodon.thi.ng/@toxi/111347074558293056

#HowToThing #030 — Procedural, rule-based & stochastic text generation using a custom DSL, parse grammar (via https://thi.ng/parse) and abstract syntax tree transformation (via https://thi.ng/defmulti).

Since it's #NaNoWriMo & #NaNoGenMo [1], I'm closing out this first season of 30 #HowToThing's with a related topic & maybe someone even finds it useful/interesting...

This example is in principle inspired by @galaxykate's oldie & goodie #Tracery, but is using a super simple custom text format instead of JSON to define variables and template text. Variables are expanded recursively and I've also added features like dynamic, indirect pointer-like variable lookups to derive variables based on current values (useful for conditionals & context-specific expansions), hidden assignments, chainable modifiers... I've included 5 different "story" templates (incl. comments) showing various features. Just press "regenerate" to create new random variations...

Similar to the previous #HowToThing, I'm hoping this example also shows that approaching use cases like this via small domain-specific languages with proper grammar rules, does not require much ceremony and is often more amenable to change during prototyping (and later also more maintainable!) than just regex bashing approaches...

The parser grammar itself is explained in the https://thi.ng/parse readme. As usual, the grammar was created/prototyped with the Parser Playground[2], which we developed from scratch during the first thi.ng livestream[3] (2.5h video)...

Demo (example project #145):
https://demo.thi.ng/umbrella/procedural-text/

Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text/src

If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):

https://github.com/thi-ng/umbrella/discussions

[1] https://github.com/NaNoGenMo/2023/
[2] https://demo.thi.ng/umbrella/parse-playground/
[3] https://www.youtube.com/watch?v=mXp92s_VP40

#HowToThing #029 — One for the #Forth friends: Minimal livecoding playground for animated 2D geometry generation (incl. SVG export) using a Forth-like DSL (domain-specific language) based on https://thi.ng/pointfree, https://thi.ng/pointfree-lang and various geometry related operations using https://thi.ng/geom. A short screen recording is included to demonstrate overall usage. This is a cutdown version of a prototype tool, originally from 2019...

Even though the language is "Forthy", the underlying thi.ng/pointfree implementation does _not_ use a VM, but instead compiles words to vanilla JavaScript using normal functional composition (or reductions) and each word is passing data & state via a single shared stack context object (with the usual dual data & return stacks and an environment object with var bindings). The language supports quotations, local variables, combinators etc.

I _highly_ recommend consulting the detailed readme docs for the above packages to familiarize yourself with the basic principles & language features/syntax. If you do have some prior #Forth knowledge, many aspects should feel familiar (apart from the geometry DSL terms)...

Also worth pointing out that the editor/interpreter in this small example is not super forgiving re: error handling and might easily crash when live coding. The point of this demo is not about providing great UX, but to illustrate how the basic thi.ng/pointfree language infrastructure can be easily extended/adapted/integrated...

Demo:
https://demo.thi.ng/umbrella/pointfree-geom/

Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/pointfree-geom/src

(Note: The source code of the actual language bindings for the geometry operations is not shown here, but available in the `lang.ts` file, linked above...)

#HowToThing #028 — Randomized, space-filling, nested 2D grid layout generator using https://thi.ng/layout & https://thi.ng/transducers

Already gave a glimpse of this yesterday[1]. This example uses the new `StackedLayout` generator to create random multi-column base layouts and allocate cells of varying sizes (column/row spans). Depending on size, each cell also has a probability to produce nested child layouts in its place (up to 4 levels). The example also shows how the layout gen can be queried to determine & allocate any remaining empty space(s) at the bottom of each nesting level (since it's highly likely that there's such)... The result is a completely space-filling grid layout (which the new thi.ng website will likely be based on too, obviously with some of the more sane/usable/responsive configurations...)

Demo (reload for random config):
https://demo.thi.ng/umbrella/layout-gridgen/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/layout-gridgen/src/index.ts

If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):

https://github.com/thi-ng/umbrella/discussions

Ps. It's also #ReleaseMonday — check main https://thi.ng/umbrella readme for latest updates/changelogs...

[1] https://mastodon.thi.ng/@toxi/111317359454947648

As usual, deep in the blurry spectrum between outright and intended utility (aka layout algorithm), dataviz (tree depth) and art. I love them all, and as so often, the extrema are just a tiny param change away from each other! Pushing toward art territory often a great way to uncover issues and debug an algorithm. E.g. I had originally issues with propagating size changes of nested cells back up to their parent/ancestors (solved now)...

(Ps. also a teaser for next #HowToThing... probably out tomorrow)

#HowToThing #027 — Boid/flocking simulation with spatial indexing, configurable behaviors and neighborhood queries to visualize proximity.

Key packages:

- https://thi.ng/boids: n-dimensional boid simulation with highly configurable behaviors
- https://thi.ng/timestep: deterministic fixed timestep simulation updates with state interpolation
- https://thi.ng/geom-accel: 2D hash grid spatial indexing and neighborhood region queries

The new https://thi.ng/boids package is still in alpha (still working on the API and how the package interfaces with others), but I've been using the underlying implementation for _maaany_ projects since ~2005... The agent/boid behaviors can be highly customized via the given parameters (which can also be dynamically adjusted). As usual with thi.ng packages, the visual representation of the boids is kept completely separate from the sim. The package really only deals with the latter and essentially only processes points in space (and directions, velocities)... However, it's also this separation, which makes it more useful for many different scenarios.

Demo:
https://demo.thi.ng/umbrella/boid-basics/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/boid-basics/src/index.ts

If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):

https://github.com/thi-ng/umbrella/discussions

Ps. It's also #ReleaseFriday — check main https://thi.ng/umbrella readme for latest updates/changelogs...

#HowToThing #026 — Shader meta-programming techniques (functional composition, higher-order functions, compile-time evaluation, dynamic code generation etc.) to generate animated plots/graphs of 16 functions (incl. dynamic grid layout generation) within a single WebGL fragment shader.

Today's key packages:

- https://thi.ng/shader-ast: DSL to write (fully type-checked) shaders directly in TypeScript and later compile them to GLSL, JS (and other target languages, i.e. there's partial support for Houdini VEX and [very] early stage WGSL...)
- https://thi.ng/shader-ast-stdlib: Collection of ~220 re-usable shader functions & configurable building blocks (incl. SDFs primitives/ops, raymarching, lighting, matrix ops, etc.)
- https://thi.ng/webgl-shadertoy: Minimal scaffolding for experimenting with fragment shaders (supports both normal GLSL or shader-ast flavors/compilation)

If you're new to the Shader-AST approach (highly likely!), this example will again introduce a lot of new concepts, hopefully in digestible manner! Please also always consult the package readmes (and other linked examples) for more background info... There're numerous benefits to this approach (incl. targetting different target langs and compositional & optimization aspects which are impossible to achieve (at least not elegantly) via just string concatenation/interpolation of shader code, as is much more commonplace...)

This example comes fresh off the back of yesterday's new easing function additions (by @Yura), though we're only showing a subset here...

Demo:
https://demo.thi.ng/umbrella/shader-ast-easings/
(Check the console to view the generated GLSL shader)

Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-easings/src/index.ts

If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):

github.com/thi-ng/umbrella/discussions

#HowToThing #025 — Sampling, fitting, transforming & plotting 10k data points per frame using a whole bunch of underexposed thi.ng packages:

- https://thi.ng/colored-noise: using violet noise as fake data source
- https://thi.ng/matrices: fitting/transformation matrix creation
- https://thi.ng/simd: WASM-based batch processing
- https://thi.ng/malloc: Memory management for WASM/SIMD data buffers
- https://thi.ng/hiccup-canvas: 2D canvas visualization

As noted in the comments, the SIMD batch processing here is to illustrate the overall usage and handling. In this specific example, the main bottleneck is the actual canvas drawing step (esp. in Firefox, which in this case is ~3.75x slower than Chrome [latter easily manages 60fps]). The SIMD step could handle magnitude(s) more points per frame, also on FF...

As an aside, this is now already the 140th (!!!) fully documented small example project, bundled as part of the https://thi.ng/umbrella monorepo... Please do tell me at which point the prejudice of not having enough starting points & info about these packages will be fading into oblivion...

Demo:
https://demo.thi.ng/umbrella/simd-plot/

Source:
https://github.com/thi-ng/umbrella/tree/develop/examples/simd-plot/src/index.ts

Also big thanks to Maximillian Schulte for sending me off on this topic (as a tangent) via an issue on GitHub... I've been meaning to create more examples for these above packages for a while! Last but not least, hat tip & nerd sniping @demofox re: colored noise...