Menu

Post image 1
Post image 2
1 / 2
0

ASCII Donut Math Animation — 30 Days Web Challenge Day 2

DEV Community·Muhammad Abdu ar Rahman·21 days ago
#KUsnDDzq
#nextjs#typescript#webdev#const#math#donut
Reading 0:00
15s threshold

Try it live at 30days.abduarrahman.com — and the source code is on GitHub . The Origin Every programmer has seen donut.c — the legendary C code that renders a spinning 3D torus using ASCII characters. It's a rite of passage. For Day 2 of the 30 Days Web Challenge, I wanted to bring this classic to the browser — not just as a static render, but as an interactive element with glitch effects and sound. The donut sits on the landing page as the "0" in "30 Days", and clicking it reveals hidden easter eggs. What I Built A real-time ASCII torus renderer with: Mathematical torus rendering — the classic sin/cos projection with z-buffer depth sorting and luminance mapping Smooth rotation — two rotation angles (A and B) increment each frame for continuous spinning Glitch mode — clicking the donut adds random rotation offsets and luminance scrambling Neon glow styling — cyan text with textShadow for that retro terminal feel Interactive easter egg — click the donut 5 times on the landing page to trigger an explosion with…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More