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

Customize shortcut keys within the Settings panel

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

• Create New Sketch or CTRL + N and start coding!
• Live-coding active by default, CTRL + ENTER to force recompile.
• Sketches are auto-saved to localStorage + IndexDB on every keystroke.

Online »  p5live.org
Offline » github.com/ffd8/p5live (see OFFLINE-MODE at bottom for instructions)

Sketches are ONLY saved in your browser's localStorage + IndexDB(!).
Export all () sketches + settings regularly.
Clearing browser history/data will likely erase all sketches + settings.

localStorage + IndexDB are 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.

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.

• About, 👋 you're reading me now.
• Settings, adjust editor settings + shortcuts.
• Reference, CTRL + R, toggle embeded p5.js reference.
• Chalkboard, CTRL + B, toggle chalkboard over for annotations.
• Popup Stream, hover for visuals/code as separate outputs:

  - Visuals-only popup.
  - Code-only popup.

• Export, hover for submenu options:

  - Save .png, CTRL + S, image (+ code if active in settings).
  - Share code as URL (links to online version at p5live.org).
  - Save .html, single page website (re-link asset paths).

• Reset Settings to defaults
• Import Settings
• Export Settings

• Live Coding, [500ms], auto-compile error-free code on keyup, with set delay.
• Console, display console messages, [auto/show] to hide or keep visible.
• Eco Render, noLoop() if window loses focus (save computer resources).
• Menu Tab, toggle menu tab. (hide if visible while VJ'ing).
• Snapshot Code, export current code with each image snapshot.
• Line Numbers, display code line numbers (and gutter features).
• Recompile Pulse, flash compiled section of code.
• Auto Autocomplete, useful for learning, or use CTRL + SPACE on demand.

• Pass Editor Keys, keypresses from editor to p5 canvas (hide editor otherwise).
• Notifications, display notifications (shortcut settings + chat).
• Tooltips, displays extra info on hover.
• Multi-P5LIVE Warning, if opened multiple times can lose sync of sketches.
• Timestamp Exports, adds _YYYYMMDD_HHMMSS to filenames.
• COCODING Flags, show cursor flags or only with mouseover userlist.
• COCODING Autosave, autosave session code if server/internet lost.
• Check Updates, check Github for updates (offline-mode only).
• Backup, [off], saves/downloads P5LIVE (sketches + settings) at intervals. Now - on demand. Set to Daily in offline-mode.
• Code Size, 15pt adjust font size of editor.
• Theme, [Green on Black], select custom styling of editor.
• Background, toggle + set color behind lines of code.
• Text, toggle + override unstyled text in code.
• Active-line, toggle + set active-line color.
• Keybinding, [ace], select alternative keybindings of editor.
• Snippets, Launch Editor, to open snippets editor.
• GhostMode, animated typing of snippets and ace-snippets.
• GhostMode Delay, 15, adjust small/high for fast/slow
• SoniCode, plays oscillator/midi on every keystroke.

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.

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

• Completely reset P5LIVE = deletes all sketches + settings!
  Don't forget to export sketches first.

See dedicated COCODING section below for details.

See dedicated RECODING section below for details.

• New sketch.
• Clone sketch, duplicates active sketch.
• New folder, nest sketches/folders within others.
• Import, select JSON files from export (single/folder/all).
• Export, exports entire sketches list for import/backup.

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.

• Load Sketch, click on name.
• Click on loaded sketch (green) to rename.
• Hover to view contextual options
  • Lock, read-only for remixig during performances.
  • Inspect, view/edit code as popup.
  • Rename, give sketch new name.
  • Export, export single sketch as JS file.
  • Remove, delete sketch after confirmation.
• Sort, click + hold + drag to desired order.
• Place in folder, slowly drag + drop into/over folder.

• Expand/collapse Folder, click on name.
• Hover to view contextual options
  • Rename, give folder new name.
  • Sub-sketch, create a new sketch within existing folder. - Sub-folder, create a new folder within existing one.
  • Export, export folder + contents as JSON file.
  • Remove, delete folder + contents after confirmation.
• Sort, click + hold + drag to desired order.

Lagging or retina display creates too large of a canvas?

• Use pixelDensity(1); in setup() to prevent retina scaling.
• Add p5live.fullCanvas(), then set createCanvas() to fraction of window size, ie. createCanvas(windowWidth/10, windowHeight/10) for lo-fi graphics.

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:

• Add #bug to URL and press ENTER.
  Stops compiler, loads a new sketch and opens inspector to fix issue and save.
• Add #new to URL and press ENTER.
  Loads a new sketch.
• If the browser has completely hung, (rare [old ~2020] issue between MBP/Chrome/libraries)
  sudo killall coreaudiod (first take off headphones + turndown stereo!)

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)

There are two modes of compiling in P5LIVE:

• softCompile, CTRL + ENTER, (default) replaces changed functions (smooth refresh).
• hardCompile, CTRL + SHIFT + ENTER, forces entire sketch to recompile.

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.

The first reference of background() in your code, sets the background of P5LIVE, so that each hardCompile is smooth and the entire website uses that background color. Alternatively, you can use &background=0 in the URL to disable all backgrounds, for usage in a transparent-browser (pending).

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

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.

After an overhaul, the built-in 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 to surprise yourself and view a random reference.

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.

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

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

Teaching a class with P5LIVE and need to explain a mathematical concept or highlight code?
Toggle a Chalkboard from the P5LIVE Panel or shortcut CTRL + B.

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 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!

If you want your snippets to magically appear animated (rather than instantly added), activate Settings » Editor » Snippets: [√] Ghostmode and set an ideal delay speed. This is especially useful when performing with live-code, as the audience can better follow what is being added and where. It also looks like a 👻 in the machine...!

• ALT + SHIFT + S, toggle Snippets Editor, create, modify.
• CTRL + SHIFT + S, toggle Snippets Selector, apply.
• Use arrow keys, tab, enter to apply snippets by keyboard only.

Default shortcut keys can be customized within Settings

• Select snippet to edit or 'new' to create a new one
• Apply selected snippet.
• Clone snippet, ie, 'Save As...'.
• Import an exported snippet.
• Launch Snippets Manager.
• Save changes to a custom shortcut.
• Rename a custom shortcut.
• Export a custom shortcut.
• Delete a custom shortcut.

• Toggle Snippets Editor.
• Select 'new' to create a new snippet.
• Add code within the global top, setup bottom, draw top, draw bottom, global bottom
• Clone Snippet and give a custom name to save snippet.

• Select snippet to apply.
• Apply selected snippet.
• Edit selected snippet.

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.

• Select snippet to preview
• About Snippet, toggles credits.
• Apply Snippet, to test what snippet does (start with a blank p5 sketch).
• Export Snippet, to download selected snippet with any changes.
• Import Snippet, to add snippet to your own P5LIVE user list of snippets.

To contribute your own snippets:

• Export from Snippets Editor
• Drag + drop over Snippets Manager panel
• Toggle About Snippet to set name, author, about
• Reduce any unnecessary code from sections
• Tidy sections of code
• Export Snippet to download as .json file
• Make pull-request on github with snippet!

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):

• libs, inserts code for loading external libraries.
• p5, adds p5 template incase removed
• hydraonly, replace all code with this to only use hydra-synth
• canvas, a canvas only sketch
• sandbox, adds //sandbox start/stop for eval hydra code
• strudel adds // strudel start/stop for eval strudel code
• mouse, adds function mousePressed(){}
• key, adds function keyPressed(){}
• preload, adds function preload(){}
• hy5, load HY5 library and sandbox for hydra code
• hy5-p5-hydra, template for sending p5 into hydra
• hy5-hydra-p5, template for sending hydra into p5
• hy5-hydra-p5-x4, template for sending 4x hydra tex to p5
• hy5-hydra-p5-x4-demo, demo for sending 4x hydra tex to p5
• translate, adds translate(width/2, height/2)
• am, adds angleMode(DEGREES)
• im, adds imageMode(CENTER)
• rm, adds rectMode(CENTER)
• oc, adds orbitControl(3)
• read-only /includes/utils/ace-snippets.js for full list

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 (or just type libs then TAB:

let libs = [
	"",
	""
];

There's a small selection of libraries from demos available for offline-mode, which can be accessed via includes/libs/_____.js (add your own libraries to suggested data/libs folder – since this gets overwritten on updates. See demos » libs for additional examples of using certain libraries.

List of available offline libraries include:

let libs = [
'includes/libs/hy5.js', 
'includes/libs/hydra-synth.js', 
'includes/libs/opentype.min.js', 
'includes/libs/p5.glitch.js', 
'includes/libs/p5.serialport.js', 
'includes/libs/p5xr.min.js', 
'includes/libs/rhill-voronoi-core.js', 
'includes/libs/Tone.js', 
'includes/libs/xyscope.js'
]

With the introduction of p5.js v2.0, you can now set a custom version by using the following syntax (place at very top of code):

// p5 = '1' (uses latest version of 1.0)
// p5 = '2' (uses latest version of 2.0)
// p5 = '1.4.0' (uses specific version)

Use print(VERSION) within the setup() to confirm what version is loaded. In ONLINE mode it will grab the selected version via CDN. In OFFLINE mode, it will download if necessary and then be accessed locally, allowing truely offline usage.

p5.js version 1.0+ remains the default until it's changed officially in the online editor. To archive a new sketch to the current p5.js version, just write version + tab key, to be sure it continues to use that version in the future. To list all available p5.js versions, write print(parent.includeScripts.p5.versions) within the setup().

To exclude libraries p5.js (ie. hydra only, canvas hacking) or p5.sound (ie. for Tone.js), add // no p5 or // no p5sound anywhere in your code.

In fact, if you don't have a setup(), p5.js won't be loaded and you can use let libs = [] to include any* other library to live-code within P5LIVE. You likely just need to create a canvas element, type canvas then hit tab to add ace-snippet for fullscreen canvas.
See _canvas_api + _audio_gen_tonejs demos for example.

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 opening and closing // sandbox comments. Any changes within that space are processed using eval(), however won't trigger a P5LIVE hardCompile. ie:

// sandbox
console.log('this code evals')
// sandbox

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

// sandbox
osc().out() // ... your hydra code here
// sandbox

– will only affect (eval) the hydra-synth engine and won't trigger p5.js recompiles!

See DEMOS » _HY5 + DEMOS » _HYDRA for additional examples.
See HY5 for details of Hydra + p5.js.

One can code music on the fly using Strudel, which is now accessible from within P5LIVE! The workflow is similar to // sandbox, however we use // strudel as an open and close of a code block to be evaluated by Strudel. Type strudel + TAB Key to add this snippet to your code.

// strudel
$: s("bd(3,8) sd, hh*<4 8 16>").dec(.2).delay(.4)
// strudel

To stop the audio, use either hush(), _$: or CTRL + . to stop.

We can directly write p5.js code or change global variables on every hap (happening/event), ie on each trigger within a pattern. This allows you to synchronize your visuals with specific instruments, notes, effects of your pattern. To do so, use the .p5live() custom function (type .p5live + TAB for snippet). Code within that space, will run on any event, or filter with if statements per hap.s for each sound. Enable the console.log to monitor what's available, including things like hap.pan to have your visuals follow the current pan position?! While direct drawing to the canvas is possible, you'll more likely want to set variable values that you react upon continuously within your draw() function.

// strudel
$: s("bd(3,8) sd, hh*<4 8 16>").dec(.2).delay(.4)
.pan(sine.slow(2))
.p5live(()=>{
	//console.log(hap)
	if(hap.s == 'hh'){ 
		// render to each high-hat, position with pan
		circle(hap.pan * width, height/2, 100)
	}
})
// strudel

We can also pass values from the rest of our sketch intro Strudel, so that the audio reacts to our visuals! This can be any global variable, function, etc etc. To do so, we just have to use signal(() => p5live.foo), where foo is your variable or function.

// strudel
$: s("bd(3,8) sd, hh*<4 8 16>").dec(.2).delay(.4)
.pan(signal(() => p5live.random(1))) // use p5.js' random()
// strudel

There are great visualizations built into Strudel (pianoroll(), spectrum(), scope()). When calling it at the end of your chain, Strudel dynamically creates a canvas with those visuals. Within P5LIVE we can access both the <canvas> element itself (in order to adjust CSS or ____) and we can grab it as a texture within p5.js for building volumetric visualizations!? Use these within p5.js' draw() or in the //sandbox when using Hydra.

strudel.frame // iframe that loads strudel (custom API access?)

strudel.canvas // access Strudel's <canvas> element
s0.init({src:strudel.canvas}) // usage within Hydra

strudel.hide() // hide the canvas, strudel.hide(0) to reveal

strudel.get() // returns p5 image called `st0` or use directly
texture(st0) // when first calling `strudel.get()` and in WEBGL mode

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

• Remotely from a CORS friendly server (imgbb/glitch.com images/videos, GitHub raw for ~anything)
  loadImage('https://i.imgur.com/ijQzwsx.jpeg');
• Locally, if running offline-mode create a /data folder
  loadImage('data/images/fish.png');
  Don't add anything inside /includes! (gets replaced on update)

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:

• COCODING, /?cc=*****&edit=0
• Solo, /?edit=0

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

Incase you want to project or stream the visuals or code only (as separate windows) from P5LIVE, press within the P5LIVE Panel to launch popups with a video feed of your P5LIVE canvas[s] or a separate text-editor of code.

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.

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).

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. You can also preview and modify a single sketch code prior to importing.

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

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 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.

Additional custom functions are available in P5LIVE sketches:

• ease(inValue, outVariable, easeValue) smooth values.
• println(foo) Compatibility with Processing.
• windowResize() keeps your sketch fullscreen by default. To disable, add windowResized = null; in the setup() or overwrite with custom function.
• p5live.code returns string of current code editor for meta usage.
• p5live.fullCanvas() forces p5 (and any other) canvas to full window size.

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!

• Press to start a COCODING session and share new URL with friends.

• COCODING ^{# of users - ⇡⇣ syncing up/down-stream.}
• Exit, click the green 'power' button.
• Clone sketch, saves current co-code to local sketches within session folder.
• SyncData, custom code to sync local data (mouse, midi,...) with peers.
• Lockdown (admin), limit editing, toggle write privledges per user.
• Broadcast (admin + lockdown), sync mouseX/Y/frameCount/recompile with users.

• Click on your name (very top) to select a new nickname and color.
• If admin left, you'll have option within this panel to claim it.

• Request write-access, click edit button and wait for admin to allow.

• Grant write-access, toggle requested write-access from glowing users.

• Toggle write-access, admin can always toggle write access per user.

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

launches SyncData window.

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

• template guide for making your own.
• mouseXY, facetracker + midi, shares those signals with others.
  Be sure to enter unique userID's.
• Save Preset for storing current SyncData editor (pre-existing name replaces it).
• Remove Preset is available after selecting a custom preset.

Buttons

• ► RUN activates SyncData, injecting code at end of COCODE on each recompile.
• ► RE-RUN updates any changes made within SyncData editor.
• ↓ COCODE (admin) adds code following /* 2 - COCODE */ into COCODING session.
• ◼ STOP deactivates SyncData (stops adding local code to recompile).

When active, your own turns green, along with any user who is sending data.
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, ....?!

• Press to start a RECODING session and record your live coding process.

RECODING PANEL

• RECODING ^{#/# step of steps in recording.}
• / Pause/Continue recording.
• / Play/Pause playback.
• Playback settings toggle.
• Export recording.
• Reset RECODING.
• Slider to scrub between recorded steps.

PLAYBACK SETTINGS

• Loop, repeat playback.
• Max Gap, max time between keystrokes in seconds.
• CatMode, any key presses next keystroke
• Speed, overall playback speed

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 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.

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

• ?recoding=recoding_filepath.json
• &loop=true
• &gaps=true
• &gapsmax=5
• &speed=1
• &menu=false
• &editor=true
• &catmode=false

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

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).

• Download P5LIVE or Clone in Github Desktop
• Install node.js + npm package (binary installers)
• MacOS – open Terminal // Windows – open command prompt
• type cd + SPACEBAR + drag/drop P5LIVE folder into window, press ENTER
• type npm install, press ENTER
• type npm start, press ENTER (for custom port: npm start ####)
• P5LIVE is live! visit » http://localhost:5001
• type CTRL + C, to stop server.

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 + IndexDB which is unique and isolated per domain:port.

To update P5LIVE offline:

• backup now from the settings panel
• stop process in Terminal
• download and expand the latest release
• select all contents from new release
• drag into existing ~/Documents/P5LIVE directory, replacing all items
• run npm install once to make sure all is up to day
• run npm start to reboot offline
• refresh browser window

When you haven't modified the /includes directory, you shouldn't lose any data – just be sure to replace all the contents within the directory and not the P5LIVE directory itself!

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!

same network, works offline:

• Start P5LIVE with npm start https, or custom port npm start #### https
• HTTPS port is automatically 1 digit higher than P5LIVE (5000 » 5001).
• Share https address displayed in Terminal, ie: https://xxxxx.local:5001
• Connected peers must accept 'unsecure' (self-gen) certificate with Advanced button upon loading URL. Certificates are generative + cached, renewing after 60 days.
• Enjoy offline local peers COCODING!

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

• Start P5LIVE offline server (see above)
• Download ngrok
• Open another tab in Terminal, cd to the folder containing ngrok
• Type ./ngrok http 5000 and press ENTER (tunnels to localhost:5000)
• Check output forwarding URL to share with remote peers (add COCODING channel):
  https://**********.ngrok.io/?cc=*****
• Enjoy offline remote peers COCODING!

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

• p5.js, magic
• ace editor, code editor on top
• peeredit / rga.js, syncing text for cocoding
• socket.io, websockets for cocoding
• sortablejs, drag + drop sorting of sketches/folders
• beautify, tidy code in editor
• pickr, color picker
• tippy, tooltips
• download.js, exporting html file
• vex, custom dialog boxes
• marked.js, parsing this readme into about
• Roboto Mono, font
• Feather Icons, gui icons
• loading.io, css spinning intro loader
• glitch.com, nodejs websocket hosting
• node-osc, osc connection
• WebMidi.js, midi connection
• dropzone.js, drag + drop importing
• mousetrap.js, custom shortcut key bindings
• loadjs, in series loading of libs + sketch
• highlight.js, higlighting of p5.js examples
• http-proxy, https tunneling
• pem, self-generated generative ssl certificates
• FHNW, nodejs websockets cocoding-server
• loop-breaker, inifinite-loop protection
• Random Name Generator
• localforage, IndexDB storage

• cyril
• Hydra

• https://github.com/ffd8/p5live