Personal Project | Experimental | 2025
Reimagining Sky in ASCII.
An experimental weather visualization app that renders atmospheric conditions through ASCII-inspired canvas animations. Built to explore shader-like effects with web technologies and treat weather data as a medium for visual expression.
Why I Built This
Weather as visual medium.
Most weather apps treat conditions as data to display. I wanted to explore what happens when you treat weather as a canvas - where rain becomes falling characters, sun becomes a rotating sphere of light, and fog becomes drifting layers of opacity.
The ASCII aesthetic came from wanting something that felt both nostalgic and futuristic - like a terminal from a sci-fi movie that somehow renders beautiful atmospheric simulations.
Weather Animations.
Each weather condition has its own canvas-based animation system. Rain uses particle physics with splash effects, snow accumulates on text elements, and the sun rotates as a 3D sphere rendered with ASCII characters.
Moon Phase Mode.
Beyond weather, the app includes a moon phase visualizer with drag-to-scrub time travel. The moon surface is procedurally generated with noise, and the illumination accurately reflects the current lunar cycle.
Drag to explore phases
Dynamic Color System.
The app features 6 hand-picked color palettes that change the entire interface theme. Each palette has been designed with carefully chosen accent and background colors that work seamlessly with the dark aesthetic.
Try different palettes
Technical Highlights.
Canvas Rendering
All animations use HTML5 Canvas with optimized rendering loops. Particle systems are managed with object pooling to minimize garbage collection, and frame rates are throttled to 60fps for smooth performance.
Responsive Design
The interface adapts seamlessly from mobile to desktop with touch-optimized controls and dynamic canvas sizing. Particle counts scale based on viewport size for optimal performance.
Theme System
React Context manages global theme state with localStorage persistence. Color values are passed down to canvas elements for consistent theming across all animations.
What I Learned.
This project taught me that constraints breed creativity. By limiting myself to ASCII characters and canvas rendering, I had to think creatively about how to represent complex atmospheric effects. The resulting aesthetic feels unique and purposeful.
Performance optimization became a puzzle I enjoyed solving. Learning about requestAnimationFrame timing, object pooling, and canvas rendering optimization made me a better developer and resulted in butter-smooth 60fps animations.
Most importantly, this project reminded me why I love building things - the joy of seeing an idea come to life and work exactly as imagined. The app has become my daily weather check, which feels like the best validation.