So 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
have 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 them
hey thanks man! you can check @puddingviz.bsky.social and @samwho.dev for some inspirations!
Thanks! Of course, feel free to share this!
thanks! and true, some sources I read are using normalized threshold, so for 4x4 they are using 0.2, 0.4, 0.6, 0.8 resulting in 5 shades.
but it makes big areas in my image pure black and dont look good
I guess in the end we might need to adjust the input brightness/threshold to get a good result
haha, sorry and thanks!
the first part:
bsky.app/profile/dama...
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
thank you!
thanks!
I write them from scratch, with threejs (for drawing the 3d objects) and animejs (to animate them)
I dont use any framework for now, but I might use (or maybe build) one if I’m sure I can do this consistently. Still a long way though
the first part is available here:
visualrambling.space/dithering-pa...
Almost finished the second part of my Dithering visual article!
this one will discuss threshold maps and how they form the dithering patterns
still need to do a bit more polishing, but should be able to finish it by next week. here's a small snippet for now!
made with #threejs + #animejs
Arrange - 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
ahh thats why I got more traffic today, thanks for letting me know, and glad you like it!
Thank you @chezvoila.com for sharing, glad you like it!
thank you @aman.bh, I also love your works at diagramchasing.fun!
thank you for your kind words
The Dithering article is one of the three winners of The Pudding Cup this year!
@puddingviz.bsky.social has always been my source of inspiration when making visual articles, so I’m really happy about this!
Go check the other winners on their website! pudding.cool/pudding-cup/
hi Carin, thank you for your kind words,
and thanks for sharing, glad you and the others like it!
Experimenting with different types of threshold maps for ordered dithering.
this close-up shows how unique the patterns produced by each one are.
made with #threejs & #animejs
thank you! part 2 also took longer than expected :D but I’ll finish it for sure. please wait!
thanks! several people have asked me to enable RSS on my site, so I added it just now :)
visualrambling.space/rss.xml
Please let me know in case it doesn’t work
thanks for sharing!
thank you! will submit then
is visual story (but not data-driven) also eligible to enter?
i wanted to submit mine but not sure if this qualifies: visualrambling.space/dithering-pa...
hi, honestly I’m not that active here, so a bit hesitant to put my bluesky profile there. but I’m considering it now.. thanks for the suggestion!
hey, thanks for sharing! I’m not really active here at Bluesky but maybe I should, haha
finally published this visual article on dithering (part 1)!
I had so much fun and learned a lot while making this. not only about dithering, but also about @threejs.org shaders.
as usual, animated with @animejs.com
enjoy!
🔗 visualrambling.space/dithering-pa...
almost finished the first part of my next visual article on dithering, created with #threejs & #animejs
it took much longer than expected, so i decided to split it into 3 parts (otherwise i’ll never finish this 😅)
anyway, 1st part should be ready next week! here’s a snippet:
