At the end of last episode I told you to start thinking about what you'd build if your code could get up and walk around. Well, today it does exactly that -- and it takes you with it. We've spent this whole physical-world chapter making things that sit on a table or hang on a wall: plotted, laser-cut, projected, lit, printed. Every one of them needed a wall socket and a spot to live. Today the thing your code makes goes where you go. It's stitched into a jacket, wrapped round your wrist, sewn into a hat. We're making art you wear.
And here's the lovely part, the part that made me grin the first time it clicked: we already know how to do almost all of this. Way back in episode 109 we drove a strip of addressable LEDs from code. A wearable is that exact same strip -- only now the computer driving it is tiny, battery-powered, and riding along in your pocket. The screen was the sketchbook, the wall was the gallery, and your body is about to become the canvas. Allez, let's get dressed :-).
Let me start with the one idea that changes everything from episode 109. Back then we had two brains: your laptop was the artist (it decided the colours) and a microcontroller was the courier (it delivered them to the lights with exact timing). They talked over a cable or WiFi.
You cannot drag a laptop around behind a dancer. So for wearables we do something beautiful -- we squash both brains into one. The microcontroller becomes the artist and the courier. It generates the pattern and drives the lights, all by itself, running off a battery. No computer, no cable, no leash. Your code lives entirely inside a chip the size of a coin, humming away on your sleeve.
// the whole shift from episode 109, in one comment.
//
// EPISODE 109 (on a desk):
// laptop --colours--> microcontroller --> LEDs
// (artist) (courier)
//
// WEARABLE (on your body):
// microcontroller --> LEDs
// (artist AND courier, running off a battery, no laptop)
//
// the generative sketch you wrote in JS now lives INSIDE the chip.
The chip we reach for is the ESP32 -- the same little WiFi board from episode 109, a couple of euros, but genuinly a proper computer. It has enough muscle to run noise fields, colour maths, sensor reading and LED driving all at once, on a battery, forever. So the code below is going to look different from our JavaScript sketches: it's C++ for the Arduino toolchain, but the ideas are identical. Fill an array of colours, show it, repeat. You've done this since episode 1.
The bones of a light-up garment are simple. You take a length of WS2812B strip (the flexible, adhesive-backed kind from last episode), you route it along a seam of a jacket or the hem of a dress, you tuck an ESP32 and a battery in an inside pocket, and you run one data wire from the chip to the strip. That's a wearable. Everything else is refinement.
Here's the standalone sketch. Notice there's no serial port, no Node bridge, no laptop -- the ESP32 does the whole job on its own. This is the entire program for a glowing jacket.
// standalone wearable: ESP32 drives a strip of LEDs on a garment.
// no computer. it generates AND shows the pattern, off a battery.
#include
#define NUM_LEDS 60
#define DATA_PIN 5
CRGB leds[NUM_LEDS];
void setup() {
FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
FastLED.setBrightness(40); // low = kind to the battery AND to eyes
}
uint16_t t = 0;
void loop() {
// a slow drifting hue along the strip - our old noise ribbon,
// now generated entirely on-chip instead of in Node.
for (int i = 0; i < NUM_LEDS; i++) {
uint8_t hue = inoise8(i * 20, t) ; // FastLED's built-in Perlin noise!
leds[i] = CHSV(hue, 200, 255); // HSV again - episode 7 never leaves us
}
t += 10;
FastLED.show();
delay(20); // ~50fps
}
Look how much came along for free. inoise8 is FastLED's own Perlin noise -- the exact field we built by hand in episode 12, now baked into the library and running on the chip. CHSV is the same hue-saturation-value colour we learned in episode 7, because animating one hue dial is still nicer than juggling three RGB numbers. The strip is still just an array of colours. Nothing here is new. We've only changed where the code runs.
Now, a strip glued to a jacket with a wire dangling to a pocket works, but it's a bit crude -- the wire snags, the join fails, it doesn't survive a wash. The elegant way to build wearables is with conductive thread: actual thread, spun with stainless steel or silver, that carries electricity. You sew with it like normal thread, and your stitches become the wires. This is called a soft circuit, and it's genuinly magic the first time you light an LED through a line of stitching.
There's no code for the sewing itself, obviously, but the mental model is worth writing down because it's exactly like a breadboard, just floppy.
// a soft circuit is a normal circuit, just sewn instead of soldered.
//
// conductive thread = the wires (your stitches ARE the traces)
// battery holder (+) = power rail -> sew a line of thread from here
// LED / sensor = the component (sewable versions have big pads)
// battery holder (-) = ground rail -> sew a separate line back
//
// THE ONE RULE: the + thread line and the - thread line must NEVER cross
// or touch. a crossing = a short circuit = a dead battery (or worse).
That one rule -- keep your power line and your ground line from ever touching -- is the whole discipline of soft circuits. On a rigid board the wires stay put. On fabric they flop around, so you plan your stitch paths like you'd plan a two-colour embroidery: power threads on one route, ground threads on another, and they only ever meet at a component, never in open fabric. When people's first wearable mysteriously drains its battery in a minute, it's almost always two stitch lines kissing where a sleeve folds.
To make soft circuits sane, there's a whole family of sewable electronics, and the classic is the LilyPad Arduino. It's a flat, round board with big petal-shaped tabs around the edge, each one a hole you can loop conductive thread through. Same Arduino code you already write, just in a shape designed to be stitched into cloth instead of plugged into a breadboard. There are matching sewable LEDs, sewable sensors, sewable battery holders -- a whole soft-electronics wardrobe.
// LilyPad pin mapping is just... Arduino. the shape changed, not the code.
// each numbered petal is a pin you sew a thread to.
#define LED_PETAL 9 // a sewable LED stitched to petal 9
#define SENSOR_PETAL A2 // a sewable light sensor on analog petal A2
void setup() {
pinMode(LED_PETAL, OUTPUT);
}
void loop() {
int light = analogRead(SENSOR_PETAL); // read the world through thread
int glow = map(light, 0, 1023, 0, 255); // brighter room -> brighter petal
analogWrite(LED_PETAL, glow);
}
See? If you did episode 109, none of this is a stretch. The LilyPad is an Arduino that happens to be round and sewable. analogRead, map, analogWrite -- ordinary Arduino verbs. The revolution isn't the code, it's that the whole circuit is now soft, washable-ish, and lives inside clothing instead of a project box.
Okay, glowing clothes are pretty. But a jacket that just cycles colours is a lava lamp you're wearing. The moment wearables become art is when the garment responds to the person inside it. Your movement, your heartbeat, the sound around you -- these become the inputs to your generative sketch. The wearer stops being a mannequin and becomes a controller.
The workhorse sensor for this is the accelerometer -- a tiny chip that measures acceleration on three axes, x, y and z. Hold still and it reads gravity pulling down. Move, shake, dance, and the numbers jump. Boil those three numbers into one "how much am I moving" value and you've got a dial the wearer turns with their whole body.
// read an accelerometer and boil it down to one "movement energy" number.
// this is a common little MPU6050 chip, a euro or two, I2C wired.
#include
#include
MPU6050 imu;
void setup() {
Wire.begin();
imu.initialize();
}
// returns roughly 0 (dead still) .. 1+ (dancing hard)
float movementEnergy() {
int16_t ax, ay, az;
imu.getAcceleration(&ax, &ay, &az);
// length of the acceleration vector, minus 1g of gravity sitting still
float mag = sqrt((float)ax*ax + (float)ay*ay + (float)az*az) / 16384.0;
return abs(mag - 1.0); // subtract gravity -> what's LEFT is real motion
}
That little abs(mag - 1.0) is the whole trick. At rest the sensor still feels one g of gravity, so we subtract it; whatever's left over is genuine movement. Now we have a single number that says how energetic the wearer is being, and we can point it at the visuals. Calm, gentle sway -- cool, slow, flowing colours. Full-on dancing -- warm, fast, exploding colours. The dress reads the room through the person wearing it.
// map movement energy onto the palette and speed of the strip.
// calm body -> cool slow blues. wild body -> hot fast reds.
void bodyReactiveFrame(float energy, uint16_t t) {
energy = constrain(energy, 0, 1);
uint8_t baseHue = map(energy * 100, 0, 100, 160, 0); // 160=blue .. 0=red
uint8_t speed = 4 + energy * 30; // faster when moving
for (int i = 0; i < NUM_LEDS; i++) {
uint8_t h = baseHue + inoise8(i * 25, t * speed) / 6;
uint8_t v = 60 + energy * 195; // brighter when moving
leds[i] = CHSV(h, 220, v);
}
}
There's a subtlety I want you to feel here. Raw sensor data is jittery -- an accelerometer twitches even when you think you're still, and if you feed that straight to the lights the garment strobes and flickers horribly. So we smooth it, exactly the way we smoothed motion back in the easing episode (16). A one-line low-pass filter turns nervous jitter into a calm, breathing response.
// smooth the jittery sensor with a low-pass filter (episode 16's lerp, reused).
// `smoothed` chases the raw reading slowly, ironing out the twitch.
float smoothed = 0;
float smoothEnergy() {
float raw = movementEnergy();
smoothed += (raw - smoothed) * 0.08; // 0.08 = how fast it reacts
return smoothed;
}
That smoothed += (raw - smoothed) * 0.08 is just lerp wearing a different hat -- we ease the displayed value toward the real one instead of snapping to it. Same maths as easing a circle across the canvas, now easing a dress's mood. Everything in this series keeps coming back :-).
Movement is one input; sound is another gorgeous one. Stitch a little microphone to the ESP32, run the same FFT frequency analysis we built in episode 19, and now the garment reacts to music. A party dress that pulses with the bass, a jacket that shimmers on the hi-hats. Because the ESP32 is fast enough to do the FFT on-chip, the whole thing is still self-contained -- no laptop analysing audio, the costume hears for itself.
// sound-reactive wearable: sample a mic, get a rough bass level on-chip.
// (a full FFT is episode 19's job; here's the cheap "how loud is the thump")
#define MIC_PIN 34
float bassLevel() {
long sum = 0;
// grab a short window of samples and measure how much they swing
for (int i = 0; i < 64; i++) {
int s = analogRead(MIC_PIN) - 2048; // centre the signal (12-bit ADC)
sum += abs(s);
delayMicroseconds(50);
}
float level = (sum / 64.0) / 2048.0; // 0..1-ish loudness
return constrain(level, 0, 1);
}
Feed that bassLevel into the same kind of frame function as before and the whole strip swells and brightens on every kick drum. Pull in episode 19's real FFT if you want to split bass from treble -- bass drives the base glow, treble sparkles individual LEDs white, just like the audio panel we built last episode. Point old code at a new output and it comes alive again. That's the whole spirit of this chapter.
Right, serious face for a minute, like every episode in this chapter -- because power is where wearables go from "magic" to "sad dark strip" fastest. A wearable has no wall socket. It runs off a battery you carry, and batteries are stingy compared to LEDs, which are hungry.
Remember from episode 109: one WS2812B at full white gulps about 60 milliamps. A 100-LED garment blazing white wants 6 amps. No coin battery gives you that. So wearables live on either a USB power bank (the same brick you charge your phone with -- 5V, safe, rechargeable, perfect) or a lithium polymer cell (lighter, but needs a proper protection circuit -- respect it, LiPos are not toys). And you plan the runtime before you build, so your dress doesn't die halfway through the night.
// how long will my wearable run? do this maths BEFORE the party, not during.
// (this is a JS helper you'd run at your desk while planning the build.)
function batteryHours(numLeds, brightness01, bankCapacity_mAh) {
const maxPerLed = 60; // mA at full white
const avgPerLed = maxPerLed * brightness01 * 0.5; // patterns avg ~half-lit
const chipDraw = 80; // the ESP32 itself, ~80mA
const totalDraw = numLeds * avgPerLed + chipDraw; // mA
return bankCapacity_mAh / totalDraw; // hours
}
console.log(batteryHours(60, 0.3, 10000)); // ~14 hours - a whole festival
console.log(batteryHours(100, 0.8, 10000)); // ~3.7 hours - one big night
Two habbits save every wearable build. First, cap your brightness in software (that setBrightness(40) up top) -- it keeps you far from the terrifying full-white number and stops the LEDs blinding everyone at close range, which they absolutely do on a body. Second, size your power bank for the worst case and then some, because a battery that dies mid-performance is the one failure the audience definitely notices. Do the maths, pick the brick, sleep easy.
The other thing a wall-mounted piece never has to survive is being lived in. A wearable gets bent, stretched, sat on, sweated into, and occassionally forgotten in a pocket on laundry day. So the craft of wearables is as much about mechanical toughness as it is about code.
// femdev's wearable durability checklist (notes-as-code, not a program :-)
const survivesRealLife = {
strainRelief: "every wire/thread join takes the pull, not the solder joint",
doubleSecure: "glue AND stitch every LED - adhesive alone peels off in a day",
pouchTheChip: "ESP32 + battery live in a sewn fabric pocket, protected & removable",
removeToWash: "make the electronics UNCLIP so the garment can be washed alone",
testByWearing:"jump, dance, flail in it BEFORE the event. things WILL fall off",
noBareThread: "insulate crossing conductive-thread runs with fabric or paint",
};
The one I learned the hard way: testByWearing. My first light-up top looked flawless standing still at my desk and shed three LEDs the moment I actually danced in it, because I'd trusted the adhesive and skipped the stitching. Wear the thing, move violently, find the weak joins on your living room floor and not on stage. A wearable that fails is just jewellery that used to work.
Gloves are a fun special case worth a peek -- stitch a flex sensor (a strip whose resistance changes as it bends) along each finger and you can read a hand opening and closing. Suddenly the wearer conducts the visuals with a gesture.
// a flex sensor bends -> its resistance changes -> we read finger curl.
// one per finger and a glove becomes a controller.
#define FLEX_PIN A0
float fingerCurl() {
int raw = analogRead(FLEX_PIN); // straight ~300, bent ~600 (varies)
return constrain(map(raw, 300, 600, 0, 100), 0, 100) / 100.0; // 0..1
}
I don't want you to think this is a niche hobby -- wearable tech art is a serious, gorgeous discipline sitting right where fashion, engineering and code overlap. Hussein Chalayan sent mechanical dresses down a runway that reshaped themselves as models walked. CuteCircuit made the "Twitter Dress" that lit up with live messages. And my personal hero, Anouk Wipprecht, builds robotic couture -- her "Spider Dress" has proximity sensors and articulated legs that rear up defensively when someone invades your personal space. That's an accelerometer-and-servo idea not a million miles from what we just wrote, scaled up by a brilliant artist.
The point isn't to copy them. It's to see that "clothes that sense and respond with code" is a real medium with real masters, and the entry ticket is exactly what you already own: an ESP32, some LEDs, a sensor, and the generative instincts we've built over 112 episodes. Technology as a material, like fabric or paint -- not a gadget bolted on, but woven in.
Time to build the smallest wearable that teaches you everything -- an LED bracelet that responds to your wrist. Little enough to finish in an evening, complete enough that it's a real, self-contained, body-driven piece of generative art on your arm.
// THE COMPLETE WEARABLE: a wrist bracelet that reacts to how you move.
// ESP32 + a short 12-LED strip + an MPU6050 accelerometer + a small battery.
// self-contained: generates, senses, and shows, all on-chip. no laptop.
#include
#include
#include
#define NUM_LEDS 12
#define DATA_PIN 5
CRGB leds[NUM_LEDS];
MPU6050 imu;
float smoothed = 0;
uint16_t t = 0;
void setup() {
FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
FastLED.setBrightness(45); // battery + eyeball friendly
Wire.begin();
imu.initialize();
}
void loop() {
// 1. sense: how much is the wrist moving? (smoothed, episode 16)
int16_t ax, ay, az;
imu.getAcceleration(&ax, &ay, &az);
float mag = sqrt((float)ax*ax + (float)ay*ay + (float)az*az) / 16384.0;
float raw = abs(mag - 1.0);
smoothed += (raw - smoothed) * 0.08;
float energy = constrain(smoothed, 0, 1);
// 2. generate: energy picks the hue + speed (calm blue -> wild red)
uint8_t baseHue = map(energy * 100, 0, 100, 160, 0);
uint8_t speed = 4 + energy * 30;
for (int i = 0; i < NUM_LEDS; i++) {
uint8_t h = baseHue + inoise8(i * 30, t * speed) / 6;
uint8_t v = 70 + energy * 185;
leds[i] = CHSV(h, 220, v); // HSV, episode 7. noise, episode 12.
}
t += 8;
// 3. show: push it to the strip on your wrist
FastLED.show();
delay(20);
}
The build, step by step: solder the 12-LED strip's data line to pin 5, wire the MPU6050 to the ESP32's I2C pins (usually 21 and 22), power both from a small USB battery, and flash this sketch. Wrap the strip round a fabric cuff, tuck the chip and battery into a little sewn pocket, and put it on. Hold your arm still -- calm blue drift. Shake your wrist -- it flares hot and fast. You are now wearing generative art that reads your body, running with no computer anywhere in sight.
Stretch goals, in rising order of "ooh":
bassLevel function above).Do at least the basic bracelet if you do nothing else. There's a very specific joy the first time a pattern you wrote answers to your own heartbeat of movement, glowing on your own skin, tethered to nothing. It's the same lineage of joy as your first plot, your first laser cut, your first glowing panel -- but this one goes out the door with you.
inoise8 is our Perlin noise from episode 12, CHSV is our HSV colour from episode 7, and a strip is still just an array of colours you fill every frameSo that's the biggest leap in this whole chapter: your generative art stops living in a fixed place and starts travelling. Plotted, cut, lit, projected, printed -- and now worn, moving through the world on a person, sensing and responding with nobody at a keyboard. And did you catch the pattern one more time? Noise, HSV, easing, FFT, the array-of-colours -- every single tool was already ours. We just pointed them at thread and skin instead of a screen.
But a bracelet reacts only to the one person wearing it. What happens when you want a piece that senses a whole room -- that watches everyone who walks in, and responds to all of them at once? That's a different scale of making, where the art stops being personal and starts being a shared space. We're stepping off the body and into the room next. Bring that ESP32 -- and maybe start noticing the sensors hiding in the world around you :-).
Sallukes! Thanks for reading.
X
@femdev