Home

Awesome

P5LIVE

v 1.6.2
cc teddavis.org – 2019 - 2024
p5.js collaborative live-coding vj environment!

SHORTCUTS

P5LIVE (default)

CTRL + ENTERsoftCompile
CTRL + SHIFT + ENTERhardCompile
CTRL + Eeditor toggle
CTRL + Nnew sketch
CTRL + SHIFT + Cclone sketch
CTRL + Aautocompile toggle
CTRL + ,settings toggle
CTRL + Rreferences toggle
CTRL + Bchalkboard toggle
CTRL + Ttidy code
CTRL + SPACEautocomplete
CTRL + +increase fontsize
CTRL + -decrease fontsize
CTRL + Ssave png [ + code ]
CTRL + 1, 2, 3...0jump to first 10 sketches
CTRL + SHIFT + ⇡⇣jump to previous/next sketch
CTRL + SHIFT + DELETEdelete current sketch

Customize shortcut keys within the Settings panel

Ace Editor

ALT + UP/DOWNshift lines up/down
META + ALT + UP/DOWNduplicate lines up/down
META + Ddelete line

(META = CMD on MacOS, CTRL on Windows/Linux)

GETTING STARTED

LIVE-CODE IN 3... 2... 1...

<img src="includes/images/menu-sketches-new-7.png" width="220px">

INSTALL

Online »  p5live.org
Offline » github.com/ffd8/p5live (or see below for instructions)

SAVING

Sketches are ONLY saved in your browser's localStorage(!).
Export all (<img class="svg" src="includes/icons/download.svg" height="12px">) sketches + settings regularly.
Clearing browser history/data will likely erase all sketches + settings.

localStorage is unique and isolated per http[s] / domain / port,
so export/import all sketches to migrate between online / offline / browsers.
Simply use Settings Panel» Backup » Now to export all settings + sketches.

Automatic Backups

See Settings Panel » Backup to automatically export a P5LIVE backup file at varying intervals. If using Offline Server, it will save these backups to your P5LIVE/_backups folder rather than downloads.

MENU

P5LIVE PANEL

<img src="includes/images/menu-p5live-10.png" width="220px">

  <img src="includes/images/menu-popup-options.png" width="220px">

  - <img class="svg" src="includes/icons/cast.svg" height="12px"> Visuals-only popup.
  - <img class="svg" src="includes/icons/align-left.svg" height="12px"> Code-only popup.

  <img src="includes/images/menu-p5live-export-3.png" width="220px">

  - <img class="svg" src="includes/icons/camera.svg" height="12px"> Save .png, CTRL + S, image (+ code if active in settings).
  - <img class="svg" src="includes/icons/link.svg" height="12px"> Share code as URL (links to online version at p5live.org).
  - <img class="svg" src="includes/icons/file-text.svg" height="12px"> Save .html, single page website (re-link asset paths).

SETTINGS PANEL

<img src="includes/images/menu-settings-nav-3.png" width="220px">

Options

<!--- [x] Lock Code on Drag, locks code editor on mouse drag to prevent displacing code. (temp remove)-->

SoniCode

Want to sonify your coding process?! Activate this toggle to generate sounds based on every keystroke (mapping keyCode to sample note). There are built in oscillators, however one can also select midi to send midi notes (channel 1) out to a DAW of choice for more complex samples.

Shortcuts

Customize keyboard shortcuts by clicking on name + press a new key combination.

Reset P5LIVE

COCODING PANEL

<img src="includes/images/menu-cocoding-inactive-7.png" width="220px">

See dedicated COCODING section below for details.

RECODING PANEL

<img src="includes/images/menu-recoding-inactive-1.png" width="220px">

See dedicated RECODING section below for details.

SKETCHES PANEL

<img src="includes/images/menu-sketches-7.png" width="220px">

Filter

<img src="includes/images/menu-sketch-filter-blank-2.png" width="220px"> <img src="includes/images/menu-sketch-filter-2.png" width="220px">

Lost the overview of your sketches?
Type in keywords to match names of sketches and folders, filtering only those results. Use separate words for an and search, ie. 3d webgl text. To organize, add a new folder containing that word, and drag + drop items into it.

Optionally, toggle <> to search through source code of all sketches.

Sketch

<img src="includes/images/menu-sketch-nav-9.png" width="209px"> <img src="includes/images/menu-sketch-nav-expanded-9.png" width="209px">

Folder

<img src="includes/images/menu-folder-nav-9.png" width="209px"> <img src="includes/images/menu-folder-nav-expanded-10.png" width="209px">

ISSUES

LAG

Lagging or retina display creates too large of a canvas?
Use pixelDensity(1); in setup() to prevent retina scaling.

BUG/CRASH?!

Infinite loop? Broken code? P5LIVE now includes an infinite loop breaker, thus rendering previous tricks more or less obsolete... nevertheless, these may still be useful:

Incase you need a loop to run more than 10000 times || 1 second,
add // noprotect anywhere in your code to override 'loopBreaker'.
(not possible during COCODING sessions to protect peers)

FEATURES

COMPILING

There are two modes of compiling in P5LIVE:

Changes to global variables and setup()/preload() automatically perform a hardCompile since the entire sketch needs it. If your change only occurs within the draw() and custom functions (that aren't used in setup()), you should see a smooth transition. This is especially useful if using preloaded assets or drawing without a background during a performance, as it allows things to keep flowing. Classes are also softCompiled, but remember that each instance will still hold the old variables/methods, so replace each instance to see changes.

A recompile when nothing has changed (and live-coding active), triggers a hardCompile, which is useful for clearing the background or class instances.

If in doubt or not seeing changes, run a hardCompile, CTRL + SHIFT + ENTER.

frameCount, mouseX, mouseY are continous per recompile for smooth refreshes.

AUTOCOMPLETE

Custom autocomplete with p5.js functions and constants has been implemented!

<img src="includes/images/autocomplete-2.png" width="400px">

To activate, enter the first few characters of a function and press CTRL + SPACE, then select function alone or with parameters. If selecting with parameters, use TAB to cycle through each one. Optionally activate Auto Autocomplete in the Settings to have suggestions on every keystroke.

The auto-compiler of live-coding pauses whenever the auto-complete panel is active.

If you forget the name of a function, simply view the p5.js references CTRL + R.

REFERENCES

After an overhaul, the built-in <img class="svg" src="includes/icons/book-open-references.svg" height="12px"> References, CTRL + R, now include nearly all information found on the official p5.js reference website, embedded for easy lookup while potentially VJ'ing... meta-visuals! Use the <img class="svg" src="includes/icons/gift.svg" height="12px"> to surprise yourself and view a random reference.

<img src="includes/images/refs-search-2.png" width="230px">

Use Search... with keyup instant filtering to find functions you're after.
Separate words for an and search, ie. material light.
References keep full opacity once viewed, helping note which ones you've read.

<img src="includes/images/refs-params-3.png" width="500px">

Hover over functions for parameters tooltip, click to read the full detailed reference.

<img src="includes/images/refs-example-1.png" width="230px">

Beyond params and descriptions, the example's code is now embedded with js highlighting.

CHALKBOARD

Teaching a class with P5LIVE and need to explain a mathematical concept or highlight code?
Toggle a <img class="svg" src="includes/icons/edit.svg" height="12px"> Chalkboard from the P5LIVE Panel or shortcut CTRL + B.

<img src="includes/images/chalkboard-2.png" width="500px">

Use DRAWINGS pulldown to activate 1 of 10 isolated layers to draw on. All drawings remain until either pressing the 🗑️ clear button, DELETE key or refreshing the page. Toggle between ✏️ DRAW / 🔤 TEXT / 🧽 ERASE to do exactly that. In Text mode, DELETE removes one character at a time, allowing you to rubber-stamp text. Adjust COLOR, WEIGHT, OPACITY of the CHALK, separately adjust the COLOR and OPACITY of the board (background). This enables you to completely cover up the editor/visuals below for explaining concepts. Dim the BOARD if annotating or highlighting code (dim opacity of CHALK).

You can even access the drawings within your p5 sketch!

p5live.chalkboard() // grabs active drawing
p5live.chalkboard(#) // grab specific drawing (0 – 9)
p5live.chalkboard(frameCount * .25) // cycle all ten (% in backend!)

This drawing can then be displayed and played with as a manual drawing layer within your sketch:

image(p5live.chalkboard(), 0, 0);

For examples, see DEMOS » _CANVAS » _canvas_chalkboard + ..._animation

SNIPPETS

Snippets allow automatically adding chunks of code to your sketch within specific areas: global space, setup, draw – so you can quickly incorporate the necessary code for repeated workflows. Previously it was manually added to a .JSON file, but now there's a snippet editor built it!

Shortcuts

Default shortcut keys can be customized within Settings

Snippet Editor

<img src="includes/images/snippets-editor.png" height="50px">

New Snippet

Snippet Selector

<img src="includes/images/snippets-selector.png" height="50px">

When performing, this can be down entirely with the keyboard, CTRL + SHIFT + S to toggle the Snippet Selector, down/up arrowkey to select a preferred snippet, tab to move focus to the 'Apply Snippet' button, Enter to activate that button.

Ace Snippets

Ace Editor also has the ability to have autocomplete snippets of code blocks. To activate, type one out (can also use auto-complete to help you), then press tab. The following have been implemented (eventually a custom editor may be added to settings):

LIBRARIES

P5LIVE loads p5.js + p5.sound libraries by default. For additional libraries, load them remotely via CDN host or locally if running offline (ie. create /data/libs/). Can also be used within SyncData!

Add this snippet to the top of your sketch, placing one path per array item:

let libs = [
	""
	,""
];

<span style="text-decoration:line-through">p5 or p5.sound</span>

To exclude libraries p5.js (ie. testing other versions) or p5.sound (ie. for Tone.js), add //no p5 or // no p5sound anywhere in your code.
See _audio_gen_tonejs demo for an example.

SANDBOX

Sometimes you want to adjust global JS code that won't cause p5.js to recompile, ie. hydra-synth. To do so, write such code within 2x // sandbox comments. Any changes within that space are processed using eval(), however won't trigger a P5LIVE hardCompile.

HYDRA

The main use case for this, is hydra-synth, which is included within the P5LIVE libs.
After importing the library, any changes made within the following tags:

// sandbox - start
osc().out() // ... your hydra code here
// sandbox - stop

– will only affect the hydra-synth engine and won't trigger p5.js recompiles!
See DEMOS » HY5 + DEMOS » _HYDRA for additional examples.

ASSETS

Loading custom assets (image/font/obj/audio/...):

VIEW ONLY MODE

By special request (P5LIVE for remote meditation sessions?!), there's a view only mode, meaning everything is hidden (code + menu) and you'll only see the sketch running. Intended for COCODING sessions, where the admin can live-code while attendees enjoy and optionally interact with the visuals using their own mic or mouse. Anytime code is recompiled, the same happens here too. Add edit=0 to your URL:

Similarly you can also use ?readonly=1, for a readonly editor.
Incase of exhibit, use ?exhibit=1, to disable links.

You can also load a sketch by URL (for media installation), just add sketch=name_of_sketch !
Example: _meta_P5LIVE

STREAM POPUP

Incase you want to project or stream the visuals or code only (as separate windows) from P5LIVE, press <img class="svg" src="includes/icons/monitor.svg" height="12px"> within the P5LIVE Panel to launch popups with a video feed of your P5LIVE canvas or a separate text-editor of code.

Visuals-Only Stream

This is also great for PIP if running multiple instances of offline-mode. You can also select which canvas to stream (if multiple are present, ie, HY5) and set the object-fit mode for some scaling/stretching issues.

Code-Only Stream

The popup editor is read/write, so be careful while typing, as all keypresses are saved. It lacks fancy P5LIVE shortcuts/snippets etc – as it's more intended as a separate projection of what you are doing in main window (same editor style, theme, position, pulse of main code).

EXPORT / IMPORT

Beyond exporting all sketches regularly (backup!) – you can export single sketches and/or entire folders (click the export icon next to their name). To re-import, click the import button in the Sketches panel or simply drag + drop the P5L_*****.js/P5L_*****.json into the browser. Single sketches are now imported and exported as plain .js for embedding anywhere.

See Settings Panel » Backup to automatically export a P5LIVE backup file at varying intervals.

MIDI/OSC

MIDI

MIDI works online + offline and is implemented with webmidi.js via p5live-midi.js utility (now built-in, no need for loading libs)
See examples, demos/_input/_input_midi

New (v1.6.0+) is a parser of all incoming midi notes + control changes, per channel and eased, for quick access. To begin, add the following code lines to setup() and draw():
- setup(): setupMidi(0, 0, true) // (in, out, globalVars)
- draw(): updateMidi()

Technically the midi class sits behind a scope of midi5, however when making globalVars true (suggested), then you have access to the following variables without anything infront:

note // latest note {on, channel, number, velocity, velocityEase, sum}
cc // latest controlchange {channel, number, value}
notes[] // array of 128 notes (regardless of channel)
ccs[] // array of 128 controlchanges (regardless of channel)
channels[] // array of 16 channels {id, channel, notes, ccs}
	.note // latest note on channel
	.cc // latest controlchange on channel
	.notes[] // array of 128 notes (per that channel) {*same as above*}
	.ccs[] // array of 128 controlchanges (per that channel) {*same as above*}

Basic example:

updateMidi()
background(cc.value * 2) //  set BG from latest control change
circle(width / 4, height / 2, note.vel) // latest note (any ch)
circle(width / 2, height / 2, channels[0].note.vel) // latest note (ch 1)

For more advanced use, you can overwrite the event functions when a note is played or control change made. See demos/_input/_input_midi_custom for details. Essentially you decide what happens when a noteon occurs:

// set custom midi functions
midi5.noteOn = (note) => {
	// print(note) // {on, channel, number, velocity, velocityEase, sum}
	
}

OSC

OSC only works offline and automatically creates an OSC server.
For example, see demos/_input/_input_osc and run Processing sketch, p5live_osc_setup
or use the OSC snippet (CTRL + SHIFT + O) and set host/in/out ports.

EXTRA FUNCTIONS

Additional custom functions are available in P5LIVE sketches:

COCODING

Use COCODING to code together friends locally and remotely! The code is synced while the visuals are rendered locally. If the remote server isn't working, please make an issue on Github!

COCODING PANEL DETAIL

<img src="includes/images/menu-cocoding-inactive-7.png" width="220px"> <img src="includes/images/menu-cocoding-active-9.png" width="220px"> <img src="includes/images/menu-cocoding-req-pre-8.png" width="220px">

Lockdown (user)

<img src="includes/images/menu-cocoding-req-9.png" width="220px">

Lockdown (admin)

<img src="includes/images/menu-cocoding-admin-vote-8.png" width="220px"> <img src="includes/images/menu-cocoding-admin-allow-8.png" width="220px">

Chat

<img src="includes/images/menu-cocoding-chat-2.png" width="220px">

Within chat, links are parsed, ie. share sketch from p5.js editor.
Incoming chats displayed as notification (if active) when menu is hidden.

SyncData

<img src="includes/images/menu-cocoding-syncdata-2.png" width="220px">

<img class="svg" src="includes/icons/radio.svg" height="12px"> launches SyncData window.

<img src="includes/images/menu-cocoding-syncdata-window-2.png" width="400px">

Use the SyncData window to send local data (as objects), by entering custom code that's executed locally in parallel to the shared COCODING session. Latest changes to the SyncData editor are stored in your local settings. Selecting a new preset replaces its contents, so use Save Preset to store anything long-term.

Presets

Buttons

<img src="includes/images/menu-cocoding-syncdata-radio-1.png" width="220px">

When active, your own <img class="svg" src="includes/icons/radio.svg" height="12px"> turns green, along with any user who is sending data.
<img class="svg" src="includes/icons/lock.svg" height="12px"> Lockdown mode, suspends SyncData for all users, unless given write-access.

All data sent, uses parseData() in COCODING session to access it. Events can be fired immediately, or pass values to global vars for use within draw(). Furthermore you can use getData() within COCODING session, for unique local processing within your own SyncData window and code. See midi preset for use-case, where midiThru receives incoming signals and passes them onward to your own gear.

Be kind to your peers, keep data size and intervals within reasonable values.
Have fun COCODING with keyboards, EEG-headsets, eye-trackers, ....?!

RECODING

RECODING PANEL DETAIL

<img src="includes/images/menu-recoding-inactive-1.png" width="220px"> <img src="includes/images/menu-recoding-extended-2.png" width="220px">

RECODING PANEL

PLAYBACK SETTINGS

RECODING EXPLAINED

RECODING allows you to record, playback, scrub and share your live coding process! Simply press record and all changes to the editor are saved with timestamps as a temporary history. Pausing the recording, enables playback, which switches to the recoding sandbox within demos to prevent data loss on the active sketch. To save changes midway from a RECODING step, use the <img class="svg" src="includes/icons/copy.svg" height="12px"> Clone Sketch button. Export your RECODING to share or playing back later. So long as the browser window is open, your history remains available until you press the Reset button, allowing you to start a new RECODING.

RECODING API

Dynamically load RECODING files via URL params for automated playback!
Booleans accept true/false or 1/0

ie. https://p5live.org/?recoding=includes/demos-data/recoding/demo.json&gaps=true&gapsmax=0.1

OFFLINE MODE

Install offline-mode to live-code without internet, load local assets, and communicate with software using OSC. Once installing offline-mode, you'll likely never need online-mode unless COCODING with remote peers (you can use offline COCODING with peers on local network!). If updating, just replace all contents within your existing folder (only store assets in your own /data folder or similar).

Port 5001 is now default since MacOS activated 5000 for AirPlay in 2021. If you've used P5LIVE offline in the past, start in a custom port, ie npm start 5000, do a complete backup from the Settings panel, then startup again with npm start and reimport that file for sketches and settings.

Alternatively, you can run multiple instances of P5LIVE offline (strange experiments galore!?) by adding any other port number to npm start command above, ie: npm start 5010. Remember P5LIVE sketches are stored in localStorage which is unique and isolated per domain:port.

HTTPS

If using offline server, you may want to COCODE with peers on the same local network or even remotely around the world. With p5.sound always enabled, a localhost or https connection is now required regardless of mic being active. While you access via localhost, all connected peers are simply http by default, therefore we can use an http-proxy to tunnel https traffic to our localhost!

Local

same network, works offline:

Remote

anyone across internet w/ ngrok!):
Especially useful for COCODING with your own assets within /data

TOOLS USED

P5LIVE is possible thanks to these amazing open-source projects.
Listed in order of adoption:

INSPIRATION

SOURCE