You do not need to know how to code. You need one idea and about two hours.
First, tell me your name. Then this guide talks to you, not at you.
Which words fit you? I use them when I cheer you on.
This stays in your browser. Nothing is sent anywhere.
Continue where you stopped?
1. The FIELD app, installed on your computer.
2. A phone, for the first build.
3. Your phone and your computer on the same Wi-Fi.
A real paper notebook, or one open text file. This is the most useful habit in the guide.
Making things starts with noticing. You notice what annoys you. You notice what you wish existed. These thoughts leave your head in seconds. Write them down and they stay.
So keep a maker's diary. It is where small ideas grow up. Your own projects come from these pages — not from copying mine.
Finish these three lines. Short answers are fine.
1. One thing in my room I wish could react to me: ______
2. One moment in my day I want to mark: ______
3. One thing I would want an object to notice about me: ______
Every green diary box means stop and write. Two lines is enough. By the end you will have pages of raw material.
FIELD is an app on your computer. It shows an empty canvas. A canvas is a blank space you build on.
You place things on the canvas — a plant, a door, your phone, a lamp. You draw a line between two things. The line carries a rule. Example: when the room gets louder, make the light brighter.
One end of the line is the real world. It sends a signal, like a tilt or a sound. The other end is something that changes, like a shape or a light. FIELD sits in the middle. It reads the signal and applies the rule. The result updates live, as you move.
Everything runs on your computer. No cloud. No account. No internet needed. Your phone talks to FIELD over your own Wi-Fi. It is yours.
FIELD borrows its words from the theatre. A play is also things reacting to each other on a stage. Read each word before you use it.
A plant, a door, your phone. An Actor can sense, and it can react.
An input atom is a sense: tilt, touch, sound. An output atom is a reaction: show, move, glow, speak.
A Cue joins one Actor's sense to another Actor's reaction. "When the phone tilts, move the circle."
You pick one rule. A switch is on or off. A dial follows smoothly. A latch stays on.
Every value in FIELD is between 0 and 1. Quiet is 0. Loud is 1. Phone flat-left is 0. Phone upright is 0.5. Phone flat-right is 1. Every sensor and every reaction use this same 0-to-1 language.
Take idea 1 from your notebook. Write it again with the words: Actor: ______ · senses: ______ · reacts: ______ · Cue: "When ______, then ______."
A blank page is hard. So do not start blank. Each idea below is small and real. People build these in an afternoon. Small and finished beats big and unfinished.
Each card shows its recipe: a sense plus a reaction plus a mechanism.
A light sensor on your plant. A dark room shows a sad face. A bright room shows a happy one.
A presence sensor by the door. Someone walks up. FIELD says "hello".
Tilt your phone to slide a brush and paint. Your hand is the mouse. You build this next.
A sound sensor on your desk. The room gets loud. A red bar fills up. A quiet "shhh".
Drag a slider slowly. A circle grows and shrinks. A calm breathing pacer.
Shake your phone. A hidden message fades in, then out. A small piece of magic.
Wave your hand near a light sensor. A glowing panel dims or brightens. A lamp with no switch.
Sing or talk. A sketch pulses with your voice. Circles bloom on the loud parts.
Friend, copy one idea into your notebook. Or write your own in the same shape: a sense + a reaction + why it would make you smile. Circle the one you will build.
No wires. No hardware yet. Just FIELD, your computer, and your phone.
Here is the result you are building: you tilt your phone, and a green circle slides left and right on the screen. Now the steps. Do one at a time.
You draw the circle with a p5 sketch. A sketch is a small program that draws on the screen. FIELD gives your sketch the live value through a helper named field.
The code below has a comment on each line. Read it once before you paste it. Nothing is hidden.
sketch.js
// Make a drawing window, 400 by 400 pixels.
function setup() {
createCanvas(400, 400);
}
// draw() runs many times per second.
function draw() {
background(240); // repaint the window pale grey
// Ask FIELD for the tilt value: 0 to 1.
let tilt = field.get('MOVE');
// Turn 0-to-1 into a left-to-right position.
let x = tilt * 400;
// Draw the circle at that spot, halfway down.
fill(47, 107, 92); // pine green
circle(x, 200, 60); // x, y, size
}You built a physical controller. Give the phone to someone near you. Watch them try it.
What surprised you about moving a circle with your hand? You get that first reaction only once.
Next you draw ten circles in a column. They follow your hand together, like a comet.
You write each circle by hand, one per line. This is long. But you can read exactly what every line does. Short code can hide what happens. Learn it clear, then make it short.
sketch.js — write each circle by hand
function draw() {
background(240);
let tilt = field.get('MOVE');
let x = tilt * 400;
fill(47, 107, 92);
// Ten circles. Only the second number changes.
circle(x, 40, 30);
circle(x, 80, 30);
circle(x, 120, 30);
circle(x, 160, 30);
circle(x, 200, 30);
circle(x, 240, 30);
circle(x, 280, 30);
circle(x, 320, 30);
circle(x, 360, 30);
circle(x, 400, 30);
}This works. It is long, but it is clear. Ship it. Then improve it.
Look at the ten lines. Only the second number changes: 40, 80, 120, and so on. It steps by 40 each time.
A loop repeats a line for you. It does the same job in three lines:
for (let y = 40; y <= 400; y = y + 40) {
circle(x, y, 30);
}Same picture. Less typing. To go from ten circles to twenty, you change one number. You do not have to use a loop yet. Just know this: when you copy a line and change one number, a loop can do it for you.
Your sketch does not change. Only the source of the number changes.
A microcontroller is a tiny computer on a board. You will use an Arduino or an ESP32 board. You will wire a potentiometer to it. A potentiometer is a knob you turn. You turn the knob, and the circle moves — the same as tilting did.
The knob sends a number from 0 to 1. The phone sent a number from 0 to 1. Your sketch asks for a 0-to-1 number. It does not care where the number comes from. That is the whole trick.
Here is a peek at what the board sends to FIELD. It sends one short line at a time:
// board → FIELD, as you turn the knob
{"atom":"TILT","value":0.000} // knob fully down
{"atom":"TILT","value":0.512} // halfway
{"atom":"TILT","value":1.000} // fully upThis is the same 0-to-1 language again. Now upload the code to the board.
You drove the same sketch from two worlds: your phone, and a chip you programmed. Remember the model: the sensor sends 0 to 1, and the sketch reacts.
Write what stayed the same and what changed, from phone to hardware. Say it in your own words. Then it sticks.
A circle you move with your hand. A comet. A knob wired to a screen. That was all their doing.
You know the four words and the whole loop now. Everything next is a remix. Try a few this week:
End every session with two lines: what worked, and what you will try next. Do this for a month, friend. Then you have a record of yourself getting good. That is the real thing you are making.