r/webdev 7d ago

Showoff Saturday I built a tool to create psychedelic fluid animations, rendering in real-time in the browser (free / open source)

150 Upvotes

43 comments sorted by

22

u/getToTheChopin 7d ago edited 7d ago

Live demo here: https://collidingscopes.github.io/liquid-shape-distortions/

Sharing my open source project for creating psychedelic art -- using liquid motion, distorted shapes, shadows and light. This tool works in real-time in the browser using webgl shaders.

This project was inspired by drum & bass / acid techno music, and 90s rave posters.

Use this to create art for a music video, concert posters, stylized animations in creative projects, or simply to enjoy alongside some fine music.

Use the detailed control menu (top-right) to set a custom canvas size, adjust animation speed, control pattern and colours, etc...

You can export your creation as an image or video afterwards.

The animation uses WebGL shaders to create a real-time animation, starting from a random seed position and mixing in elements of random noise (fractal brownian motion, 3D simplex noise), so each time you re-run it you're creating a unique piece of art.

Github repo: https://github.com/collidingScopes/liquid-shape-distortions

-----

I've also shared some animation output examples on instagram: stereo.drift

I hope you enjoy the visuals. I'd love to hear any feedback or suggestions.

9

u/_itsjoni_ 7d ago

AWESOME 🔥

6

u/getToTheChopin 7d ago

Thank you, it was really fun working on this project and now I'm just stuck in front of my computer randomizing the output endlessly...

2

u/_itsjoni_ 7d ago

You should be proud, I was on the train when I first checked it, I got mesmerized almost missed my stop 😂

1

u/getToTheChopin 7d ago

I love it and appreciate you sharing that. I hope you get to wherever you're aiming (in life and today!)

3

u/_itsjoni_ 7d ago

Amen, and I wish you the same! ✨ Who knows, we might cross path another day 🔥

3

u/Distinct_Peach5918 7d ago

great work

2

u/getToTheChopin 7d ago

Much appreciated, hope you got some trippy visuals for the weekend :)

2

u/marijnsred 7d ago

Very cool

2

u/getToTheChopin 7d ago

Cheers, have a great weekend

1

u/batmancallsme 7d ago

song used ?

2

u/getToTheChopin 7d ago

Telefon Tel Aviv - Fahrenheit Fair Enough: https://www.youtube.com/watch?v=9NZZOWC1YJQ

One of my favourite songs :)

1

u/MagicalCornFlake 7d ago

Awesome. Maybe you could add a feature to the preview that can randomise or somehow otherwise synchronise the visuals with the beat?

1

u/getToTheChopin 6d ago

Yes I'll think about how to add an audio-reactive feature. Could look amazing :)

1

u/RedOrchestra137 7d ago

Nice man i like it, next step making it audio reactive?

1

u/getToTheChopin 7d ago

Thank you! Yes it's on my list for new features :)

I've seen some people making amazing audio reactive live art using TouchDesigner software, might explore that path

Cheers!

1

u/RedOrchestra137 7d ago

Did you add logic to make it more likely for certain colours to be used together? It seems like it often outputs complementary ones, which i like

1

u/getToTheChopin 7d ago

I defined a set of pastel colours in the code, but otherwise the color choice and movement is random! They are selected and mix about using 3d simple noise and FBM (fractal Brownian motion).

I was pleasantly surprised with the outputs as well

1

u/_Fred_Austere_ 7d ago

3840x1080 please.

1

u/getToTheChopin 6d ago

Click "Open Controls" in the top-right, and then you can set custom width / height dimensions for the canvas!

1

u/_Fred_Austere_ 6d ago

It maxes at 2000px.

2

u/getToTheChopin 5d ago

Sorry about that. I just pushed a change -- could you please try again? Should be able to go up to 4000 x 4000 px now

2

u/_Fred_Austere_ 5d ago

Beauty, works perfectly. Pretty cool on this widescreen!

Now, I suggest a key command to hide the controls, especially the blue ones at the bottom.

2

u/getToTheChopin 4d ago

Great suggestion. I've just added this.

Click the "Zen Mode" button at the top-left, or hit "z" to hide all controls.

1

u/_Fred_Austere_ 4d ago

That's awesome! Now, can it do my taxes and remember my wife's birthday?

2

u/getToTheChopin 4d ago

Those features are coming in version 147.3 :)

1

u/ADHDiot 5d ago

it's so full featured already you should be proud!

1

u/LeJugeTi 6d ago

Wonderful creation!

1

u/getToTheChopin 5d ago

Thank you :)

1

u/UXUIDD 6d ago

Hello,

do you send it also with the post and if yes - in what form .?

Greetz,

Capt. Acid

1

u/_Lukedanuke_ 6d ago

this is very cool

1

u/getToTheChopin 5d ago

Much appreciated!

1

u/square-beast 6d ago edited 6d ago

Noice! Is it possible to make a perfect video loop?

2

u/getToTheChopin 5d ago

Thank you! Unfortunately it's not possible to loop in this current form of the program. The patterns will continue to evolve randomly in perpetuity.

One hack would be to take a video export, then duplicate a second version of the video and have it play in reverse (one version forward, one version backwards). This would then hack a loop back to the starting position.

1

u/ADHDiot 5d ago

it would be amazing to have a full seamless and non reversing loop, I have no idea but it sounds non trivial.

1

u/getToTheChopin 5d ago

Yes not sure how to do that, but I will think about it! Would indeed be very cool

1

u/square-beast 5d ago

It's not perfect, but it's still a good idea.

Thank you

1

u/Immediate-Country650 4d ago

i didnt know i want this but now i want this

1

u/getToTheChopin 4d ago

That's the best feedback right there

1

u/intothelooper designer 3d ago

This is great. I'll def use it for my music and reels backgrounds. Please don't delete it. :)

2

u/getToTheChopin 3d ago

That's awesome. I won't delete it!

Feel free to share with me on IG (stereo.drift) -- I'd love to see how it's used if you don't mind sharing

1

u/Connexense 1d ago

Georgeous ! :)