Menu

ASCII Donut Math Animation — 30 Days Web Challenge Day 2
🖼️

ASCII Donut Math Animation — 30 Days Web Challenge Day 2

DEV Community·Muhammad Abdu ar Rahman·6 months ago
#KUsnDDzq
#nextjs#typescript#webdev#const#math
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…

Continue reading — create a free account

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