Gridform
Design Engineering
A playground for merging patterns, noise maps, and character sets, where ASCII becomes motion, experimentation turns into discovery, and every tweak creates something completely new.
Role
Visual Designer
Developer
Timeline
Summer 2025
Skills
Interaction Design
Visual Design
Tools
Figma
HTML
CSS
JavaScript
Where It All Started
It began the way many ideas start: with a late-night doomscroll.
Pinterest kept feeding me these beautifully chaotic visuals—retro monitors, CRT distortions, grainy textures, and ASCII-based motion graphics that felt pulled straight out of early anime HUDs or ‘90s terminals.
There was something hypnotic about them.
Something oddly warm and nostalgic.
But the more I saw, the more I wondered:
Where are these designers getting these ASCII textures?
Are they hand-making everything? Using niche plugins? Shader tools? What’s the workflow here?
The deeper I dug, the clearer the gap became.
There were ASCII generators… but they were mostly static, rigid, or overly simplistic. None of them captured the dynamic movement or expressive motion I’d been seeing. None of them let you experiment. None of them felt like a space.
That’s when the idea clicked:
What if I built the tool I couldn’t find?
Finding a Gap I Wanted to Fill
The nostalgia trend isn’t subtle—it’s everywhere. But the tools supporting that aesthetic felt stuck in a different era. Most ASCII sites were built around novelty, not creativity. They weren’t designed for designers or motion artists. They weren’t trying to innovate.
I wanted something more open-ended.
Something that let you layer visuals the way you might layer audio—combining, distorting, mixing, breaking, looping. Traditional ASCII generators output a single pattern. I wanted a tool that could output infinite patterns. A generative playground instead of a static converter.
That became the foundation of GridForm.
Diving into Creative Coding
Right as this idea was forming, I fell into the world of creative coding—p5.js sketches, generative patterns, motion systems, everything that blends math with expression.
It made perfect sense to lean into that approach.
ASCII art is inherently grid-based. p5.js thrives on grids, loops, motion, and endless experimentation. The two worlds clicked.
The plan was to use:
React for the interface
shadcn/ui for fast component building
p5.js for the generative core
But after spending two days fighting their incompatibilities, I hit a wall. Even simple sketches were glitching. The workarounds felt hacky and exhausting.
It dawned on me:
I was spending more time making the tools work together than actually building the project.
So I asked myself what would make the project fun again.
And the answer wasn’t React.
Scrapping everything and rebuilding using vanilla HTML, CSS, JS, and p5.js was a reset button. It brought back the playfulness and immediacy I wanted from the start. Suddenly the project felt more like tinkering and less like debugging.
The Moment Everything Changed
My first experiment was simple:
What happens if I let people choose different character sets for the patterns?
It worked. It was fun. But it wasn’t enough.
That’s when the idea hit me:
What if instead of combining characters… I combine entire patterns?
And what if I let users choose how those patterns merge?
The first time I tried it, two animations overlapped, clashed, and blended in ways I didn’t expect.
Patterns weren’t just layering—they were interacting.
Noise maps pushed characters into motion.
Algorithms created rhythms.
The grid felt alive.
It was chaotic, but in a beautiful way.
And that chaos became the heart of GridForm.
Designing a Space for Play
Even though this was a passion project, I approached the UX as if I was designing a full product. ASCII art is visually dense—there’s a lot happening at once—so the UI needed to stay grounded, calm, and unobtrusive.
A single vertical sidebar became the anchor.
Simple. Tall. Easy to scan. Out of the way.
Pattern Sources
Pattern A
Pattern B
Characters
Noise maps
Blending Controls
Merge algorithm
Merge intensity
Animation speed
Aesthetic Controls
Colors
Light/dark mode
Grid density
Utility Tools
Webcam-to-ASCII
Lock from randomization
Pattern code
Export options
Making It Actually Work
Performance was the one part of this project I underestimated dramatically.
ASCII generation seems simple, but redrawing thousands of characters in real-time is not a small task. Early versions of GridForm made my laptop sound like it was auditioning for takeoff. The battery would drain rapidly, and Chrome would warn me that the page was “using significant energy.”
To fix it, I had to:
Reduce unnecessary frame-by-frame recalculations
Cache values instead of recomputing everything
Throttle mouse interactions
Stop animations the moment the browser tab loses focus
Rewrite several heavy functions with the help of Cursor AI
Rethink how grids render at different sizes
These optimizations turned GridForm from “fun experiment that kills your laptop” into a tool people could actually use for hours.
Where It All Started
Sharing GridForm with the world was unexpectedly rewarding.
I posted it to Reddit almost casually.
No polished promo, no trailer, just:
Hey! I made this thing…
But the community immediately understood it—and more importantly, used it.
Designers created posters.
Motion artists turned patterns into loops.
Developers broke it down to learn generative art.
A few people even piped it into After Effects to use as animated matte layers.
The fact that the tool needed no onboarding and no documentation told me the UX was working.
GridForm didn’t need instruction.
It invited experimentation.
Cool Stuff People Said
I can definitely see myself using this for creative personal projects or just out of boredom. The biggest draw for me is the experimentation and trying all the different knobs to see their effects.
This tool is a ASCII goldmine I'm so happy
This is pretty awesome! Nicely done!
hypnotizing **, very nice
Super awesome. Now to figure out how to make this my website hero background...
Dude, gotta say, mad props for doing what most of us just dream about or vow to do "someday." Your tool is dope! ASCII art has been itching for a glow up and you just nailed it! You rock, man! 🙌
That is fascinating and awesome! I will absolutely use this for something sometime soon, but am not entirely sure what!!
A Completely Unexpected Honor
Submitting GridForm to the Communication Arts Interactive Competition felt like a long shot. It was passion-driven, messy in the right ways, experimental—far from a traditional polished “product.”
But out of 252 entries, GridForm was selected as one of six student winners of the Award of Excellence.
It’ll be published in the March/April 2026 issue.
Seeing something born from curiosity turn into recognized work was both surreal and grounding.
Looking Back
GridForm holds a special place in my design practice.
It’s the project that reminded me why I love building things that don’t fit neatly into categories—too code-heavy to be “just design,” too expressive to be “just programming.”
The nostalgia that inspired GridForm wasn’t about looking backward—it was about rediscovering the joy of tinkering. Of watching patterns emerge from simple characters. Of letting creativity be messy and unpredictable.
Creative coding unlocked something I didn’t realize I was missing.
And GridForm is just the beginning of that exploration.
