open-audiovisual
Search
EN中文
GitHub

Examples

Twenty-six examples, five routes

Every example runs without hardware. An on-screen piano, QWERTY keys, a simulated performer or a drum machine stands in for instruments. In any example: Space plays the timeline, T is performance mode, F is fullscreen.

Each card says what the example teaches, what it plays with, and what stands in when you have no hardware. Open it, try the three things on its guide card, read the lines it points to, then follow the Next link.

① Route

First open

Read the whole framework in one file, then add one line to a p5 sketch you already have.

  1. Bursts of thin green and red particle trails falling on black.

    01

    Hello particles

    The smallest complete app. Read main.js top to bottom and you know the framework.

    No hardware needed
    • On-screen piano
    • QWERTY keys
    • Simulated performer

    Open → Source ↗

  2. A flower of layered green and yellow petals with coloured circles around it and four tall red, green and blue beams.

    15

    p5.js in one line

    A plain p5 sketch whose first line loads oav-p5.js, then plays from a MIDI controller, an on-screen controller or a phone.

    Needs
    • MIDI controller
    No hardware?
    • On-screen controller
    • Phone or iPad

    Open → Source ↗

② Route · L1

Anything can be an instrument

A controller, a chord, a microphone, bare hands, a Leap Motion, a phone, Strudel in another tab.

  1. Streaks of green, purple and red particle dots bursting over black, above an on-screen MiniLab 3 controller with its keys and sound buttons.

    16

    p5 keys with sound

    startSound('piano') in setup(): every key from a MIDI keyboard, the 🎹 on screen or a phone is heard, and bursts into particles.

    Needs
    • MIDI controller
    No hardware?
    • On-screen controller
    • Phone or iPad

    Open → Source ↗

  2. A large pink circle with a thin grey ring around it on dark blue.

    17

    p5 microphone

    micLevel, bass and beat read the microphone the way p5 reads mouseX: a circle that grows when you speak, and no p5.sound.

    Needs
    • Microphone
    No hardware?
    • Drum machine

    Open → Source ↗

  3. A small green circle (micLevel) and a larger yellow one (lagged) over two traces: the green drops at once, the yellow falls slowly. A small scope sits in the corner.

    22

    p5 lag: smooth a jumpy value

    lag(micLevel, 0.03, 0.4) smooths a jumpy value the way TouchDesigner's Lag CHOP does, in the same seconds; scope() plots both in a corner of the page.

    Needs
    • Microphone
    No hardware?
    • Drum machine

    Open → Source ↗

  4. A spiral of pink and blue dots above an on-screen MIDI keyboard controller.

    09

    MIDI controllers

    On-screen controllers that move with the real ones you plug in.

    Needs
    • MIDI controller
    No hardware?
    • On-screen controller

    Open → Source ↗

  5. Slender branching plants in a night garden, with green leaves and small blue, red and pink flowers.

    02

    Chord garden

    Triads bloom, clusters decay. The world listens to chords, never to keys.

    No hardware needed
    • On-screen piano
    • QWERTY keys
    • Simulated performer

    Open → Source ↗

  6. A sphere packed with colourful cylinders seen end-on, like umbrellas.

    06

    Cylinder earth

    A 2020 voice-controlled WebGL sketch; mic bands or the built-in drum machine play it.

    Needs
    • Microphone
    No hardware?
    • Drum machine

    Open → Source ↗

  7. A blue and white mandala of fine layered lines.

    03

    Hand instrument

    Fingers as an instrument: pinch, fists, four pattern families.

    Needs
    • Camera (hands)
    No hardware?
    • On-screen piano
    • Drum machine

    Open → Source ↗

  8. A violet hand skeleton above green and blue ink strokes that fall like rain on black.

    12

    Leap hands

    A Leap Motion as an instrument; the mouse is a simulated hand when you have none.

    Needs
    • Leap Motion
    No hardware?
    • Mouse as a hand

    Open → Source ↗

  9. Blue and yellow streaks exploding outward from the lower centre.

    08

    Remote surface

    The phone is the instrument panel; the surface grows from the world's params.

    Needs
    • Phone or iPad
    No hardware?
    • On-screen piano

    Open → Source ↗

  10. Soft coloured circles rising across the lower half, a yellow hand pointing up inside a thin ring, and the room oav-strudel-demo written at the bottom.

    23

    p5 with Strudel

    Strudel plays in another tab and this sketch draws: every note Strudel sends to OAV Virtual MIDI calls notePressed(), and its clock turns drumPhase.

    Needs
    • Strudel in another tab
    No hardware?
    • On-screen controller

    Open → Source ↗

  11. A yellow circle, square and triangle lit on black, labelled C4 = 60, E4 = 64 and G4 = 67, with G4 and 392.0 Hz written under them.

    24

    p5 note names

    noteIsDown('C4') works like noteIsDown(60): write note names (C4, c#4, Db3) wherever a note number goes; noteNumber(), noteName() and noteFreq() convert.

    Needs
    • MIDI controller
    No hardware?
    • On-screen controller
    • Phone or iPad

    Open → Source ↗

  12. A teal disc with a white hand and a thin ring around it, four dots under its centre and a small scope in the corner showing a bouncing line; env, spring and count values are written at the bottom.

    25

    p5 numbers that move

    env('kick'), spring(), speed() and count('kick', 4) shape a number the way TouchDesigner's Trigger, Spring, Speed and Count CHOPs do: a bass drum opens a disc, a spring bounces it back, a hand turns, every fourth kick changes the colour.

    Needs
    • Microphone
    No hardware?
    • Drum machine

    Open → Source ↗

  13. A circle of sixteen steps with a white hand on the left; on the right the rhythm line bd ~ [~ bd] ~, ~ cp ~ cp, hh(5,8), 'changed by: type', and the three earlier lines; the keys 1 to 4, Z and S explained at the bottom.

    26

    p5 rhythm lab

    OAVp5.drums.edit('bd(3,8), …') swaps the rhythm like typing it, OAVp5.drums.undo() goes back a line, OAVp5.drums.strudelUrl opens the line in Strudel; rhythmChanged() says what the line is now.

    Needs
    • QWERTY keys
    No hardware?
    • Drum machine

    Open → Source ↗

③ Route · L3

Bring another picture engine

Bring your own: a node patch, a 2023 p5 sketch, a 2021 particle system.

  1. A node editor with noise, level and output nodes beside a grey cloud texture.

    04

    WebToe stage

    A WebToe node patch performed as a World through ext() bindings.

    No hardware needed
    • On-screen piano
    • Simulated performer

    Open → Source ↗

  2. A glowing yellow ring of jagged petals with small circles inside.

    05

    Prebiotic flake

    A 2023 MIDI sketch replayed through the framework, now with a Tone.js voice.

    No hardware needed
    • On-screen piano
    • Simulated performer

    Open → Source ↗

  3. Cyan and violet fireworks bursting over drooping coloured trails.

    07

    Firework festival

    Close a finger pinch and a firework launches from that hand (2021).

    Needs
    • Camera (hands)
    No hardware?
    • On-screen piano

    Open → Source ↗

④ Route · Timeline · Score

Run a show

The show, not just the piece: a timeline you can see, a drum machine that counts the bars, and a score with a director.

  1. A hexagonal ring of orange and yellow dots above a timeline with five curve lanes, scene blocks and a playhead.

    14

    Timeline

    Automation you can see: five lanes of keyframe curves drive a ring of light, scenes cut it, cues fire one-shot flashes.

    No hardware needed
    • Plays itself
    • Knobs on screen

    Open → Source ↗

  2. A yellow and orange flower of long petals below a 16-step drum grid with kick, snare, hat and clap rows.

    18

    p5 drums and bars

    startDrums('breakbeat', 110) puts a 16-step drum machine on the page; kickDetected() and cueFired() turn its hits and its bars into the picture.

    No hardware needed
    • Drum machine

    Open → Source ↗

  3. A blue circle with a yellow hand sweeping round it, below a drum card that shows the line bd*4, [~ sd]*2, hh*8 and its 16 steps.

    19

    p5 one line of rhythm

    startDrums("bd*4, [~ sd]*2, hh*8") writes the drums as one line of rhythm; drumPhase and beatPhase turn a hand once a bar and swell a circle on every beat.

    No hardware needed
    • Drum machine

    Open → Source ↗

  4. One rhythm drawn three ways on the canvas: a ring of coloured steps with a white hand, a spiral of the last four bars, and a 16-step grid with a playhead, under the drum card.

    20

    p5 rhythm you can see

    drawRhythm() draws the rhythm on the canvas as a grid, a circle or a spiral, so a recording has it; the cells and the line on the card edit each other.

    No hardware needed
    • Drum machine

    Open → Source ↗

  5. A pale moon in a blue and teal dusk sky, with the word dusk in the corner.

    13

    Score & director

    A day of sky as segment lengths: two cuts, a hold, cues, a segment that can crash.

    No hardware needed
    • On-screen piano
    • QWERTY keys

    Open → Source ↗

⑤ Route · L4

Take it out of the browser

One synced video, from one line in a p5 sketch, with or without a camera.

  1. A pink dot in the middle of glowing pink and yellow rings spreading out, below the drum card playing four on the floor.

    21

    p5 record a video

    startRecording() saves the canvas and the sketch's own sound as one video, MP4 where the browser can write it; ⏺ and 📷 in the 🎹 panel need no code.

    No hardware needed
    • QWERTY keys
    • On-screen controller
    • Drum machine

    Open → Source ↗

  2. Overlapping pink, yellow and green rings spreading over a dark field, each one a struck note.

    10

    Record

    The work plus your hands plus its own sound, in one synced video. MIDI takes too.

    Needs
    • Camera (hands)
    No hardware?
    • On-screen piano
    • QWERTY keys
    • Simulated performer

    Open → Source ↗

  3. Overlapping pink, purple and yellow rings beside an on-screen MiniLab 3 with the last note written under it.

    11

    Controller video

    The performance video without a camera: the controller you play, drawn live.

    Needs
    • MIDI controller
    No hardware?
    • On-screen piano
    • QWERTY keys
    • A demo take

    Open → Source ↗

Works 05 to 07 are artworks by Che-Yu Wu (2020 to 2023), used here as demos. The framework is MIT. The artworks remain © the artist, all rights reserved.