Alternatives
Products that do what Creating flowing particle animations out of images (JS and WebGL) does
Hi! I'm Alan, and I built a website that turns images into flowing particle animations. This javascript / WebGL tool creates particle animations out of any image in real-time within the browser, with particles that dynamically respond to edge detection and flow fields. It uses Sobel edge detection, a Perlin noise flow field, and webGL / GLSL for better performance. The tool is completely free and open source (MIT license). Github repo: https://github.com/collidingScopes/particular-drift Let me know of any feedback or suggestions for improvement.
- 1
- 2RT
2023 · antimatter15.com
- 3CA
2022 · animatize.com
- 4AM
Hello HN! We’re a small creative studio specializing in real-time 3D experiences. Netlify approached us to design and build an interactive experience to celebrate reaching 5 million developers. Inspired by the classic game Marble Madness, we created a gamified experience where users control a ball through playful, interactive levels. The goal was to blend marketing content with the look and feel of a game to engage users. The app is built with Three.js [1], using our custom render pipeline and shaders, and uses Rapier for physics simulation [2]. The 2D content is overlaid on the WebGL view…
2024 · 5-million-devs.netlify.com
- 5IB
2019 · pqina.nl
- 6
Transform Static Images Into Dynamic Particle Experiences
12d ago · particle-studios.vercel.app
- 7S2
Had some fun with shared array buffers over many months of free time. Skip to the end to play around with the final app. Open to ideas on how to simulate more whilst staying in js land.
2024 · dgerrells.com
- 8IM
I was fascinated by this [0] and this video [1]. After many struggles, I finally built this app that traces images using circles similar to what these videos had shown. The most challenging part (to me) is to find a way to convert images to vector lines. I had tried Potrace, but its output is not suitable for my use case: too many small elements share the same border. Potrace's goal is to represent the original image faithfully using vector lines. But I want to trace the image edges. After searching and trying some Potrace alternatives in vain, I finally found my keyword. Surprisingly (to…
2022 · phqb.github.io
- 9
- 10
- 11AS
The little particles will gravitate to your cursor (or touch location), and can even enter stable orbits if the conditions are right! Mainly an excuse for me to experiment with wasm and WebGL, but it makes for a surprisingly good fidget toy.
2024 · aestuans.github.io
- 12
- 13MC
The latest 3Blue1Brown video [1] about the M. C. Escher print gallery effect inspired me to re-implement the effect as WebGL fragment shader on my own. [1]: https://www.youtube.com/watch?v=ldxFjLJ3rVY
Apr 2026 · static.laszlokorte.de
- 14IM
2024 · cssgridgenerator.io
- 15EW
2020 · exophysics.net
- 16
- 17
- 18MF
2011 · demoseen.com
- 19WF
2014 · haxiomic.github.io
- 20
- 21VJ
2014 · velocityjs.org
- 22RA
Hey HN! We're Ben and Izak, founders of Repaint (YC S23). Repaint is like Figma, but for creating real websites. It has panning, zooming, and dragging elements around. The settings closely follow html/css. We think an open canvas is a big improvement over other website builders. Everything is easier: styling, consistency, responsiveness… But making it work was hard! We thought HN would appreciate the tech behind it: - A custom WebGL rendering engine (w/text, shadows, blurs, gradients, & opacity groups) - A partial implementation of the css spec - A custom text editor & text shaper…
2024 · repaint.com
- 23TV
This tool turns videos into ASCII pixel art. You can use your webcam feed or upload a video, then use the controls to adjust the colors, resolution, text style, etc. Github repo: https://github.com/collidingScopes/ascii It's built with javascript / html canvas. I'll be continuing to work on this, with the goal of improving performance (it can be laggy at high resolutions) and to also allow image input (turn an image into animated ASCII art). Please let me know of any feedback or suggestions!
2024 · collidingscopes.github.io
- 24AI
(space = reset) Fluid mechanics is an extremely interesting topic and I have been creative coding for a couple of months now. Therefore I started working on flow fields in processing. It had so much fun playing around with the different parameters in this project, I decided to rewrite in p5.js an added a control panel. You can change most of the parameters (within some constraints I thought to be reasonable), randomize the values and export and import settings. Hopefully some coders here get inspired and also join the great creative coding community.
2024 · synapse.nugatio.com
Ranked by how close each launch is in meaning, then by votes. Refine with a description →