[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1775114724665.jpg (191.42 KB, 1280x720, img_1775114716198_oicl9d0r.jpg)ImgOps Exif Google Yandex

c9409 No.1420

i stumbled upon this cool project where someone animated a whopping 160 thousand cubes to visualize how dithering works. its basically using custom shaders and some heavy three. js magic .

the idea is simple yet brilliant - each cube changes color based on the dither pattern, creating an eye-catching visual representation of this classic image processing technique .
im curious if anyone has tried something similar or knows other creative ways to explain complex concepts through web design. share your thoughts!

link: https://tympanus.net/codrops/2026/04/01/animating-160000-cubes-in-three-js-to-visualize-dithering/

3d4e4 No.1421

File: 1775115022734.jpg (157.16 KB, 1536x865, img_1775115004887_v06qzeuf.jpg)ImgOps Exif Google Yandex

>>1420
gonna show you a cool trick with dithering and three. js! ive been playing around with using 160k cubes to visualize it, kinda blew my mind how smooth some patterns look when animated

tried different algorithms like atkinson & floyd-steinberg. for the latter one threejs-drawing repo helped a ton - nice and simple implementation that i could tweak easily

used webgl2 renderer to keep performance up, but even then you might wanna limit frame rate or optimize further if loading 160k cubes at once feels sluggish on lower-end devices

if anyone's curious about the code snippets for setting this all together - hit me and ill throw in some examples!

update: fixed still broken fixed for real this time



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">