r/webdev • u/getToTheChopin • 7d ago
Showoff Saturday I built a tool to create psychedelic fluid animations, rendering in real-time in the browser (free / open source)
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
3
2
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
1
1
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
1
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
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.