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:
Firstly, my deep, deep gratitude and thanks to everyone who's been supporting the project and my work over the past year(s), especially fellow fedi people: @avi, @jeffpalmer, @guidoschmidt, @made, @lurvey, @daeinc, @Yura, @n_senz_, @dawid and others (pls forgive non-exhaustive list!).
96 releases done in 2023 (i.e. every 3.6 days on average)
188 projects/packages (+12 this year)
151 example projects (+32 this year)
3,865 source files
144,432 lines of code
54,155 docs/comments (37% or 2.66 lines of code-to-comment ratio)
198,587 total SLOC
Readme files (for all 188 packages):
49,580 total words
189,978 lines
A lot of activity this year was spent on adding/improving documentation & creating new examples to illustrate general usage patterns. From August till October I published 30 chapters of #HowToThing aka heavily commented code examples & mini-tutorials, incl. ~20 new example projects which are now part of the monorepo. Just like the overall project scope, these chapters covered anything from audio synthesis, data transformations, DSLs, geometry, generative art/design, GIS, image processing, Mastodon client, reactive UIs (NOT using React!), shaders, other visualizations and more... Check out the hashtag to view them (full list is also part of the thi.ng/umbrella readme).
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! 👏
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...)
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...)
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):
#HowToThing#Epilogue#LongRead: After 66 days of addressing 30 wildly varied use cases and building ~20 new example projects of varying complexity to illustrate how #ThingUmbrella libraries can be used & combined, I'm taking a break to concentrate on other important thi.ngs...
With this overall selection I tried shining a light on common architectural patterns, but also some underexposed, yet interesting niche topics. Since there were many different techniques involved, it's natural not everything resonated with everyone. That's fine! Though, my hope always is that readers take an interest in a wide range of topics, and so many of these new examples were purposefully multi-faceted and hopefully provided insights for at least some parts, plus (in)directly communicated a core essence of the larger project:
Only individual packages (or small clusters) are designed & optimized for a set of particular use cases. At large, though, thi.ng explicitly does NOT offer any such guidance or even opinion. All I can offer are possibilities, nudges and cross-references, how these constructs & techniques can be (and have been) useful and/or the theory underpinning them. For some topics, thi.ng libs provide multiple approaches to achieve certain goals. This again is by design (not lack of it!) and stems from hard-learned experience, showing that many (esp. larger) projects highly benefit from more nuanced (sometimes conflicting approaches) compared to popular defacto "catch-all" framework solutions. To avid users (incl. myself) this approach has become a somewhat unique offering and advantage, yet in itself seems to be the hardest and most confusing aspect of the entire project to communicate to newcomers.
So seeing this list of new projects together, to me really is a celebration (and confirmation/testament) of the overall #BottomUpDesign#ThingUmbrella approach (which I've been building on since ~2006): From the wide spectrum/flexibility of use cases, the expressiveness, concision, the data-first approach, the undogmatic mix of complementary paradigms, the separation of concerns, no hidden magic state, only minimal build tooling requirements (a bundler is optional, but recommended for tree shaking, no more) — these are all aspects I think are key to building better (incl. more maintainable & reason-able) software. IMO they are worth embracing & exposing more people to and this is what I've partially attempted to do with this series of posts...
ICYMI here's a summary of the 10 most recent posts (full list in the https://thi.ng/umbrella readme). Many of those examples have more comments than code...
Addendum: Since I'm often asked to provide direct comparisons and point out differences to popular mainstream frameworks, I'd like to turn this "challenge" around and ask those same people to rebuild some of these 30 #HowToThing examples in a framework of their choice (and so also help them form their own opinions)...
It'd be very nice to hear if at least some of the above topics were interesting & useful (I can't really tell, which is also reason for me to pause for now...). From the little feedback received (again, thank you very much to those who did!), I've got a little better understanding of some remaining stumbling blocks re: people's grasp (but also some outright prejudices) of the project(s) at large.
Some of the more dismissive comments still keep me up at night and make me wonder how anything different, novel or non-mainstream could ever gain traction at all?!
@toxi though I have not too much time for private coding atm, I found these #howtothing series really enjoyable. Also I think it helps to explain using bits and pieces of #thingumbrella in your own projects, though I personally was already happy with the preexisting docs, readmes and examples 😊
@toxi Bookmarking your #HowToThing for later! The Recurse Center has attuned me to creative, bottom+up approaches, and I have a few weeks of my RC term remaining to work in a little exploration.
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...)
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#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...
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... 😅
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... 😎🤩
This example is using the browser DOM to visualize the resulting layout, but the actual layout algorithm (as implemented and including responsive breakpoints to control number of columns) can also be used in other contexts (e.g. canvas based)...
Some questions to existing thi.ng users: What stops you from giving more public/private feedback, from sharing your experiences/excitements/criticisms, from sharing/writing/blogging/posting about your work/results with these libraries or from asking/answering questions from other users? Is there anything missing/wrong/offputting (infrastructure/resource/social)? What (else) should I be providing to help you and other users finding each other more (also to self-support)?
There're a combined 4000+ stars for various thi.ng projects on Github. For learning the ropes, https://thi.ng/umbrella alone has 130+ example projects of varying complexity, most code is well maintained, commented (incl. smaller snippets/examples), there're many long, detailed readme documents explaining the top-level ideas & usage patterns, there're a few long blog posts & livecoding video streams where projects are built from ground up... In the past month alone, I've posted 17 #HowToThing mini tutorials here (more to come!). For older (#Clojure) projects, there're also dozens of workshop repos & blog posts...
#HowToThing#017 — (Re)Creating the https://thi.ng logo first as 2D geometry, then converting it to a SDF (Signed-distance field), then back again to geometry (via sampling the SDF at different distances and with warping) and finally serializing results to SVG...
Earlier today I released a new version of https://thi.ng/fibers aka building blocks and operators for coroutine-based multitasking and alternative to async-await. It's one of the more recent packages, but also one which is quickly cementing itself as one of the most powerful & flexible tools of the whole #ThingUmbrella collection, similar to how https://thi.ng/transducers & https://thi.ng/rstream have done in other contexts...
Recent versions have included new helpers to improve interop between fibers and async functions and to simplify time-sliced processing of child tasks and/or iterables (incl. via transducers).
The attached code snippet shows an example excerpt of how this is used in the recent (and even more recently updated) #HowToThing Mastodon UI demo. See linked toot for demo link & fully commented source code...
#HowToThing#015 — A special one: Creating a polyphonic & multitimbral synth with stochastic sequencer to generate offline audio (not WebAudio!), rendered via fibers (co-routines) and exporting the result as WAV file. Each synth voice uses a randomized config & FX pipeline for each note played (osc → adsr → SVF → filter delay line). Generated audio is attached.
This project is also available as new example #130 in the thi.ng/umbrella monorepo (originally based on a workshop exercise @ University of Applied Sciences, Augsburg, Nov 2022)
PSA: The main #ThingUmbrella readme now contains a section with links to all #HowToThing mini-tutorials here on Mastodon (13 parts at time of writing):
#HowToThing#013 — Building a toy Lisp language and interpreter using the S-expression parser from https://thi.ng/sexpr and polymorphic multiple dispatch functions via https://thi.ng/defmulti. A small language like this can be useful for DSL purposes, user programming or for just learning about interpreters. The entire setup is highly customizable (incl. support for different kinds of S-expressions, see package readme).
Even this tiny example includes the following features: variadic math ops, ability to define new symbols/variables & functions, lexical scoping, numeric & string values...
Some example invocations are included at the end...
Already had a few other glimpses of https://thi.ng/hiccup in this series, but here it's used to elegantly express & compose nested CSS rules (in addition to HTML), both either in the browser and/or serverside/offline. https://thi.ng/grid-iterators is used to generate the cell transition order. Please check the package readme for many more options...
This new example (#128) is also available as part of the thi.ng/umbrella monorepo now...
#HowToThing#011 — Creating a WebGL2 multi-pass shader pipeline using https://thi.ng/webgl to simulate 2D Cellular automata on the GPU. Here we use the classic Game of Life (yawn! ), but the setup allows for easily configurable rules/outcomes...
#HowToThing#010 — Creating a basic web app with declarative UI/DOM creation via Zig/WebAssembly and the super extensible https://thi.ng/wasm-api and its https://thi.ng/wasm-api-dom add-on module, both hybrid TypeScript/Zig libraries. See alt text of images for details.
Announcing #HowToThing, small code snippets illustrating useful patterns and use cases for various libraries/projects in the https://thi.ng ecosystem/anti-framework...
(Ps. Have been trying to start similar stuff in the past on the birdsite, but let's see if I can control my attention and be more consistent this time... If you have any topic requests, please reply below [or via DM])