What I Built
For this challenge, I built a 3D Matrix Icosahedron Water Shader, an interactive digital art piece that merges geometry, animation, and procedural texture design into a single immersive experience. The project centers around a rotating icosahedron whose faces shimmer with a living, animated water texture. Surrounding it is a drifting field of Matrix‑style glyphs — glowing green characters that fall through space at varying depths, creating the illusion of digital rainfall.
What makes this project unique is that it does not rely on any 3D library. No Three.js. No WebGL frameworks. Instead, the entire rendering pipeline — projection math, lighting, painter’s algorithm, texture simulation, and particle field — is implemented manually using the HTML Canvas 2D API.
This project began as a simple Three.js experiment, but it evolved into something far more ambitious: a personal exploration of how far I could push raw canvas rendering while still achieving a sense of depth, motion, and atmosphere. It became a blend of shader art, geometry study, and cyberpunk aesthetics — a digital sculpture that feels alive.
Completing it for the GitHub Finish‑Up‑A‑Thon Challenge gave me the motivation to turn a half‑finished prototype into a polished, expressive piece of interactive art.
Demo
You can explore the full interactive demo here:
Live Demo: Add your Netlify / Vercel / GitHub Pages link
Source Code: Add your GitHub repository link
When the demo loads, you’re greeted by a dark, atmospheric void. At the center floats the icosahedron, rotating slowly as light glides across its faces. Each triangular panel displays a procedurally generated water texture created on an off‑screen canvas. The ripples shift and refract as the shape turns, giving the illusion of liquid flowing across a geometric surface.
Around the shape, Matrix‑style glyphs drift downward in three‑dimensional space. Each glyph has its own depth, speed, and color variation, creating a layered field of motion. The effect is hypnotic — a blend of digital rain and geometric sculpture.
The demo is fully interactive:
Click and drag to orbit the camera
Scroll to zoom in and out
Observe how the water shader reacts to rotation
Watch the glyphs drift past the shape in perspective
Even without a 3D engine, the illusion of depth is strong thanks to custom projection math and painter’s‑algorithm face sorting.
For your DEV post, consider adding:
A screenshot of the icosahedron mid‑rotation
A close‑up of the water texture
A wide shot showing the glyph field
A short GIF of the rotation
These visuals help readers appreciate the technical and artistic depth of the project.
The Comeback Story
Like many creative projects, this one started strong and then stalled. The original version was built in Three.js — a rotating polyhedron, a few shader tweaks, and a particle field. It looked promising, but it never felt complete. The code was messy, the performance inconsistent, and the visual identity unclear. It was a prototype with potential, but not a finished piece.
When the GitHub Finish‑Up‑A‑Thon Challenge was announced, it gave me the perfect reason to return to the project. Instead of patching the old version, I made a bold decision: rebuild everything from scratch without any 3D library.
That decision changed everything.
Rewriting the renderer forced me to understand the math behind the visuals — projection, rotation matrices, face normals, painter’s algorithm ordering, and lighting calculations. What Three.js once handled automatically, I now had to implement manually. It was challenging, but it also gave me complete creative control.
The water shader became the heart of the project. I built it using an off‑screen canvas that generates animated gradients, ripples, and noise. Each frame, the texture shifts subtly, giving the illusion of liquid flowing across the triangular faces.
The Matrix glyph field also evolved. Instead of simple falling characters, each glyph now has depth, perspective scaling, and color variation, creating a sense of drifting through a digital storm.
By the time I finished, the project had transformed from a half‑finished demo into a fully realized piece of interactive digital art. The Finish‑Up‑A‑Thon didn’t just motivate me to complete the project — it pushed me to elevate it far beyond what I originally imagined.
My Experience with GitHub Copilot
GitHub Copilot played a major role in helping me finish this project. While the rendering engine itself was hand‑crafted, Copilot supported the process in several important ways:
Rapid prototyping: Copilot helped me sketch out utility functions, math helpers, and boilerplate faster than writing them manually.
Debugging assistance: When I hit projection or rotation issues, Copilot suggested alternative formulas or ways to structure the math.
Refactoring support: As the codebase grew, Copilot helped reorganize functions, reduce duplication, and improve readability.
Creative exploration: When I wanted to experiment with new visual effects — like noise overlays or ripple patterns — Copilot offered variations that sparked new ideas.
Copilot didn’t write the project for me, but it acted like a collaborative partner — speeding up the tedious parts so I could focus on the creative and mathematical challenges.
Closing Thoughts
This project represents the kind of creative coding I love most: a blend of math, art, and experimentation. Rebuilding the entire system without a 3D library pushed me to understand the fundamentals of rendering in a way I never had before. The result is something I’m proud of — not just visually, but technically.
The GitHub Finish‑Up‑A‑Thon Challenge gave me the push I needed to finish what I started, and GitHub Copilot helped me stay in flow throughout the process.
Top comments (0)