lingo.lol is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for linguists, philologists, and other lovers of languages.

Server stats:

66
active users

#howtothing

0 posts0 participants0 posts today

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:

demo.thi.ng/umbrella/boid-basi

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

mastodon.thi.ng/@toxi/11130843

Continued thread

A short overview of end-of-2023 state of thi.ng(s) (thi.ng/umbrella only!):

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).

#ThingUmbrella #OpenSource #Gratitude #ProjectStatistics #YearInReview #IndyDev #Fundraising

2/3

#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 thi.ng/umbrella readme). Many of those examples have more comments than code...

021: Iterative animated polygon subdivision & heat map viz
mastodon.thi.ng/@toxi/11122194

022: Quasi-random voronoi lattice generator
mastodon.thi.ng/@toxi/11124441

023: Tag-based Jaccard similarity ranking using bitfields
mastodon.thi.ng/@toxi/11125696

024: 2.5D hidden line visualization of DEM files
mastodon.thi.ng/@toxi/11126950

025: Transforming & plotting 10k data points using SIMD
mastodon.thi.ng/@toxi/11128326

026: Shader meta-programming to generate 16 animated function plots
mastodon.thi.ng/@toxi/11129584

027: Flocking sim w/ neighborhood queries to visualize proximity
mastodon.thi.ng/@toxi/11130843

028: Randomized, space-filling, nested 2D grid layout generator
mastodon.thi.ng/@toxi/11132456

029: Forth-like DSL & livecoding playground for 2D geometry
mastodon.thi.ng/@toxi/11133502

030: Procedural text generation via custom DSL & parse grammar
mastodon.thi.ng/@toxi/11134707

#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 thi.ng/pointfree, thi.ng/pointfree-lang and various geometry related operations using 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:
demo.thi.ng/umbrella/pointfree

Source code:
github.com/thi-ng/umbrella/tre

(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 #027 — Boid/flocking simulation with spatial indexing, configurable behaviors and neighborhood queries to visualize proximity.

Key packages:

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

The new 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:
demo.thi.ng/umbrella/boid-basi

Source:
github.com/thi-ng/umbrella/blo

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/dis

Ps. It's also #ReleaseFriday — check main 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:

- 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...)
- thi.ng/shader-ast-stdlib: Collection of ~220 re-usable shader functions & configurable building blocks (incl. SDFs primitives/ops, raymarching, lighting, matrix ops, etc.)
- 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:
demo.thi.ng/umbrella/shader-as
(Check the console to view the generated GLSL shader)

Source code:
github.com/thi-ng/umbrella/tre

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 #024 — 2.5D hidden line DEM heightmap visualization featuring: image pre-filtering (customizable gaussian blur), bicubic subpixel image sampling, timesliced geometry generation and hidden line clipping, canvas drawing & SVG export from the same source geometry etc. All in ~85 lines of code (rest is comments & imports)

For the #GIS crowd: The attached images are of DEMs sourced from USGS (earthexplorer.usgs.gov/) and are showing regions near/around two of my fave mountains[1]: Mt St. Helens (WA), Mt. Jefferson (OR), plus Amargosa Valley (NV) north-east of Death Valley

Demo:
demo.thi.ng/umbrella/geom-terr

Source code:
github.com/thi-ng/umbrella/tre

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

github.com/thi-ng/umbrella/dis

I hope this (and other parts) of this ongoing #HowToThing series are interesting & educational. If so, please consider boosting to increase reach and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

github.com/sponsors/postspecta
patreon.com/thing_umbrella

#ThingUmbrella #GIS #DEM #Heightmap #DataViz #ImageProcessing #SVG #Geometry #GenerativeArt #TypeScript #JavaScript #Tutorial

[1] cc/ @andrewbriscoe: "your" mountains too...

#HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using thi.ng/bitfield, thi.ng/rstream & thi.ng/rdom

A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the thi.ng website itself)... For those of you interested in more "advanced" thi.ng/rdom examples, do check it out!

Background info:
en.wikipedia.org/wiki/Jaccard_

Demo:
demo.thi.ng/umbrella/related-i

Full source code:
github.com/thi-ng/umbrella/tre

The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

github.com/thi-ng/umbrella/blo

#HowToThing #022 — Quasi-random lattice generator using thi.ng/lowdisc and thi.ng/geom-voronoi

These infinite and parametric low-discrepancy sequence generators can be used to produce n-dimensional samples/points and are useful for a whole range of graphics (and more generally sampling related) topics and generative design techniques. The example also shows basic usage of the 2D Delaunay/Voronoi mesh, incl. obtaining cells which can be automatically clipped against a user-provided convex boundary polygon.

Demo (reload to randomize):
demo.thi.ng/umbrella/quasi-lat

Source (more comments than code 😎):
github.com/thi-ng/umbrella/tre

Further reading:
extremelearning.com.au/unreaso
en.wikipedia.org/wiki/Low-disc

Just updated the synth & sequencer of the most recent #HowToThing example to be much more musical, added more params and switched to a faster oscillator. Now you can generate up to 5 mins of audio, choose note length, number of octaves and probability...

New audio example in the reply...

Demo:
demo.thi.ng/umbrella/render-au

Source:
github.com/thi-ng/umbrella/tre

Good morning. With the first 10 issues of #HowToThing done, here's a quick review and another kind request for feedback about which (of the vast amount of possible) topics you'd like to see/learn more about: Did you find any of the examples so far useful? Anything I can do to improve the format? Too small? Too basic? Too advanced?

To summarize, ongoing since August 2023: #HowToThing is a series of short posts demonstrating many different techniques, patterns, composition possibilities and use cases from across the thi.ng/ ecosystem. Each with heavily commented code (and with sometimes visual results)...

001: FPS counter with moving average
mastodon.thi.ng/@toxi/11089892)

002: Sorting an array by potentially CPU-costly sort criteria
mastodon.thi.ng/@toxi/11090419

003: Multiple key states and extracting commands via FSM
mastodon.thi.ng/@toxi/11093403

004: Creating text-based plots to debug & visualize sequential data
mastodon.thi.ng/@toxi/11094296

005: Barnsley fern IFS fractal
mastodon.thi.ng/@toxi/11094694

006: Clustering arbitrary n-dimensional data using K-means
mastodon.thi.ng/@toxi/11096134

007: Converting Google Maps bookmarks to KML
mastodon.thi.ng/@toxi/11096134

008: CSV parsing into structured data & multi-plot SVG dataviz
mastodon.thi.ng/@toxi/11096724

009: 2D canvas drawing & `threadLast()` dataflow operator
mastodon.thi.ng/@toxi/11097232

010: Basic web app UI/DOM via Zig/WASM and thi.ng/wasm-api
mastodon.thi.ng/@toxi/11097529

Preparing these examples takes quite a bit of time, so any feedback is highly appreciated...

thi.ngOpen source building blocks for computational design. Est. 2006thi.ng is a set of ~350 complementing code libraries & projects, a long-term effort devoted to Computational Design in its many forms.

#HowToThing #005 — Elegantly compute the famous Barnsley fern IFS fractal using a mix of these packages:

- thi.ng/matrices: transformation matrix application
- thi.ng/random: weighted random selection
- thi.ng/pixel: floating point pixel buffer & conversions
- thi.ng/fibers: time-slicing of infinite IFS fractal process

As usual (for this series), there're more comments than code! Hth! 🤓

Also just added this as new example (#126):

Demo (will _slowly_ reveal due to chosen config):
demo.thi.ng/umbrella/ifs-fract

(Press `x` at any time to download the current frame)

Source code:
github.com/thi-ng/umbrella/tre

Good Morning & welcome to #HowToThing #004 — Painlessly creating text-based plots to debug & visualize sequential data in a REPL-driven workflow. Here we're using thi.ng/dsp signal generators, but _any_ numeric array or iterable will work. Visualization via thi.ng/text-canvas (new versions of both packages have just been released...)

Source code:
gist.github.com/postspectacula

#HowToThing #002 — Sorting an array by potentially CPU-costly sort criteria. Along the way, this example also illustrates some basic thi.ng/geom functionality (e.g. #SVG export and polymorphic functions via thi.ng/defmulti)

Source code in alt text.

Second image shows generated SVG of the sorted shapes.

Ps. The `area()` function isn't heavy at all for the shapes used in the example, but it could/would be for more complex paths/polygons or when computing the area of entire shape hierarchies (aka nested `group()` shapes)...