@damarberlari.bsky.social
Continuing my exploration of the distance fields and the Jump Flooding Algorithm #threejs #animejs
@damarberlari.bsky.social · last wk.Next topic on my exploration list is something I bookmarked a long time ago: the Jump Flooding Algorithm. The algorithm builds a distance field, which tells you the distance and direction from each pixel to the nearest pixel of interest (usually called a seed). #threejs #animejs
some more static renders from the electric field + depth of field visualization, made with #threejs & #animejs
@damarberlari.bsky.social · last wk.combining my latest #threejs + #animejs visual explorations into one: an electric field visualization with shifting depth of field
I made an electromagnetic wave visualization using #threejs and #animejs 🔗 visualrambling.space/sketches/ele...
just uploaded the interactive version of this Truchet Rubik’s Cube for you to play with, here: 🔗 visualrambling.space/sketches/tru... #threejs #animejs
A 2D slice view showing how an oscillating charged particle propagates dynamic electric forces through space, forming a sine wave.
@damarberlari.bsky.social · 3w agonow adding a panel to edit the charged particle motion and a line helper to preview its motion path
now adding a panel to edit the charged particle motion and a line helper to preview its motion path
@damarberlari.bsky.social · 3w agonext, added an "Add Charge" button to drop new charged particles at random positions into the scene. It’s so satisfying to watch the field react to every drop.
next, added an "Add Charge" button to drop new charged particles at random positions into the scene. It’s so satisfying to watch the field react to every drop.
@damarberlari.bsky.social · 3w agoContinuing work on the electric field visualization! First phase: added a dynamic highlight ring on hover and drag for better interaction feedback.
Continuing work on the electric field visualization! First phase: added a dynamic highlight ring on hover and drag for better interaction feedback.
@damarberlari.bsky.social · 3w agotaking a break from the depth of field exploration, now going back to continue my work on the electrical field visualization, still need to polish some interaction before publishing it.
taking a break from the depth of field exploration, now going back to continue my work on the electrical field visualization, still need to polish some interaction before publishing it.
just uploaded the interactive version of this animation here: 🔗 visualrambling.space/sketches/poi... You can play with the parameters and see how they affect the results. and if you go to the homepage you can explore other visual explorations and stories I’ve made before. Enjoy!
@damarberlari.bsky.social · 4w agostill playing with this depth of field scatter particles thing, now to make Suzanne’s head appear and disappear in a cool way the parts in focus appear sharp, and as they go out of focus, they scatter into flying dots, which I think can have a cool entrance effect
still playing with this depth of field scatter particles thing, now to make Suzanne’s head appear and disappear in a cool way the parts in focus appear sharp, and as they go out of focus, they scatter into flying dots, which I think can have a cool entrance effect
@damarberlari.bsky.social · 4w agowhat i like about this method is that you can crank up the parameter and get a new look. for example, here the particles get scattered so much in the out-of-focus area that they appear disassembled instead of blurred.
what i like about this method is that you can crank up the parameter and get a new look. for example, here the particles get scattered so much in the out-of-focus area that they appear disassembled instead of blurred.
@damarberlari.bsky.social · 4w agoFinally got the chance to try the dof with scattered particles method in this article I stumbled upon a week ago. inconvergent.net/2019/depth-o... This is just a simple test and not the exact same implementation, but I like it and will probably explore it a bit more.
Finally got the chance to try the dof with scattered particles method in this article I stumbled upon a week ago. inconvergent.net/2019/depth-o... This is just a simple test and not the exact same implementation, but I like it and will probably explore it a bit more.
slowly stitch everything together - add / move / delete the charged particles, edit their motion properties, and edit the field's shape & color properties
@damarberlari.bsky.social · last mo.some of my favorite results from playing with the field’s shape and color parameters. the shape parameter was just meant to tweak the standard field arrow, but it ended up creating these alternative shapes I also like (you have too zoom in to see the details though).
some of my favorite results from playing with the field’s shape and color parameters. the shape parameter was just meant to tweak the standard field arrow, but it ended up creating these alternative shapes I also like (you have too zoom in to see the details though).
@damarberlari.bsky.social · last mo.adding more parameters to my electric field visualization,this time to control the field’s shape and color.
adding more parameters to my electric field visualization,this time to control the field’s shape and color.
added more particles and colors to my electric field visualization and now it makes these beautiful patterns. made with #threejs and #animejs
@damarberlari.bsky.social · last mo.an attempt to recreate 3blue1brown electric field visualization with #threejs and #animejs
Recently I explored #animejs’s new #threejs adapters (animejs.com/documentatio...), and made this interactive sketch here: 🔗 lnkd.in/gRaydgks Type to pull letters from the letter swarm and arrange them into words. Certain words will trigger extra animations, so go play around with it!
I just published an interactive version of this Truchet Patterns animation: 🔗 visualrambling.space/sketches/tru... You can tap the canvas to shuffle the cubes' rotations and refresh the patterns. You can also adjust the zoom, color modes, and animation speed to your liking. Enjoy!
@damarberlari.bsky.social · 4mo agoPlaying around with Truchet patterns using #threejs and #animejs. The overall pattern is formed by cubes with 6 different pattern variations on their faces. Rotating the cubes results in completely new larger pattern designs.
I wrote about the Victorian history, physical sensor mechanisms, and networked logic of traffic lights! This is the fifth installment in the "How The Heck" series, following QR codes, GPS, Shazam, and solar panels. Hope you enjoy it! perthirtysix.com/how-the-heck-do-traffic-lights-work
Revisited my old work on spherical helix paths and just published a new interactive version: 🔗 visualrambling.space/sketches/mov... In this one, the cube sequence follows a Clelia curve, another path that wraps beautifully around a sphere. Made with #threejs and #animejs
An interactive version of this Penrose Stairs animation is now available here: 🔗 visualrambling.space/sketches/penrose-stairs/ I’m planning to post short sketches like this more regularly between my longer visual stories. Hope I can stay consistent with these
@damarberlari.bsky.social · 4mo agoThe Penrose Stairs: an optical illusion where a staircase seems to keep ascending or descending in a continuous loop. It gives impresion that the last stair is connected to the first, even though they’re actually drawn apart. Another exploration with #threejs and #animejs.