thi.ng/umbrella livestream #4

This coming Sunday 2023-04-23 @ 20:00 CEST (UTC+2)

In this session I will be building a stripped down 2D version of the recently published Bubblemania mini-project, which is a great opportunity to talk about https://thi.ng/timestep, the newly released 180th(!) package in Umbrella, and of course, also to continue the discussion of various topics related to using https://thi.ng/rstream, https://thi.ng/rdom, https://thi.ng/transducers, https://thi.ng/geom, https://thi.ng/color etc. for realtime visualization purposes and/or artwork export. Should be fun!

Stream URL:
https://youtube.com/live/WOXMUJFmbig

Local times:
https://www.timeanddate.com/worldclock/fixedtime.html?msg=thi.ng+livestream+%234&iso=20230423T20&p1=168&ah=2

A preview of the project we will be (re)building from scratch (only around ~120 lines of code):

https://demo.thi.ng/umbrella/voronoi-foam/

#Bubblemania
https://art.thi.ng/bubblemania

#ThingUmbrella #LiveStream #TypeScript

As of this morning 50 people have use their tickets to get their version of #Bubblemania and I'm giving the other people until Monday 12 noon (CEST) to use their chance before opening it up to the wider public.

https://www.fxhash.xyz/generative/26702

Question is: How do I get in touch with these other (mostly randomly chosen) people currently on the reserve list? Will try Tw*tter, but my visibility there's close to zero...

Pragmatist that I am, I've been spending a lot of time over the past 24h to abstract & extract the fixed timestep/lockstep simulation update logic so that I (or others) don't need to re-implement the boilerplate for this type of update cycle for each new project. So a new (small) package is born:

https://thi.ng/timestep

Aside from the main update logic which entirely separates simulation state (and its update/integration) from rendering state (which will be derived/interpolated), the package also provides convenience wrappers for numeric or vector-based state variables. These are very useful, since the update logic requires 3 distinct versions of each sim state var: previous, current (next) and its interpolated version. Only the latter should be used outside the simulation (e.g. for rendering). It's all explained in the readme and the classic article by Glenn Fiedler (from 2008 or so) upon which the core logic is based on...

In related news, I've also uploaded an updated version of #Bubblemania which is fully deterministic now (pixel perfection verified several times via difference images exported after 1000 and 2000 frames). Obviously I cannot update the version on fx(hash), but you can just copy your hash & params query string and append it as I've done here:

https://demo.thi.ng/umbrella/bubblemania/?fxhash=ooFcsnZBR21MRPkZeBMJFya6SZTtvnfoUzYpejfg5txRCCWnVyH&fxminter=tz1W2E9rSnHDftdygWiRjgVZzbw5y8oMN2z3&fxparams=01043ff000000000000000000000000000003fe3333333333333

#ThingUmbrella #GenerativeArt #Simulation #Determinism #TypeScript

Okay, I found the non-determinism issue! Get ready for a deep dive:

Just as with Apple's "natural scrolling direction", there're really two ways of thinking about this issue and IMHO it's not even a bug as such, just me prioritizing a different aspect of the whole piece: realtime performance (since this is animated)

The "offending" code to update a single cell/bubble is attached, see if you can spot the issue...

It took me little while, but as predicted, it _is_ timing related:

The animation code is trying to be "best practice" (aka using the highres timestamp supplied by requestAnimationFrame(), computing the delta time to the previous frame and so be adaptive to any dropped frames or unexpected delays, e.g. due to window resizing, garbage collection or any other external factors). Because of that, each bubble is updating using realtime deltas and hence the animation WILL sooner or later become non-deterministic in terms of individual bubble movements (but nothing else!).

Btw. The official MDN docs[1] are having an explicit warning about making sure to use the realtime timestamp future-proofing animation code (see 2nd screenshot)

Everything else in #Bubblemania, i.e. the layout, the positions, shapes, colors & texture assignments of the bubbles, all that _is_ fully deterministic. I just verified this (several times) by serializing the entire state to JSON and then diffing results. The issue is (real)timing!

This is useful food for thought though in general (and for others): There are only two choices for _any_ such generative, realtime animated project:

1) Locking the frame rate to ensure a "theoretical determinism", but eventually having to irrevocably accept a change of character of the entire piece in the future (e.g. due to higher or uneven display frame rates, e.g. more common 120Hz screens in a few years or low powered machines with frequent dropped frames on the other side of the spectrum...)

OR

2) Prioritizing realtime animation and accepting the fact that minute/unimportant details might/will become variable (e.g. in this case, bubbles bobbing in a non-guaranteed order)

IMHO you can only pick one of these and it seems I picked the wrong one... (just like with Brexit, you can't both eat your cake and have it too! 😉)

What would you have done/prioritized? Which aspect is more important here (really)?

[1] https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

#Debugging #Determinism #RealTime #Animation #GenerativeArt

I just released #Bubblemania, my first #GenerativeArt project on #FXHash in over 9 months and a little gift to some in the growing #GenerativeArt community here on Mastodon and to other randomly chosen collectors of my previous pieces.

https://www.fxhash.xyz/generative/26702

This small project is several things:

1. First and foremost, it's a little, light "visual ASMR" treat to bring some positivity into your day - some "Maluma" softness to contrast the more common "Takete" of contemporary generative art aesthetics[1].

2. A small gift to celebrate the fledgling generative art/design community on Mastodon: 20 of the 128 tokens are given to some of the people in that slowly growing community, with the remainder given as Thank You (and smoke signal/sign of life) to some of my existing collectors, randomly chosen via lottery script[2].

3. For those so inclined, and with a bit of hand-holding, ChatGPT explains the _true_ conceptual depths of this project much better than I ever could:

"The bubbles in this generative art piece serve as a reflection of the human experience, reminding us of our own impermanence and the ephemeral nature of all things. The piece invites us to contemplate the fundamental questions of human existence and speaks to our innate curiosity and desire to understand the world around us.

Through the convergence of science and art, this piece reveals the infinite complexity and unpredictability of the world while also hinting at the underlying order that exists within the chaos of the universe. It reminds us that even in the midst of uncertainty, there is beauty and order to be found, and that it is through the pursuit of knowledge and understanding that we can find meaning and purpose in our lives."

Isn't that lovely & who can argue with that?! :)

4. I often revisit projects/ideas after many years, mainly to re-examine them with new eyes/knowledge/tools and/or to get answers/verification which I couldn't get earlier. This is one of these instances. So for the more rational-minded, this is a TypeScript/GLSL (WebGL) version of an older Clojure/Houdini project (from 2016) to generate a Voronoi via the simulation of intersecting sphere meshes (aka foam bubbles). In this new version the sim & deformations are done in realtime (~4M vertices, mainly via vertex shader). Also added some _basic_ physics and procedural textures to create more of a quirky character (hopefully complemented by the different color themes and other params).

[1] https://en.wikipedia.org/wiki/Bouba/kiki_effect
[2] https://gist.github.com/postspectacular/3d970e02570b7dfd32d03d43e1e7e3e0

Needed to add support for ultra-widescreens for my #Bubblemania mini project (see previous toots). Luckily, there's not much else required here than adjusting the camera's viewing angle (FOV) for different aspect ratios, a great use case for https://thi.ng/ramp, which provides linear & hermite "keyframe"-based curve interpolations. Keyframes don't need to be time based, e.g. here I'm using aspect ratios (from 3:1 portrait to 4:1 landscape) as key frames to compute the desired FOV... easy, peasy! :)

#ThingUmbrella #GenerativeDesign #ToolMaking