damarberlari.bsky.social @damarberlari.bsky.social · 25/09/2026Another thing I learn about distance fields: they’re useful for making soft shadow 030
damarberlari.bsky.social @damarberlari.bsky.social · 21/09/2026Only later I realized that distance fields are composable, meaning I can compute the fields for individual letters, then just take the min value of overlapping fields to get the final fields for the whole canvas. This avoids recalculating the fields on every movement. made with #threejs & #animejs 010
damarberlari.bsky.social @damarberlari.bsky.social · 21/09/2026I just uploaded the distance fields visual sketch here: 🔗 visualrambling.space/sketches/distance-fields This is a fun exploration. Initially I tried to build the distance fields for the whole canvas in one go, but then I needed to recalculate them every time the letters were repositioned. 130
damarberlari.bsky.social @damarberlari.bsky.social · 17/09/2026Continuing my exploration of the distance fields and the Jump Flooding Algorithm #threejs #animejs 041
damarberlari.bsky.social @damarberlari.bsky.social · 09/09/2026Next 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 030
damarberlari.bsky.social @damarberlari.bsky.social · 08/09/2026some more static renders from the electric field + depth of field visualization, made with #threejs & #animejs 030
damarberlari.bsky.social @damarberlari.bsky.social · 08/09/2026combining my latest #threejs + #animejs visual explorations into one: an electric field visualization with shifting depth of field 060
damarberlari.bsky.social @damarberlari.bsky.social · 04/09/2026I learned about Maxwell's equations and EM waves a long time ago, but I must admit I didn't really get it back then. Recently I revisited the topic and I think I understand it a bit better. Just enough to make this visualization, but I'd probably still get an E :D 010
damarberlari.bsky.social @damarberlari.bsky.social · 04/09/2026I made an electromagnetic wave visualization using #threejs and #animejs 🔗 visualrambling.space/sketches/ele... 130
damarberlari.bsky.social @damarberlari.bsky.social · 02/09/2026just uploaded the interactive version of this Truchet Rubik’s Cube for you to play with, here: 🔗 visualrambling.space/sketches/tru... #threejs #animejs 170
damarberlari.bsky.social @damarberlari.bsky.social · 01/09/2026A Truchet Rubik’s Cube: Each face contains a variation of a Truchet pattern, so any orientation still results in a continuous pattern. Made with #threejs and #animejs. 0101
damarberlari.bsky.social @damarberlari.bsky.social · 30/08/2026A 2D slice view showing how an oscillating charged particle propagates dynamic electric forces through space, forming a sine wave. 020
damarberlari.bsky.social @damarberlari.bsky.social · 29/08/2026now adding a panel to edit the charged particle motion and a line helper to preview its motion path 040
damarberlari.bsky.social @damarberlari.bsky.social · 28/08/2026next, 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. 030
damarberlari.bsky.social @damarberlari.bsky.social · 27/08/2026Continuing work on the electric field visualization! First phase: added a dynamic highlight ring on hover and drag for better interaction feedback. 010
damarberlari.bsky.social @damarberlari.bsky.social · 26/08/2026taking 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. 010
damarberlari.bsky.social @damarberlari.bsky.social · 26/08/2026nice, thanks for sharing it! I’ll surely check that out 000
damarberlari.bsky.social @damarberlari.bsky.social · 25/08/2026just 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! 090
damarberlari.bsky.social @damarberlari.bsky.social · 25/08/2026no idea how the compression seems to have a mild effect here, haha. or maybe the compression is what makes the out of focus area looks better here 000
damarberlari.bsky.social @damarberlari.bsky.social · 25/08/2026oh wow that looks so great, are the particles procedurally generated? in my case, i sampled the surface of a mesh 100
damarberlari.bsky.social @damarberlari.bsky.social · 24/08/2026still 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 0110
damarberlari.bsky.social @damarberlari.bsky.social · 22/08/2026what 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. 0466
damarberlari.bsky.social @damarberlari.bsky.social · 21/08/2026Finally 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. 1141
damarberlari.bsky.social @damarberlari.bsky.social · 20/08/2026slowly stitch everything together - add / move / delete the charged particles, edit their motion properties, and edit the field's shape & color properties 130
damarberlari.bsky.social @damarberlari.bsky.social · 19/08/2026some 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). 030
damarberlari.bsky.social @damarberlari.bsky.social · 18/08/2026adding more parameters to my electric field visualization,this time to control the field’s shape and color. 0100
damarberlari.bsky.social @damarberlari.bsky.social · 14/08/2026added more particles and colors to my electric field visualization and now it makes these beautiful patterns. made with #threejs and #animejs 050
damarberlari.bsky.social @damarberlari.bsky.social · 12/08/2026an attempt to recreate 3blue1brown electric field visualization with #threejs and #animejs 000
damarberlari.bsky.social @damarberlari.bsky.social · 23/07/2026just published this sketch here 🔗 visualrambling.space/sketches/cube-trail/ made with #threejs and #animejs 120
damarberlari.bsky.social @damarberlari.bsky.social · 16/07/2026Playing with a new sketch. Made with #threejs and #animejs 061
damarberlari.bsky.social @damarberlari.bsky.social · 14/07/2026Recently 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! 010
damarberlari.bsky.social @damarberlari.bsky.social · 04/06/2026I 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! 030
damarberlari.bsky.social @damarberlari.bsky.social · 02/06/2026Playing 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. 0142
Reposted by @damarberlari.bsky.socialshri @shrikhalpada.dev · 27/05/2026I 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 45011
damarberlari.bsky.social @damarberlari.bsky.social · 20/05/2026oh my, what a coincidence, haha I have one topic on my pipeline, still need some time to finish it 000
damarberlari.bsky.social @damarberlari.bsky.social · 20/05/2026Revisited 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 110
damarberlari.bsky.social @damarberlari.bsky.social · 15/05/2026An 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 040
damarberlari.bsky.social @damarberlari.bsky.social · 12/05/2026The 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. 040
damarberlari.bsky.social @damarberlari.bsky.social · 05/05/2026Just published an interactive version of this animation where you can play with the initial/target layouts and colors. Check it out here: 🔗 visualrambling.space/sketches/par... made with #threejs and #animejs 041
Reposted by @damarberlari.bsky.socialshri @shrikhalpada.dev · 05/05/2026My next "how the heck?" piece is live, and it's all about solar panels! It interactively covers the physics, infrastructure, and economics of solar energy in (hopefully) an approachable way. I learned a ton working on it and hope you have fun looking through it. perthirtysix.com/how-the-heck... 2267
damarberlari.bsky.social @damarberlari.bsky.social · 28/04/2026Line break-dancing: A comparison of how the Greedy and Knuth-Plass algorithms handle line breaks. Part of my next visual article on the line-breaking algorithms, coming soon! Made with #threejs and #animejs 0594
damarberlari.bsky.social @damarberlari.bsky.social · 16/04/2026Still playing with the Knuth-Plass algorithm visualization. The algorithm finds the “shortest path” through a graph of potential line breaks. Shortest here doesn’t actually mean the fewest lines, it means the path with the least “demerits”. Will talk more about this in the next visual article! 090
damarberlari.bsky.social @damarberlari.bsky.social · 07/04/2026Playing with the Knuth-Plass algorithm and I think it’s an interesting algorithm to visualize! Unlike the greedy approach, it look at the whole paragraph and optimize the breakpoints so that the layout might shift when a new word is added. 0132
damarberlari.bsky.social @damarberlari.bsky.social · 01/04/2026I just made a step-by-step tutorial breaking down how I created the dithering visualization check it out at @codrops.bsky.social here: 081
damarberlari.bsky.social @damarberlari.bsky.social · 05/03/2026So recently I've been re-exploring the Fourier Transform. I learned about it a long time ago, but didn't realize it could be applied to images too. It's fascinating to see how sine wave patterns can add together to form an image. made with #animejs and #threejs 0121
damarberlari.bsky.social @damarberlari.bsky.social · 11/02/2026have you tried @animejs.com? this is my go to library for making animation, and it has support for scroll driven animation as well its homepage is a demo of the scrollytelling itself: animejs.com not sure about react support though, but I think you should be able to integrate themanimejs.comAnime.js | JavaScript Animation EngineA fast, multipurpose and lightweight JavaScript animation library 000
