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

• CTRL + N » new sketch
• CTRL + ENTER » softCompile
• CTRL + SHIFT + ENTER » hardCompile
• CTRL + A » autocompile toggle
• CTRL + E » editor toggle
• CTRL + M » menu toggle
• CTRL + , » settings toggle
• CTRL + T » tidy code
• CTRL + SPACE » autocomplete
• CTRL + R » references toggle
• CTRL + C » cursor toggle
• CTRL + - » decrease fontsize
• CTRL + + » increase fontsize
• CTRL + S » save png [ + code ]
• CTRL + I » 720*720px popup for screen-recording
• CTRL + 1, 2, 3...0 » load first 10 sketches

Sketches are ONLY saved in your browser's localStorage so export all sketches regularly! Clearing browser history/data will likely erase all sketches.

This means sketches are isolated to the localStorage per domain:port, so export/import all sketches to migrate between online/offline/browsers.

Online: p5live.org

Offline: Github Repo
Details below to run via python webserver or nodejs/npm.

• Create New Sketch via GUI icon or CTRL + N and start coding!
• Live-coding active by default, CTRL + ENTER to force recompile.
• Sketch is auto-saved on every keystroke.

• About, what you're reading now.
• Settings, adjust editor settings + shortcuts (see details below).
• Reference, CTRL + R, toggle p5.js reference list.
• Save PNG + CODE, CTRL + S, exports output image [and snapshot of code].
• Save HTML, export single-page website (re-link path to custom assets).

• Start, click the single 'network' button.

• Exit, click the green 'power' button.
• Share, click to copy URL and share with friends.
• Clone sketch, saves current co-code to local sketches within session folder.
• Lockdown (admin), limit editing, toggling privledges per user.
• Broadcast (admin + lockdown), sync mouseX/Y/frameCount/recompile with users.

• Rename, click on your name (very top) to select a new nickname and cursor color.

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

• Request Deny/Accept, reject or grant write-access from users.

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

• 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? Just type in keywords to match names of folders or sketches to filter and only show those results. To organize them, create a new folder with that word in the title and you can drag + drop them into it.

• Load, click on sketch name.
• Inspect, click lines icon to view/edit code as popup.
• Rename, click pencil icon and type new name.
• Export, click download icon to export sketch as JSON file.
• Remove, click trash icon and confirm deletion.
• Sort, click + hold + drag to desired order.
• Add to folder, careully drag + drop into/over folder.

• Expand/collapse, click on folder name.
• Rename, click pencil icon and type new name.
• Export, click download icon to export entire contents as JSON file.
• Remove, click trash icon and confirm deletion.
• Sort, click + hold + drag to desired order.

• Completely reset P5LIVE (deletes all sketches!)
• Reset Settings to defaults
• Import Settings
• Export Settings

• Live Coding, (auto-compiling mode), recompiles on error-free keyup.
• Eco Render, toggle loop()/noLoop() if browser window is inactive.
• Cursor, toggle visibility of cursor when hiding editor.
• Console, toggle visibility of console incase of errors/warnings.
• Menu Tab, toggles menu tab. (hide if visible while VJ'ing).
• Snapshot Code, export current code with every image snapshot.
• Line Numbers, toggle code editor gutter features + line numbers.
• Autocomplete, toggle constant autocomplete suggestions.
• Lock Code on Drag, toggle locked code editor on mouse drag.
• Pass Editor Keys, toggle passing keyPress from editor to p5 canvas.
• Notifications, toggle notifications of setting changing shortcuts.
• Code Size, adjust font size of editor text.
• Code Background, toggle + set color behind each line of code.
• Theme, select custom styling of code.

Customize by clicking on name, then press a new key combination.

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 as needed (you'll see the updates on each new copy).

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

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.

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

Add custom snippets to '/includes/demos/P5L_snippets.json'.
Load snippet via shortcut, CTRL + SHIFT + key

• CTRL + SHIFT + A, adds audio-reactive code.
• CTRL + SHIFT + O, adds OSC communication code.

P5LIVE loads p5.js/p5.dom/p5.sound libraries by default. For additional libraries, load them remotely via CDN hosted or locally if running offline (ie /data/libs/).

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

let libs = [
	""
	,""
];

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

• Remotely from a CORS friendly server (ie. imgur for images)
  loadImage('https://i.imgur.com/ijQzwsx.jpeg');
• Locally, clone/download from GitHub and follow guide below for offline use.
  Drop files into a folder and link relatively, ie: loadImage('data/images/fish.png');

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 drag and drop the P5L_***.json file into the browser window.

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

OSC is implemented when running locally using node.js/npm.
Load osc_setup demo and run Processing sketch, p5live_osc_setup
or use the OSC snippet (CTRL + SHIFT + O) and adjust in/out ports within the setup.
MIDI is implemented with webmidi.js – see midi_setup demo.

Infinite loop? Broken code?

• Add #bug to URL and refresh URL to stop compiler to fix a bug/infinite-loop...
• Add #new to URL and refresh URL to force a fresh blank sketch. Then you can inspect and fix broken sketch.

Additional custom functions are available in every sketch:

• frameCount, mouseX, mouseY are continous per recompile for smooth refresh.
• ease(inValue, outVariable, easeValue) smooth values.
• println(foo) Compatibility with Processing.

• Clone / Download P5LIVE
• MacOS – open Terminal // Windows – open command prompt
• type cd + SPACEBAR + drag/drop P5LIVE folder into window, press ENTER
• check Python version, type python --version, press ENTER
  • Python 2.0+, type python -m SimpleHTTPServer 5000, press ENTER
  • Python 3.0+, type python -m http.server 5000, press ENTER
• P5LIVE is live! visit » http://localhost:5000
• To quit, CTRL + C in Terminal (or command prompt)

• Clone / Download P5LIVE
• Install Node.js + NPM (official guide / 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:5000
• To quit, CTRL + C in Terminal (or command prompt)

P5LIVE is possible thanks to these amazing open-source projects:

• p5.js, magic – v1.0.0
• 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

• cyril
• Hydra

• GitHub