ITP Camp Workshop

Do Not Touch

Phones for Creative Interaction is a 90-minute workshop about using the phone as a small creative computer: motion, sound, speech, camera, NFC, vibration, screen, and speakers.

Open p5-phone Docs Open Starter Examples
Scan this page https://npuckett.github.io/p5-phone/doNotTouchWorkshop/
Bring Your Own PhoneiPhone and Android both work. Some APIs are Android-only.
No Touch InputTouch is only for browser permission prompts and utility buttons.
Simple MaterialsPaper, string, tape, fabric, bodies, sound, movement, and cameras.
Introduction

Me

Hi, I'm Nick.

90 Minutes

Workshop Flow

A fast route from phone hardware to a small physical interaction sketch.

0-5

Meet p5-phone

What your phone can sense and why browser permission setup matters.

5-15

Data Tour

Open sensor, microphone, vibration, NFC, and camera examples on phones.

15-25

Web Editor Loop

Save, share fullscreen, make a QR code, scan, edit, save, refresh.

25-80

Build Time

Pick one value or event and connect it to a visual, sound, or haptic output.

80-90

Share

Show the interaction, name the phone value, and describe the material choice.

Browsers

Browsers For Experimentation

Browsers have gotten more powerful, but constantly change how to gain access to hardware in the browser.

p5.js Reads Data

p5.js does a great job of simplifying how sketches read and use data once the browser has permission.

p5-phone Handles Access

p5-phone focuses on the permission and mobile browser setup layer, so experiments can get to the interaction faster.

Sharing

Why the browser: app stores are not designed for experimentation, but the browser is. Also, once you have created the URL for your interaction you can share it with anyone.

Materials

Reuse Your Old Phone

Consider how you can use your old phone for new purposes.

An older mobile phone shown as a reused experimental device.
Image via Gizmodo, 2015: What it's like to have the oldest phone in San Francisco
Phone Hardware

Inputs And Outputs

p5-phone does not replace p5.js. It smooths out the mobile browser access step so sketches can get to the playful part faster.

Though your phone tries to assign use cases for its hardware components, you can actually treat them as generic components to do what you want.

Inputs

  • Gyroscope and orientation
  • Accelerometer and movement
  • Microphone and speech
  • Front and back cameras
  • NFC reader on supported Android phones

Outputs

  • Screen graphics
  • Speaker sound
  • Vibration motors on supported Android phones
  • Flashlight/torch on supported phones
  • Camera-framed body, face, and hand tracking feedback
Platform note: iOS supports motion, microphone, and camera permission flows, but Web NFC and browser vibration are primarily Android Chrome features.
Interaction Patterns

Events And Ranges

Most workshop sketches can start as one of two shapes: an event that happens, or a changing value that behaves like a slider.

Events

  • If the phone moves fast enough, play a sound.
  • If the phone reaches an angle range, switch the scene.
  • If the room gets quiet, draw a face.
  • If an NFC tag is read, trigger a material-specific response.
  • If a mouth opens, emit particles.

Ranges

  • Map rotation to color.
  • Map tilt to animation speed.
  • Map acceleration to volume.
  • Map thumb-index distance to image opacity.
  • Map microphone level to size, density, or brightness.
Phone Approval

Permissions

One of the primary functions of the library is to trigger your phone's hardware approval process. For security reasons, this requires a physical interaction, at least the first time.

  • These examples all use Tap, meaning touching the screen anywhere. Sorry, it is impossible to remove all touch input.
  • This will trigger an OS-level approval asking you to approve the use of the hardware. Hit Approve.
  • Then the sketch should open and you should see data. The ML5 examples may take a bit longer to load since they are downloading the model.

iOS

Required on each opening.

Android

Can be set to remember your approval for the URL, so it only asks once.

Data Examples

Pt 1 : Reading the Data

Start with existing examples that show where values are stored in code, then remix one into a physical interaction.

Filters below apply to both Pt 1 and Pt 2 example cards.

Phone Testing

Web Editor Workflow

Code on your computer, interact on your phone. Your phone needs a public HTTPS page, and the p5 Web Editor is the quickest path.

  1. Use Chrome or Edge.
  2. Go to the p5 Web Editor and log in or create an account.
    • If you are not logged in, you cannot save your code or generate your URL.
  3. Start with an existing Web Editor file such as the Orientation starter.
  4. Choose File, then Duplicate to copy the sketch into your own account.
  5. Save the duplicated file so it is associated with your account.
  6. Get the fullscreen link for your duplicated sketch: choose File, then Share, then click the arrow icon under Share Sketch As View-Only to open it in a new tab.
  7. Generate a QR code so you can open the link on your phone. Google Chrome has a built-in QR code generator.
    1. Click the 3 dots on the top right corner of the Google Chrome browser.
    2. Scroll down and click Cast, Save, and Share.
    3. Click Create QR Code.
  8. Use your phone to scan the QR code and open the page.
  9. Change the code in the Web Editor.
  10. Press Save in the editor.
  11. Refresh your phone to see the update.

Once you establish the URL of your sketch, it won't change.

Starter Sketches

Pt 2 : Creating interactions

These sketches are made for the no-touch rule. Each one exposes the main sensor or tracking values as global variables so it is easy to swap the output.

Build Time

Make A Physical Interaction

Choose one input, one output, and one simple material constraint. The first version should be tiny enough to explain in one sentence.

1. Pick A Value

Use a global such as rotationZ, micLevel, mouthOpenAmount, or fingerDistance.

2. Map It

Turn the value into size, speed, opacity, pitch, color, particle count, or vibration timing.

References

Library Questions

Use the full docs for API details and the portable skill file when asking an AI assistant for p5-phone-specific code help.

For you

Full Documentation

Use the complete p5-phone documentation when you want API details, examples, and current setup patterns.

Open Documentation
For you and the robots

p5-phone Skill File

The skill file is a small instruction document for AI chat tools and coding agents. It explains the p5-phone API, mobile permission constraints, p5.js 2 patterns, and example conventions so the assistant has library-specific context before it writes code or answers questions.

Open Skill FileDownload Zip
Method 1

Use The Text File

  1. Open the p5-phone skill file.
  2. Copy the full contents.
  3. Paste it into a new chat before your question.
  4. Ask the chat to use that context when it explains or writes p5-phone code.
Method 2

Use The Zip File

  1. Download SKILL.zip.
  2. Unzip the file on your computer.
  3. Upload or attach the unzipped skill file to your chat tool, if attachments are supported.
  4. Tell the chat that the uploaded file describes the p5-phone library.
Good Questions

Ask For Specific Hardware And Output

  • Make a p5-phone sketch where rotation controls color.
  • How do I request motion and microphone permissions from one tap?
  • Create a no-touch sketch where mouth openness launches particles.
  • Change this sketch so microphone level controls particle size.
  • Help me adapt this sketch for p5.js 2 and mobile sensors.
  • Why is NFC Android-only in this browser sketch?