open-audiovisual
Search
EN中文
GitHub
oav-p5a cheat sheet for beginners

The names a p5 sketch uses with oav-p5, on one page: shout into the microphone, hit the drum machine, play the keys, and make the numbers nice to use. Click a name for its full entry. It prints on one landscape A4.

The full API reference → oav-p5 0.8.4

start: one line

Paste it as the first line of the sketch (OpenProcessing or the p5 editor). A 🎹 appears in a corner: it has loaded.

document.head.prepend(Object.assign(document.createElement('script'), { src: 'https://openaudiovisual.com/p5/oav-p5.js' }));

then a sketch looks like this

function setup() {
  createCanvas(400, 300);
  startDrums('four on floor');   // only if you want drums
}

function draw() {
  background(20);
  circle(200, 150, 40 + micLevel * 300);
}

function kickDetected(level) {   // oav-p5 calls it
  // a kick: do something
}

Use the names inside setup(), draw() or a function oav-p5 calls. On the top line of the file they do not exist yet.

shout: the microphone

you write these, oav-p5 calls them

0 quiet0.45 talking1 shout micLevel
bassmidtreble 202502k8k Hz

hit: the drum machine

you write these, oav-p5 calls them

04812bddrumStep = 6 drumPhase 0→ 1
kickIsDetected lag(kickIsDetected, 0, 0.3)

a timeline in bars

1234 drumPhase 0.62one bar = one turndrumBar +1 a turn

a rhythm in one line

  • bd sd bd sdspaces share the bar out evenly (bd kick, sd snare, hh hat)
  • hh*8eight times
  • bd ~ bd ~~ is a rest
  • [bd bd] sd[ ] squeezes two into one place
  • bd*4, ~ sda comma plays them at the same time
  • bd(3,8)3 hits spread over 8 steps
  • <bd sd>one each bar, taking turns

play: keys and knobs

you write these, oav-p5 calls them

C460D462E464F465G467A469B471C572

No keyboard? 🎹 on the page is one, 📱 turns your phone into one.

sound and note names

make numbers nice to use

up 0.03 sdown 0.4 s
env('kick', 0.01, 0.3)back to 0 in 0.3 s

Put them in draw(), not inside an if.

record and check

No sound? Click the page once: browsers stay quiet until you do. Something else? 🎹 → 🩺, and send the screenshot.