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!

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:

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

Anime.js | JavaScript Animation Engine A fast, multipurpose and lightweight JavaScript animation library

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

Dithering - Part 1 Understanding how dithering works, visually.

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!

visualrambling.space Just a place to ramble visually

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!