Code Example Gallery

Browse and run every p5.js sketch in the project — from the raw sensor waveform all the way to real-time heartbeat detection. Side quests are linked as reference docs.

⚠ WebSerial requires Chrome or Edge — Firefox and Safari will not work.

Stages

Stage 1
Raw Waveform Display
Connect to an ESP32 over USB, read a continuous stream of sensor values, and draw a live scrolling waveform on the canvas.
WebSerial Rolling buffer Canvas mapping
Open sketch
Stage 2
Clean Signal
Remove slow DC drift with a long-window baseline, then smooth out fast noise with a moving-average filter. Both the raw and cleaned traces are shown side-by-side.
DC offset removal Moving average Dual-trace display
Open sketch
Stage 3
Heartbeat Detection
Differentiate the cleaned signal to find zero-crossings, detect peaks above an amplitude threshold, and compute live BPM with a confidence score showing how regular the beats are.
Differentiation Peak detection BPM calculation Confidence score
Open sketch

Side Quests

Side Quest
Browser → ESP32
Send commands back to the ESP32 from the browser — toggle an LED, send text strings, or stream continuous control values over the same WebSerial connection.
Bidirectional serial LED control Command protocol
View guide
Side Quest
Bluetooth Streaming
Cut the cable. Stream sensor data wirelessly over Bluetooth LE and drive a NeoPixel ring from the browser without a USB connection.
BLE / Web Bluetooth NeoPixel Wireless streaming
View guide
Side Quest
WiFi Haptic Feedback
Send your heart-rate data to a cloud API, generate AI-driven haptic patterns via Claude, and actuate a vibration motor on the ESP32 over WiFi.
WiFi / HTTP Claude API Haptic motor Vercel serverless
View guide