Inspiration
I wanted to bring back the joy of chaotic, rule-free creativity — like doodling in notebooks or building messy Scratch projects. Most hackathons focus on MVPs and disruption, but I wanted a project that made tech fun, unpredictable, and playful, inspired by glitch aesthetics and AI art generators.
What I Learned
- Canvas API & JavaScript: Real-time drawing, mirrored strokes, paint blobs, and cursor trails.
- Randomness & UX Chaos: Using probabilities to make features unpredictable yet enjoyable.
- Audio Integration: Adding sounds that react to user actions.
- Interactive Design: Making a chaotic interface visually engaging and interactive.
I also explored CSS animations and DOM manipulation for AI-style popups and cursor effects.
How I Built It
- Canvas & Drawing: Implemented brush strokes using
ctx.moveTo()/ctx.lineTo(). - Random Features: Unpredictable colors, delayed undo, mirrored strokes, paint blobs.
- Interactive Chaos: Cursor trails, AI Art Score meter, self-destruct timer, and shuffle mode.
4. Audio & Export: Fun sounds per stroke and ability to download your chaotic masterpiece.
Challenges
- Performance: Multiple animations and mirrored strokes caused lag; optimized trail elements and animation loops.
* Balancing Chaos: Random features needed tuning — too much was overwhelming, too little was boring.
Fun Math
Feature probabilities kept things playful:
[P(\text{blob appears}) = 0.1, \quad P(\text{undo triggers}) = \frac{1}{3} \text{ to } \frac{1}{5}, \quad
P(\text{color changes}) = 1 ]
Outcome: A chaotic, interactive, and hilarious painting experience where every stroke is a surprise, every color is rebellious, and the AI judge is sarcastic. Pure fun over functionality — exactly what this hackathon needed.
Built With
- audio-api
- canvas-api
- css3
- file-api
- github
- html5
- javascript
Log in or sign up for Devpost to join the conversation.