AI Drawing Recognition Game

The AI Drawing Recognition Game is an interactive web-based game where users draw simple objects on a canvas and an AI-like recognition system analyzes the drawing in real time. The system predicts what the user has drawn based on stroke patterns and geometric analysis. Players earn points and build streaks by correctly drawing the prompted object.
This project demonstrates real-time canvas drawing, pattern recognition logic, and modern React hooks usage in a fun, gamified experience.

Screenshots

Key Features

Real-time canvas drawing with mouse and touch support
AI-based drawing recognition using geometric pattern analysis
Prompt-based gameplay with scoring and streak system
Live prediction list with confidence percentages
Drawing and erasing tools with adjustable brush size
Game stats including best streak tracking
Fully responsive UI for desktop and mobile
Start / End game controls with state management

Functionality

Users start the game and receive a random drawing prompt
The canvas captures stroke coordinates using useRef
Drawing patterns are analyzed using:
- Distance variance
- Corner detection
- Curve detection
- Sharp point detection
The system predicts the top matching shapes with confidence scores
Correct drawings automatically increase score and streak
The canvas resets for the next prompt
Players can erase, adjust brush size, or clear the canvas

Technology Used

React.js – Component-based UI
JavaScript (ES6+) – Logic and pattern recognition
HTML5 Canvas – Drawing and rendering
Tailwind CSS – Modern responsive styling
Lucide React Icons – UI icons
React Hooks – useState, useEffect, useRef

Why This Project Is Useful

Helps understand React Hooks (useState, useEffect, useRef) in a real-world scenario
Demonstrates canvas manipulation and drawing logic
Shows how AI-like behavior can be implemented without ML libraries
Great for internship tasks, portfolio projects, and interview discussions
Combines logic, UI/UX, and performance optimization in one project