Physical
Etch-A-Sketch
Control a digital canvas by tilting an ESP32. Tilt to draw, shake to clear. Hardware nostalgia meets web technology.
The Story
I Missed Playing With Real Toys
There's something deeply satisfying about physical controls. Touch screens are great, but they don't have that same tactile feedback as turning a knob or tilting a device in your hands.
I had an ESP32 board collecting dust and an MPU6050 accelerometer from another project. One afternoon, I wondered: what if I could use physical tilting to control something on screen? The Etch-A-Sketch was the obvious answer — it's the OG tilt-controlled drawing toy.
The result is this project: a web-based canvas that responds to how you physically tilt the ESP32. Tilt left, the brush goes left. Tilt forward, it goes up. And the best part? Shake the device to clear the canvas — just like the real toy.
Is it practical? Not really. Is it fun to show people? Absolutely. Sometimes that's the whole point.
The Numbers
Performance Specs
Live Demo
Try It Yourself
Connect to the ESP32 device via WebSocket and start drawing. The canvas responds to the accelerometer data in real-time. No device? The canvas still works — you just won't have the magic tilt controls.
*Requires access to the physical ESP32 device to control the brush
How It Works
The Tech Stack
Hardware Side
- ESP32 — WiFi-enabled microcontroller with dual cores
- MPU6050 — 6-axis accelerometer/gyroscope combo
- I2C Protocol — For sensor communication
- WebSocket Server — Running on port 81
Tilt to draw
Shake to clear
Software Side
- React + TypeScript — For the web interface
- HTML5 Canvas — For smooth drawing rendering
- WebSocket Client — Receives real-time sensor data
- Shake Detection — Algorithm monitors acceleration spikes
Under the Hood
The Arduino Magic
The ESP32 reads accelerometer data and broadcasts it over WebSocket. Here's the core loop that makes it all work:
void loop() {
webSocket.loop();
// Read accelerometer data
sensors_event_t a, g, temp;
mpu.getEvent(&a, &g, &temp);
// Format: "accX,accY,accZ"
String data = String(a.acceleration.x) + ","
+ String(a.acceleration.y) + ","
+ String(a.acceleration.z);
// Broadcast to all connected clients
webSocket.broadcastTXT(data);
delay(10); // ~100Hz update rate
}Features
What Makes It Fun
Tilt to Draw
The MPU6050 accelerometer detects X/Y tilt angles, translating physical movement into brush strokes.
Shake to Clear
Just like the real thing! Shake the device and the canvas clears. Nostalgia meets novelty.
WebSocket Connection
Real-time data streaming over WiFi. Sub-50ms latency for responsive drawing.
ESP32 Powered
Dual-core processor handles sensor reading and WiFi simultaneously without breaking a sweat.
Open Source
Arduino code for the ESP32 and React/TypeScript for the web app. Hack away!
Zero Latency Feel
Optimized data packet size and processing for a smooth, lag-free drawing experience.
The Point
Why Build This?
Sometimes the best projects are the ones that don't need to exist. This was a weekend experiment to bridge physical hardware with web technology — and it turned out to be one of the most satisfying demos I've built.
There's something magical about tilting a small circuit board and watching lines appear on a screen across the room. It's the kind of thing that makes non-technical people go "wait, how?" — and that reaction never gets old.
Plus, I finally got to use that dusty ESP32. Win-win.
Brian Stever