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.
@damarberlari.bsky.social
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 · 2d 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 · 4d 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 · 5d 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 wk.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 wk.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 · 2w agoan 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 · 3mo 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.
Just 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
@damarberlari.bsky.social · 4mo agoLine 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
My 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...
Still 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!
@damarberlari.bsky.social · 5mo agoPlaying 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.
Playing 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.
I just made a step-by-step tutorial breaking down how I created the dithering visualization check it out at @codrops.bsky.social here:
codrops@codrops.bsky.social · 5mo agoYou can build visuals to turn heads. Or you can build them to explain complex ideas. Damar Aji Pramudita does the latter beautifully in his tutorial, where he breaks down how he turned dithering into a visual experience with Three.js, instancing, and custom shaders: tympanus.net/codrops/2026...
the 2nd part of my dithering visual article is finally out! 🔗 visualrambling.space/dithering-pa... this one mainly explores the threshold map and how it generates those unique visual patterns hope you enjoy this as much as I enjoyed making it! made with #threejs & #animejs
just added this dithering pattern animation to my @codepen.io codepen.io/damarberlari... you can play with the group spacing and the input color manually
@damarberlari.bsky.social · 8mo agoArrange - Rearrange started this as just another usual exploration with threejs & animejs but it turned out to fit yesterday’s #genuary, so consider this a participation for #genuary12