Let's build your first FIELD.

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.

Friend, get a notebook first.

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.

Every green diary box means stop and write. Two lines is enough. By the end you will have pages of raw material.

FIELD connects the real world to the screen.

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.

Learn four words. Then you can describe almost anything.

These four words are a way of thinking, not just labels. Whenever you plan something, ask them in order: who acts, what job do they play, when should they act, and in what manner.

Actor

Who acts

An Actor is anything in your physical surroundings that acts or performs an action. For example: a plant, a door, or your phone. Start every idea by naming your Actors.

Role

What job they play

A Role is the job an Actor plays. An Actor can sense the world — that's an Input Role, like touch or tilt. Or it can respond to the world — that's an Output Role, like glow or speak.

Cue

When and how they act

A Cue is the rule for when and how two Actors act together. It is the line you draw between them. For example: "When the phone tilts, move the circle."

Mechanism

The manner of the act

A Mechanism is the exact way the action plays out. Once a Cue is set, FIELD offers you a few Mechanisms to choose from — snap instantly, follow smoothly, stay put once triggered, and more. You just pick one.

Not sure what to make? Start from one of these.

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.

Move a circle by tilting your phone.

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.

1. Open the FIELD app on your computer.See an empty canvas.
2. Add one Actor. Name it Phone. Give it one input role: TILT.See the Phone Actor on the canvas.
3. Find the sensor QR code in FIELD. Open the camera on your phone. Point it at the QR code. Tap the link.See a FIELD page open on your phone.
4. Tilt your phone left and right.See the TILT value change between 0 and 1.
5. Add a second Actor. Name it Screen. Give it one output role: MOVE.See two Actors now.
6. Draw a Cue from Phone TILT to Screen MOVE. Pick the DIAL mechanism.See a line join the two Actors.

Now draw with code.

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.

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
}

1. Paste the code into the p5 panel in FIELD.See a green circle appear.
2. Tilt your phone.See the circle slide with your hand.

You built a physical controller. Give the phone to someone near you. Watch them try it.

Add a trail of ten circles.

Next you draw ten circles in a column. They follow your hand together, like a comet.

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);
}

1. Paste the code. Tilt your phone.See a column of ten circles slide together.

This works. It is long, but it is clear. Ship it. Then improve it.

for (let y = 40; y <= 400; y = y + 40) {
  circle(x, y, 30);
}

Now let a real sensor do the job.

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.

1. Wire the knob's middle pin to pin A0 on the board. Wire the outer pins to power and ground.See the knob connected to the board.
2. In FIELD, open the Phone Actor's TILT role. Set its pin to A0.See that TILT now reads from real hardware.
3. Open the Get Code panel. FIELD writes the full program for the board.See the generated code. You write none of it.

// board → FIELD, as you turn the knob
{"role":"TILT","value":0.000}   // knob fully down
{"role":"TILT","value":0.512}   // halfway
{"role":"TILT","value":1.000}   // fully up

Now upload the code to the board.

1. Plug the board into your computer with a USB cable.See the board's power light turn on.
2. Open the Upload to board card in FIELD. Click Set up one-click upload once.See FIELD get ready. This step downloads a tool the first time.
3. Pick your board and your port. Click Compile & Upload.See the log stream. It ends with "done".
4. Turn the knob.See the same circle move — now driven by hardware.

You drove the same sketch from two worlds: your phone, and a chip you programmed. Same Actor, same Role, same Cue — only where the signal comes from changed.

Friend, look at what you built.

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:

• Swap DIAL for SWITCH. The circle jumps between two spots. Feel what a mechanism does.
• Add a SOUND role and a second Cue. Change the circle's size with your voice.
• Add a Scene. Make a night version with different colours.
• Build the honest plant, the mood lamp, or shake-to-reveal. You have every piece.
• Read your diary. Pick the idea that still excites you. Build that next.

← Back to FIELD  ·  Next: Connect Two Things →