Of umbrellas, transducers, reactive streams & mushrooms (Pt.1)

  • Part 2 — HOFs, Transducers, Reducers, ES6 iterables
  • Part 3 — Convolution, 1D/2D Cellular Automata
  • Part 4 — Disjoint Sets, Graph analysis, Signed Distance Fields


…a mono-repository and proving ground for a set of mutually developed & complementary projects, aimed at the general premise of building TypeScript/ES6 apps in a less frameworky, more minimal, simple, sane, and most importantly, more data-oriented and functional way. In short: Less magic, less tooling, more plain data, more data flow, more composition, more types (without becoming fascist about them), shallow(er) / opt-in abstractions, and above all, more flexibility and re-use. Currently counting in at 89 packages with, at first sight, seemingly not too much in common (or so I’ve been told), a small random sampling of topics covered, includes:

  • Data structures for various use cases (graphs, sets, trees, heaps, lists etc.)
  • Binary data manipulation, encoders/decoders
  • Functional programming
  • ES6 iterators & transducers (a primary topic)
  • Reactive dataflow streams & graphs
  • Immutable data / state containers & updates, time travel
  • Extensible value-based (not pointer-based) equality, diffing
  • Interceptor-based, composable event handling
  • 2D geometry, color, gradients, visualization
  • Higher-order string formatting
  • Finite-state machines
  • Declarative SPA routing
  • Structured, multi-target data logging
  • HTML / SVG / XML / CSS / Markdown generation & parsing
  • Strided memory pooling/mapping/ allocation (WebGL/WASM interop)
  • nD vector & matrix operations (dense & sparse)
  • Oscillators/wave generators (not only for audio)
  • Seeded PRNGs w/ uniform API
  • Forth-like, point-free stack DSL
  • …and, of course, above-mentioned component based UI generation
Long tails everywhere — Package file sizes of all current thi.ng/umbrella projects
Dataflow graph example — Live demo / Source code (needs updating)
Pump & dump in action — Crypto-currency SVG live chart - Live demo / Source code
thi.ng/hdom benchmark — Live demo / Source code
Incremental Voronoi / Delaunay via Quad-edge data structure of 20k Poisson-disk sampled points, accelerated using kD-Tree spatial indexing
Transducer based Figlet style bitmap font transformer — Live demo / Source code
Recursive polygon tessellation & thi.ng/hdom-canvas visualization — Live demo / Source code
D0 & stochastic L-Systems made w/ thi.ng/lsys
Minimal Markdown parser / hiccup converter — Live demo / Source code
Sine-plasma effect w/ realtime multi-contour extraction — Live demo / Source code
hdom virtual scroller component with fuzzy search — Live demo / Source code
Worker based, interactive Mandelbrot explorer with cosine gradient colorization — Live demo / Source code
Interactive, additive wave synthesis SVG visualization — Live demo / Source code

Where to go from here…

Having been a game designer/coder in a previous life (15–30 years ago), I still believe the discipline is fairly unique in terms of combining a multitude of different skills and topics. So even though none of the projects discussed here have anything directly to do with game development (i.e. thi.ng/umbrella is definitely not a game engine), I will introduce, discuss and start weaving together concepts & projects under the pretext of slowly building up a semi-functional mini-game, using nothing but packages from the monorepo…

Welcome to Shroomania!

Below is a teaser screenshot of what we will be building over the coming parts of this article series…

Screenshot of the current state of Shroomania — Play it @ demo.thi.ng/shroomania.
Cellular automata example used as starting point for the game — Live demo / Source code
  1. Procedural generation: Apart from the cute pixel art base tile set, obtained from opengameart.org (plus a few additions made by myself), all other aspects of the game world generation are 100% procedural, created with 2D Cellular Automata (CA) and signed distance fields (SDF). Btw. the entire game world is based on one of the configuration presets of the above CA demo.
  2. Graph analysis: Since the game world is created via a semi-random process, not all results produce a good playable environment. We will cover some basic (undirected) graph theory, algorithms & data structures (e.g. Disjoint Sets) to analyze the generated raw environment, verify playability and, if successful, extract more meaningful data for successive map generation steps.
  3. Functional programming with transducers: Almost all data processing steps in terms of terrain generation and game state handling are done via transducers (and compositions of such), one of my favorite (and IMHO one of the most powerful) functional programming concepts, able to maximize DRY in many usage scenarios. These (transducers) in turn heavily rely on ES6 iterables, which we will cover in some detail as well.
  4. Reactive dataflow: Zooming out slightly, the aforementioned transducers are all connected into a dataflow graph of reactive values making up the game state & processing logic. Each reactive value is essentially of a stream-based nature and we will use a number of thi.ng/rstream constructs and operators to connect them into a compute graph, with injected transducers doing the actual work (or stopping downstream traffic).
  5. Declarative, data-driven, on-demand canvas drawing: Excluding some minor pre-processing steps for the minimap overlay, where we use the “low-level” HTML canvas API, the main game render step only updates the UI when needed and uses thi.ng/hdom and thi.ng/hdom-canvas components (i.e. JS arrays & iterators).


There have been four versions (each between 2–5k words) of a follow-up post to that previous article sitting in my drafts for much of 2018. However, since many of these topics are touching quite dry CS stuff, my hope is that the new, more concrete context of building a small game will help to better show usage patterns and discuss some auxiliary topics at the same time. You know, one stone, two flies and such…

  • Part 2 — Transducers
  • Part 3 — Cellular automata
  • Part 4 — Disjoint Sets, Graph analysis, Signed Distance Fields



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



Computational design, data, TypeScript, Clojure/script, C