#shaderast — Public Fediverse posts

@lo Great minds (but not using p5js)... :)

https://demo.thi.ng/umbrella/webgl-shadertoy/

Source:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-shadertoy/src/index.ts

#ThingUmbrella #WebGL #GLSL #ShaderAST #TypeScript

@lo Great minds (but not using p5js)... :)

https://demo.thi.ng/umbrella/webgl-shadertoy/

Source:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-shadertoy/src/index.ts

#ThingUmbrella #WebGL #GLSL #ShaderAST #TypeScript

@lo Great minds (but not using p5js)... :)

https://demo.thi.ng/umbrella/webgl-shadertoy/

Source:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-shadertoy/src/index.ts

#ThingUmbrella #WebGL #GLSL #ShaderAST #TypeScript

@lo Great minds (but not using p5js)... :)

https://demo.thi.ng/umbrella/webgl-shadertoy/

Source:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-shadertoy/src/index.ts

#ThingUmbrella #WebGL #GLSL #ShaderAST #TypeScript

@lo Great minds (but not using p5js)... :)

https://demo.thi.ng/umbrella/webgl-shadertoy/

Source:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-shadertoy/src/index.ts

#ThingUmbrella #WebGL #GLSL #ShaderAST #TypeScript

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

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

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

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

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

#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

Revisiting an old unfinished project with new eyes & new colors...

#ALLUVION #ThingUmbrella #Generative #Art #FluidSim #Colors #ShaderAST #TypeScript #WebGL

Always be dogfooding (your tech): Updated my WebGL image transition web component to display blurhash previews before & during image preloading. The hashes are provided as text attribute (~30 characters) and decoded to preview images via https://thi.ng/blurhash...

https://demo.thi.ng/umbrella/webgl-transition/

Always trying to be aware of bandwidth & energy implications (also UX related), this component is 100% lazy and only performs any work when absolutely needed (i.e. during transitions), otherwise is completely idle (not even using a dummy requestAnimationFrame() loop). Images are only starting to be preloaded when the component comes into view (using the IntersectionObserver API)

Other features added:

- slideshow mode w/ arbitrary number of images (at least not limited by VRAM), adjustable delay time
- choice of easing options/functions for transitions
- dynamic loading/replacing of images & updating underlying WebGL textures

#ThingUmbrella #WebComponents #LazyLoading #WebGL #UI #Transition #ShaderAST #TypeScript #JavaScript

Really getting into reusable #WebComponents lately, incl. this one I worked over the last week for the new thi.ng website: a WebGL based image transition (via displacement mapping), primarily using https://thi.ng/shader-ast & http://thi.ng/webgl...

https://demo.thi.ng/umbrella/webgl-transition/

- the transition is currently linked to mouse over or touch events, but will be more flexible
- the layout is responsive (single column on mobile, two columns on larger screens)
- some of the displacement map images were created with https://shadergraph.thi.ng

(cc @Yura)

#ThingUmbrella #WebGL #WebComponents #UI #Transition #ShaderAST #TypeScript #JavaScript

Warm fuzzy monday morning feeling after someone sent you a link to a blog post describing your project (https://thi.ng/umbrella) as "the most beautiful open source project I've ever seen" and "it's bloody fantastic"... 🤩🥹

https://polar.sh/emilwidlund/posts/alma-an-experimental-playground-for-generative-graphics

Btw. Related to https://alma.sh (the main topic of the above blog post), here's my own older (less flashy) interactive shader playground here (the basics of which were developed in a YT live stream):

https://shadergraph.thi.ng/

#ThingUmbrella #OpenSource #ShaderAST #ShaderGraph #WebGL #ScreenRecording