A
Adam
Guest
I Built an AI That Judges Your Drawings lol
Here's what happened when I got tired of unfair drawing games
The Problem Was Driving Me Crazy
You know those online drawing games? The ones where you spend five minutes making a perfect cat and nobody guesses it. But then your friend draws three lines and wins because their buddy "gets it."
That happened to me one too many times.
So I built something different. An AI that judges your drawings instantly and fairly.
Here's How It Works
The AI looks at your drawing and gives you a score in seconds. No waiting for people to guess. No politics. Just you vs the art judge.
You can play with up to 7 friends at once. Everyone draws the same thing. Best score wins.
And you can watch everyone else draw while you're drawing. It gets intense.
Try it here β
The Technical Stack
Built this as a web app using Next.js 14 and WebRTC. Here's what it does:
Real-Time Canvas Synchronization
- 8 simultaneous HTML5 canvases streaming drawing data via WebRTC
- Sub-100ms latency for stroke replication across all clients
- Delta compression for drawing events to minimize bandwidth
- Canvas state recovery when players drop/rejoin mid-game
WebRTC Data Channels
- Peer-to-peer drawing data transmission
- Voice chat integration (optional)
- Connection fallback through TURN servers
- Handles network drops gracefully
AI Integration
- Canvas-to-image conversion on the client
- Real-time image analysis via REST API
- Multi-criteria scoring (accuracy, creativity, technique)
- Confidence intervals for edge case handling
Live Commentary System
- Azure Speech Services for text-to-speech
- AI-generated commentary based on drawing progress
- Real-time narration of player actions and scores
- Dynamic voice modulation for different game events
Game State Management
- Server-authoritative scoring and timing
- Real-time leaderboard updates
- Player authentication and persistence
- Room management with invite codes
Performance Optimizations
- Canvas virtualization for memory efficiency
- Selective rendering updates (only dirty regions)
- WebGL acceleration where supported
- Smart throttling of drawing events
Current Status: Beta & Looking for Feedback
Right now Artbitrator is in beta. The core tech works - you can draw, compete, and get AI scores in real-time. But I'm actively looking for feedback from other developers.
What's Working Well:
- WebRTC connections are stable across different networks
- Canvas performance handles 8 simultaneous drawings smoothly
- AI scoring is consistent and fast (under 2 seconds)
- Azure Speech Services provides smooth live commentary
- Next.js SSR plays nicely with real-time features
What Could Be Better:
- Mobile touch drawing needs work
- AI sometimes misses obvious drawings
- Connection recovery could be more graceful
- Need better handling of network edge cases
Tech Stack Details:
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Real-time: WebRTC data channels + signaling server
- Canvas: HTML5 Canvas API with custom drawing engine
- AI: REST API for image analysis and scoring
- Speech: Azure Speech Services for live commentary
- State: Zustand for client state, PostgreSQL for persistence
- Auth: Clerk for user management
- Deployment: Docker containers on cloud infrastructure
If you've built similar real-time multiplayer web apps, I'd love to hear about your approach to the networking challenges.
Try the Beta & Give Feedback
The beta is live and working. Quick signup with social logins:
artbitrator.10kv.games
I'm especially interested in feedback on:
- WebRTC connection stability on your network
- Canvas drawing performance on your device
- How the AI commentary sounds and feels
- Any bugs or edge cases you find
- Ideas for improving the AI judging
Feel free to test it with friends and let me know how it performs!
Email feedback to [email protected]
The Bottom Line
What started as me being annoyed at drawing games turned into a full-stack real-time web application.
Next.js + WebRTC + Canvas API + AI = surprisingly powerful combination for creative multiplayer games.
The web platform can handle way more than people think.
Built something similar with WebRTC? Or thinking about AI-judged creative competitions? Let me know in the comments.
Tags: #nextjs #webrtc #canvas #ai #gamedev #multiplayer #webdev #realtime
Continue reading...
