p5-phone

Start

Quick Start

Use p5.js, load p5-phone, lock gestures, then enable the capability your sketch needs from a user tap.

Designed for p5.js 2.x

<script
  src="https://cdn.jsdelivr.net/npm/p5-phone@1.13.0/dist/p5-phone.min.js">
</script>

function setup() {
  createCanvas(windowWidth, windowHeight);
  lockGestures();
  enableGyroTap('Tap to enable motion sensors');
}

function draw() {
  background(245);
  textAlign(CENTER, CENTER);

  if (window.sensorsEnabled) {
    circle(width / 2 + rotationY * 3, height / 2 + rotationX * 3, 60);
  } else {
    text('Tap to enable motion sensors', width / 2, height / 2);
  }
}

Permission pattern: put code that uses phone hardware inside a positive enabled check. Write sketches as if (window.sensorsEnabled) { ... }, if (window.micEnabled) { ... }, or the matching status flag for the capability you enabled.

Motion Sensors

if (window.sensorsEnabled) {
  circle(width / 2 + rotationY * 3, height / 2 + rotationX * 3, 60);
}

Microphone

if (window.micEnabled) {
  let level = mic.getLevel();
  circle(width / 2, height / 2, level * 500);
}

Sound Output

function mousePressed() {
  if (window.soundEnabled) {
    mySound.play();
  }
  return false;
}

NFC

if (window.nfcEnabled) {
  if (isNfcTag('shirt')) {
    drawShirtEffect();
  }
}

Bluetooth (BLE)

function setup() {
  bleSetup({
    characteristics: [
      { name: 'temp', type: 'float', notify: true }
    ]
  });
  enableBleTap();
}

function bleReceive(name, value) {
  debug(name + ' = ' + value);
}

Vibration

function mousePressed() {
  if (window.vibrationEnabled) {
    vibrate(50);
  }
  return false;
}

Camera

if (cam.ready) {
  cam.draw();
}

Multiple Types

enablePermissionsTap(['sensors', 'mic'], 'Tap to enable motion + microphone');

if (window.sensorsEnabled && window.micEnabled) {
  circle(
    width / 2 + rotationY * 3,
    height / 2 + rotationX * 3,
    80 + mic.getLevel() * 400
  );
}

p5.js 2.0 note: use mousePressed(), mouseDragged(), and mouseReleased() for touch or pointer input. The older touchStarted(), touchMoved(), and touchEnded() callbacks are p5.js 1.x only.

Tooling

Agent Skills

Optional skills that teach AI coding assistants how p5-phone and p5.js 2.x work, so generated sketches use the right APIs and contemporary patterns. See the full guide for installing them for your particular workflow.

p5-phone

This agent skill contains the knowledge of how the library works, implementation patterns, and commands to simplify the creation of applications built with this library.

p5js-2x

While the main library has been optimized for p5 2.x, many models are trained on p5 1.x methods. This skill helps bridge the transition by pointing development to contemporary methods.

Permissions

Activation Styles

Every capability (enableSensor*, enableMic*, enablePermissions*, …) offers the same six unlock screens. Only the enable* line changes — the rest of the sketch is identical. Pick the look you want for the same simple tilt-a-ball sketch below.

function setup() {
  createCanvas(windowWidth, windowHeight);
  lockGestures();
  enableSensorCanvas('Tap the canvas to begin'); // <-- the only line that changes
}

function draw() {
  background(20);
  if (!window.sensorsEnabled) return;             // gate all hardware reads

  fill(80, 200, 255);
  noStroke();
  circle(width / 2 + rotationY * 3, height / 2 + rotationX * 3, 60);

  fill(255);
  textAlign(CENTER, TOP);
  textSize(16);
  text('Tilt your phone to move the ball', width / 2, 30);
}

1. Tap

Full-screen dark overlay with a centered frosted-glass message box.

enableSensorTap(
  'Tap to enable motion sensors'
);

2. Button

A centered gradient button (plus optional status text) over the idle canvas.

enableSensorButton(
  'ENABLE MOTION SENSORS'
);

3. Canvas

No overlay — a text hint is drawn on the canvas until the first touch.

enableSensorCanvas(
  'Tap the canvas to begin'
);

4. Banner

A slim slide-in bar pinned to the top or bottom of the screen.

enableSensorBanner(
  'Tap to enable motion sensors',
  'bottom'
);

5. Minimal

Bare semi-transparent full-screen tint with a small radiating icon. Color, opacity, and icon are adjustable.

enableSensorMinimal({
  color: '#0a0',
  opacity: 0.4,
  iconColor: '#fff'
});

6. On (custom element)

No built-in UI — bind activation to an HTML element you add yourself.

// add to index.html:
// <button id="start-btn">Start</button>
enableSensorOn('#start-btn');

Same suffix, every capability: each style has a matching enableMic*, enableSound*, enablePermissions*, etc. variant. For styles 1–5 nothing else is required; style 6 needs a target element in your index.html. Add showDesktopQr() in setup() to get a floating scan-to-test QR on desktop only (no-op on mobile).

Reference

API

Grouped by the job you are trying to do. The permission table keeps the six UI styles visible, and each category lists the p5 APIs that become practical after p5-phone handles the mobile browser setup.

Examples

Example Catalog

Reordered around starter sketches, input, output, ML5, and lower-priority comparison material. Each card has room for a full example, minimal version, Web Editor link, source link, and QR code.

Support

Compatibility

Plan mobile sketches by platform first. Browser permissions and hardware support matter more than the p5.js version for most phone behavior.

iOS Safari

Motion sensors, microphone, sound, speech, and camera must start from a user tap or button.
Motion permission uses Apple-specific sensor prompts, so the enable helpers are important.
Web NFC and vibration are not available in Safari on iPhone.
Use mousePressed(), mouseDragged(), and mouseReleased() for touch-compatible sketches.

Android Chrome

Motion sensors usually work without the iOS-style sensor permission prompt.
Microphone, sound, speech, and camera still need a user gesture and browser permission.
Web NFC is Android Chrome only and requires HTTPS with NDEF-formatted tags.
Vibration is available on many Android devices through vibrate().

Capability	iOS Safari	Android Chrome	Desktop browsers
Motion sensors	Supported after a tap permission flow.	Supported; permission request is usually a no-op.	Limited or unavailable on most laptops and desktops.
Touch input	Supported through touch and pointer events.	Supported through touch and pointer events.	Use mouse or pointer callbacks for testing.
Microphone and sound	Supported after user gesture and permission.	Supported after user gesture and permission.	Supported after browser permission.
Speech recognition	Browser support varies; test on the target device.	Supported in Chrome where Web Speech is available.	Browser support varies.
NFC	Not supported.	Supported in Chrome on HTTPS.	Not supported.
GPS / geolocation	Supported on HTTPS after a tap permission.	Supported on HTTPS after a tap permission.	Supported after browser permission.
Camera and ML5	Supported after camera permission.	Supported after camera permission.	Supported after camera permission.
Vibration	Not supported.	Supported on many phones.	Limited or unavailable.