Simulated Cyanotype Chemigrams...

Lately I've been revisiting my old fluid sim toolset which started out as part of my toxiclibs Java libraries (2007/8, based on Jos Stam's research, also previously mentioned in this thread[1]), then ported & expanded it for #Houdini in 2016, then ported again to TypeScript/GLSL (via https://thi.ng/shader-ast in 2019) and been messing around with it on & off ever since... Fluidsims are just so mesmerizing to work/play with and can be taken into so many interesting directions!

I also always loved the watercolor cover designs by Gabriella Holmström for The Memoir[2] series on Hypnus Records and wanted to create similar abstract structures/constellation, albeit with simulated fluids... Stills/snapshots, but showing traces of their creation process.

Attached are a few variations of this system (already collected again hundreds which I have to still curate). Each piece is starting with just 4 drops in always the exact same locations (diamond-shaped layout in the center), but each variation is evolving differently due to randomized concentrations and simulation coefficients, therefore resulting in many different diffusion behaviors and outcomes... Some of the pieces which exhibit more viscous fingering[3] almost remind me of Hokusai's Great Wave[4]...

I will be offering sets of unique prints/cards of these via my shop soon. Also still researching feasibility of integrating interactively created variations in the shop (also for other artworks/collections of mine).

[1] https://mastodon.thi.ng/@toxi/115802423411074211
[2] https://www.youtube.com/@Hypnusrecords/videos, for example: https://www.youtube.com/watch?v=efdfYJODiuA
[3] https://en.wikipedia.org/wiki/Saffman%E2%80%93Taylor_instability
[4] https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa

#FluidSim #Simulation #Art #GenerativeArt #AbstractArt #NoAI #ThingUmbrella #TypeScript #ShaderAST

Welcome to #TextModeTuesday! For the next few weeks I'll be posting some projects & experiments related to this just spontaneously made up hashtag. If you've got something related to interesting text-based art/experiments, patterns, ASCII-art, ANSI-art etc. please share — the more, the merrier...

To start with, here's an experiment from a few years ago to demonstrate some capabilities of https://thi.ng/text-canvas and https://thi.ng/shader-ast to create a raymarching renderer outputting images in text mode (with customizable character sets to represent luminance).

Demo:
https://demo.thi.ng/umbrella/ascii-raymarch/

Commented source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/ascii-raymarch/

Hotkeys:

- c = toggle color on/off
- t = toggle theme switch
- space = toggle update

WebGL version of the same scene (using an almost identical TypeScript shader source, only here transpiled to GLSL and using slightly different colors):
https://demo.thi.ng/umbrella/shader-ast-raymarch/

#TextModeTuesday #ASCIIArt #ThingUmbrella #TypeScript #ShaderAST #Raymarching

(Yet another) 1-minute excerpt of an #Umbra variation, one of my recent algorithmic/generative realtime animation art pieces, constantly evolving and exhibited exclusively on Layer.

Very much love this color theme, especially after ~15 seconds... 🤌

(See above hashtag for other clips)

Made with ❤️ and my opensource https://thi.ng/umbrella tools... #NoAI

#GenerativeArt #AlgrorithmicArt #AbstractArt #Art #Animation #Video
#ThingUmbrella #TypeScript #ShaderAST #Color

Another 1-minute excerpt of an #Umbra variation, one of my recent algorithmic/generative realtime animation art pieces, constantly evolving and exhibited exclusively on Layer.

(See above hashtag for other clips)

Made with ❤️ and my opensource https://thi.ng/umbrella tools... #NoAI

#GenerativeArt #AlgrorithmicArt #AbstractArt #Art #Animation #Video
#ThingUmbrella #TypeScript #ShaderAST

Been working on some additions/adjustments for #Umbra, one of my recent algorithmic/generative art pieces, currently shown exclusively on Layer.

Here's a 3 minute segment (of an infinite realtime animation). Give it time to develop/change! Fullscreen playback probably best...

Made with https://thi.ng/shader-ast (transpile TypeScript to GLSL) & https://thi.ng/webgl-shadertoy

Let's hope the video compression gods are kind to this one...

(Ps. Alas Firefox still doesn't support Rec.2020 color in video, so use Chrome/Safari for best viewing experience)

#GenerativeArt #Generative #AlgrorithmicArt #AbstractArt #Art #Texture #TypeScript #ShaderAST #ThingUmbrella #NoAI

Rayleigh scattering - Wikipedia

#Umbra

(Revisiting an unoptimized old code sketch, semi-fluid screen recording only... Love the contrast between soft gradients and hard edges and the unexpected emergence of shapes [and their disappearance]...)

(Made with https://thi.ng/shader-ast)

#Art #GenerativeArt #Gradients #Color #Rec2020 #Video #Animation #ThingUmbrella #ShaderAST #TypeScript

DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets

thi.ng/shader-ast

New work: #ALLUVION

Over the past two months I've been actively revisiting, updating/extending and now close to finishing this 1.5 year long journey... The actual journey has been much longer, been toying with (faux) fluid sims since ~2007...

A 50 second preview of one of my fave variations, best enjoyed fullscreen... Tried to achieve some molten, dichroic/irridescent glass & oilfilm aesthetics here, but there're over a dozen of other very different routes/styles possible too, with 25+ parameters to tweak the simulation and look & feel...

Made with https://thi.ng/shader-ast & https://thi.ng/shader-ast-stdlib

#Art #FluidSim #FlowField #Noise #Turbulence #ShaderAST #ThingUmbrella #TypeScript #GLSL #WebGL #GenerativeArt #Animation

DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets

thi.ng/shader-ast

Uploaded a new demo/example showing how to perform GPU-side data reductions using https://thi.ng/shader-ast & https://thi.ng/webgl multi-pass pipeline. Arbitrary reduction functions supported. If there's interest, this could be expanded & packaged up as library... 90% of this example is boiler plate, 9.9% benchmarking & debug outputs...

Demo:
https://demo.thi.ng/umbrella/gpgpu-reduce/

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

Readme w/ benchmark results:
https://github.com/thi-ng/umbrella/tree/develop/examples/gpgpu-reduce

Related discussion:
https://github.com/thi-ng/umbrella/issues/478

#ThingUmbrella #WebGL #ShaderAST #GPGPU #TypeScript #JavaScript

DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets

thi.ng/shader-ast

So much to do, but can't stop watching & hacking on this pseudo fluid sim every now & then... 🤩 Probably will develop this further into a tutorial for https://thi.ng/shader-ast

#ALLUVION #Animation #FlowField #FluidSim #Noise #ShaderAST #ThingUmbrella #TypeScript #GLSL #WebGL #GenerativeArt

DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets

thi.ng/shader-ast