#shaderast — Public Fediverse posts

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

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

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

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

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

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

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

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

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

(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

(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

(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

(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

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

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

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

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

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

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

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

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

Accidental atmospheric Rayleigh scattering (https://en.wikipedia.org/wiki/Rayleigh_scattering) — feels like sunrise from ~50secs...

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

Accidental atmospheric Rayleigh scattering (https://en.wikipedia.org/wiki/Rayleigh_scattering) — feels like sunrise from ~50secs...

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

Accidental atmospheric Rayleigh scattering (https://en.wikipedia.org/wiki/Rayleigh_scattering) — feels like sunrise from ~50secs...

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

Accidental atmospheric Rayleigh scattering (https://en.wikipedia.org/wiki/Rayleigh_scattering) — feels like sunrise from ~50secs...

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

Accidental atmospheric Rayleigh scattering (https://en.wikipedia.org/wiki/Rayleigh_scattering) — feels like sunrise from ~50secs...

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

#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

#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

#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

#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

#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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Direct outcome from a recent GitHub discussion with @made, a new https://thi.ng/webgl multi-pass example to interactively draw to & read from an offscreen render texture using shaders directly written in #TypeScript via https://thi.ng/shader-ast and using high-level operators (gaussian blur & Porter-Duff alpha compositing) from https://thi.ng/shader-ast-stdlib...

Demo (draw in the left/first square):
https://demo.thi.ng/umbrella/webgl-texture-paint/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts

#ThingUmbrella #WebGL #ShaderAST #Colors

Direct outcome from a recent GitHub discussion with @made, a new https://thi.ng/webgl multi-pass example to interactively draw to & read from an offscreen render texture using shaders directly written in #TypeScript via https://thi.ng/shader-ast and using high-level operators (gaussian blur & Porter-Duff alpha compositing) from https://thi.ng/shader-ast-stdlib...

Demo (draw in the left/first square):
https://demo.thi.ng/umbrella/webgl-texture-paint/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts

#ThingUmbrella #WebGL #ShaderAST #Colors

Direct outcome from a recent GitHub discussion with @made, a new https://thi.ng/webgl multi-pass example to interactively draw to & read from an offscreen render texture using shaders directly written in #TypeScript via https://thi.ng/shader-ast and using high-level operators (gaussian blur & Porter-Duff alpha compositing) from https://thi.ng/shader-ast-stdlib...

Demo (draw in the left/first square):
https://demo.thi.ng/umbrella/webgl-texture-paint/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts

#ThingUmbrella #WebGL #ShaderAST #Colors

Direct outcome from a recent GitHub discussion with @made, a new https://thi.ng/webgl multi-pass example to interactively draw to & read from an offscreen render texture using shaders directly written in #TypeScript via https://thi.ng/shader-ast and using high-level operators (gaussian blur & Porter-Duff alpha compositing) from https://thi.ng/shader-ast-stdlib...

Demo (draw in the left/first square):
https://demo.thi.ng/umbrella/webgl-texture-paint/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts

#ThingUmbrella #WebGL #ShaderAST #Colors

Direct outcome from a recent GitHub discussion with @made, a new https://thi.ng/webgl multi-pass example to interactively draw to & read from an offscreen render texture using shaders directly written in #TypeScript via https://thi.ng/shader-ast and using high-level operators (gaussian blur & Porter-Duff alpha compositing) from https://thi.ng/shader-ast-stdlib...

Demo (draw in the left/first square):
https://demo.thi.ng/umbrella/webgl-texture-paint/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts

#ThingUmbrella #WebGL #ShaderAST #Colors

#ReleaseFriday 🚀 - This week's #ThingUmbrella releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...

https://thi.ng/shader-ast — Added polymorphic syntax sugar versions of various math ops to simplify "self-assignments" aka ops in the form of `x = x+ 2`, which would in shader AST syntax looked like `assign(x, add(x, 2))`, now `addSelf(x, 2)`... See changelog & docs for details of supported ops.

https://thi.ng/shader-ast-stdlib — The "standard library" for https://thi.ng/shader-ast has had several new additions of useful helpers & metaprogramming tools, e.g. a new `branches()` function (see screenshot) to simplify n-ary A/B testing of params (or debugging of shader outputs) as is commonly done by e.g. visualizing different versions as columns based on fragment position. Other additions include surface normal calculation from a 2D terrain/grayscale texture (e.g. for GIS or fluid sims), float packing/unpacking (to/from 8bit/channel RGBA textures as a lot of mobile devices _still_ don't support float render textures in WebGL)...

https://thi.ng/shader-ast-optimize — This package is used to apply various optimizations on a given shader AST program (or expression). Recursive constant folding has been extended to more ops & built-in functions. There's also a new wrapper function `defOptimized()` which can be used in place of `defMain()` to create auto-optimized shader main functions. The new version also has several bug fixes and more tests... See updated readme for examples.

As mentioned in earlier toots, I've also been doing several large rounds/commits of general documentation related updates/revamps, incl. updating all code examples in readmes & API docs to provide all required import statements, writing a new tooling (see below) to extract said code blocks from their original files and export them to their own source files for easier testing/trying them out from the command line. That work is only partially completed (with still hundreds of files to edit/update), but if you've got a clone of the https://thi.ng/umbrella repo, you can already try it out by running `yarn tool:tangle` (to extract examples from API docs in source files) or `yarn doc:readme` (to extract from readmes). In both cases, make sure your first build everything via `yarn build`. The tools will log where each of the examples is written to. Once I'm done, there will be ~800 example files extracted via this process... 💪

#TypeScript #JavaScript #ShaderAST #WebGL #Documentation #OpenSource

#ReleaseFriday 🚀 - This week's #ThingUmbrella releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...

https://thi.ng/shader-ast — Added polymorphic syntax sugar versions of various math ops to simplify "self-assignments" aka ops in the form of `x = x+ 2`, which would in shader AST syntax looked like `assign(x, add(x, 2))`, now `addSelf(x, 2)`... See changelog & docs for details of supported ops.

https://thi.ng/shader-ast-stdlib — The "standard library" for https://thi.ng/shader-ast has had several new additions of useful helpers & metaprogramming tools, e.g. a new `branches()` function (see screenshot) to simplify n-ary A/B testing of params (or debugging of shader outputs) as is commonly done by e.g. visualizing different versions as columns based on fragment position. Other additions include surface normal calculation from a 2D terrain/grayscale texture (e.g. for GIS or fluid sims), float packing/unpacking (to/from 8bit/channel RGBA textures as a lot of mobile devices _still_ don't support float render textures in WebGL)...

https://thi.ng/shader-ast-optimize — This package is used to apply various optimizations on a given shader AST program (or expression). Recursive constant folding has been extended to more ops & built-in functions. There's also a new wrapper function `defOptimized()` which can be used in place of `defMain()` to create auto-optimized shader main functions. The new version also has several bug fixes and more tests... See updated readme for examples.

As mentioned in earlier toots, I've also been doing several large rounds/commits of general documentation related updates/revamps, incl. updating all code examples in readmes & API docs to provide all required import statements, writing a new tooling (see below) to extract said code blocks from their original files and export them to their own source files for easier testing/trying them out from the command line. That work is only partially completed (with still hundreds of files to edit/update), but if you've got a clone of the https://thi.ng/umbrella repo, you can already try it out by running `yarn tool:tangle` (to extract examples from API docs in source files) or `yarn doc:readme` (to extract from readmes). In both cases, make sure your first build everything via `yarn build`. The tools will log where each of the examples is written to. Once I'm done, there will be ~800 example files extracted via this process... 💪

#TypeScript #JavaScript #ShaderAST #WebGL #Documentation #OpenSource

#ReleaseFriday 🚀 - This week's #ThingUmbrella releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...

https://thi.ng/shader-ast — Added polymorphic syntax sugar versions of various math ops to simplify "self-assignments" aka ops in the form of `x = x+ 2`, which would in shader AST syntax looked like `assign(x, add(x, 2))`, now `addSelf(x, 2)`... See changelog & docs for details of supported ops.

https://thi.ng/shader-ast-stdlib — The "standard library" for https://thi.ng/shader-ast has had several new additions of useful helpers & metaprogramming tools, e.g. a new `branches()` function (see screenshot) to simplify n-ary A/B testing of params (or debugging of shader outputs) as is commonly done by e.g. visualizing different versions as columns based on fragment position. Other additions include surface normal calculation from a 2D terrain/grayscale texture (e.g. for GIS or fluid sims), float packing/unpacking (to/from 8bit/channel RGBA textures as a lot of mobile devices _still_ don't support float render textures in WebGL)...

https://thi.ng/shader-ast-optimize — This package is used to apply various optimizations on a given shader AST program (or expression). Recursive constant folding has been extended to more ops & built-in functions. There's also a new wrapper function `defOptimized()` which can be used in place of `defMain()` to create auto-optimized shader main functions. The new version also has several bug fixes and more tests... See updated readme for examples.

As mentioned in earlier toots, I've also been doing several large rounds/commits of general documentation related updates/revamps, incl. updating all code examples in readmes & API docs to provide all required import statements, writing a new tooling (see below) to extract said code blocks from their original files and export them to their own source files for easier testing/trying them out from the command line. That work is only partially completed (with still hundreds of files to edit/update), but if you've got a clone of the https://thi.ng/umbrella repo, you can already try it out by running `yarn tool:tangle` (to extract examples from API docs in source files) or `yarn doc:readme` (to extract from readmes). In both cases, make sure your first build everything via `yarn build`. The tools will log where each of the examples is written to. Once I'm done, there will be ~800 example files extracted via this process... 💪

#TypeScript #JavaScript #ShaderAST #WebGL #Documentation #OpenSource

#ReleaseFriday 🚀 - This week's #ThingUmbrella releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...

https://thi.ng/shader-ast — Added polymorphic syntax sugar versions of various math ops to simplify "self-assignments" aka ops in the form of `x = x+ 2`, which would in shader AST syntax looked like `assign(x, add(x, 2))`, now `addSelf(x, 2)`... See changelog & docs for details of supported ops.

https://thi.ng/shader-ast-stdlib — The "standard library" for https://thi.ng/shader-ast has had several new additions of useful helpers & metaprogramming tools, e.g. a new `branches()` function (see screenshot) to simplify n-ary A/B testing of params (or debugging of shader outputs) as is commonly done by e.g. visualizing different versions as columns based on fragment position. Other additions include surface normal calculation from a 2D terrain/grayscale texture (e.g. for GIS or fluid sims), float packing/unpacking (to/from 8bit/channel RGBA textures as a lot of mobile devices _still_ don't support float render textures in WebGL)...

https://thi.ng/shader-ast-optimize — This package is used to apply various optimizations on a given shader AST program (or expression). Recursive constant folding has been extended to more ops & built-in functions. There's also a new wrapper function `defOptimized()` which can be used in place of `defMain()` to create auto-optimized shader main functions. The new version also has several bug fixes and more tests... See updated readme for examples.

As mentioned in earlier toots, I've also been doing several large rounds/commits of general documentation related updates/revamps, incl. updating all code examples in readmes & API docs to provide all required import statements, writing a new tooling (see below) to extract said code blocks from their original files and export them to their own source files for easier testing/trying them out from the command line. That work is only partially completed (with still hundreds of files to edit/update), but if you've got a clone of the https://thi.ng/umbrella repo, you can already try it out by running `yarn tool:tangle` (to extract examples from API docs in source files) or `yarn doc:readme` (to extract from readmes). In both cases, make sure your first build everything via `yarn build`. The tools will log where each of the examples is written to. Once I'm done, there will be ~800 example files extracted via this process... 💪

#TypeScript #JavaScript #ShaderAST #WebGL #Documentation #OpenSource

#ReleaseFriday 🚀 - This week's #ThingUmbrella releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...

https://thi.ng/shader-ast — Added polymorphic syntax sugar versions of various math ops to simplify "self-assignments" aka ops in the form of `x = x+ 2`, which would in shader AST syntax looked like `assign(x, add(x, 2))`, now `addSelf(x, 2)`... See changelog & docs for details of supported ops.

https://thi.ng/shader-ast-stdlib — The "standard library" for https://thi.ng/shader-ast has had several new additions of useful helpers & metaprogramming tools, e.g. a new `branches()` function (see screenshot) to simplify n-ary A/B testing of params (or debugging of shader outputs) as is commonly done by e.g. visualizing different versions as columns based on fragment position. Other additions include surface normal calculation from a 2D terrain/grayscale texture (e.g. for GIS or fluid sims), float packing/unpacking (to/from 8bit/channel RGBA textures as a lot of mobile devices _still_ don't support float render textures in WebGL)...

https://thi.ng/shader-ast-optimize — This package is used to apply various optimizations on a given shader AST program (or expression). Recursive constant folding has been extended to more ops & built-in functions. There's also a new wrapper function `defOptimized()` which can be used in place of `defMain()` to create auto-optimized shader main functions. The new version also has several bug fixes and more tests... See updated readme for examples.

As mentioned in earlier toots, I've also been doing several large rounds/commits of general documentation related updates/revamps, incl. updating all code examples in readmes & API docs to provide all required import statements, writing a new tooling (see below) to extract said code blocks from their original files and export them to their own source files for easier testing/trying them out from the command line. That work is only partially completed (with still hundreds of files to edit/update), but if you've got a clone of the https://thi.ng/umbrella repo, you can already try it out by running `yarn tool:tangle` (to extract examples from API docs in source files) or `yarn doc:readme` (to extract from readmes). In both cases, make sure your first build everything via `yarn build`. The tools will log where each of the examples is written to. Once I'm done, there will be ~800 example files extracted via this process... 💪

#TypeScript #JavaScript #ShaderAST #WebGL #Documentation #OpenSource