v 1.3.1
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 » jump between first 10 sketches

Sketches are ONLY saved in your browser's localStorage.
Export all () 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 to migrate between online / offline / browsers.

The file structure changed in 1.3.0, so make sure all copies of P5LIVE are up to date.
You can import any old sketches, but newly saved ones won't open in versions < 1.3.0.

Online: p5live.org

Offline: github.com/ffd8/p5live
Details below to run via python webserver or nodejs/npm.

• 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 on every keystroke.

• About, 👋 you're reading me now.
• Settings, adjust editor settings + shortcuts.
• Reference, CTRL + R, toggle embeded p5.js reference.
• Save .png [+ .json], CTRL + S, exports image [+ snapshot of code].
• Save .html, export 1-page website (must re-link paths to custom assets).

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

• Live Coding, auto-compile code on keyup, recompiles if error-free.
• Eco Render, noLoop() if window loses focus (save computer resources).
• Cursor, display cursor (when editor is hidden).
• Console, display console messages (print / errors / warnings).
• 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).
• Auto Autocomplete, useful for learning, just use CTRL + SPACE as needed.
• Lock Code on Drag, locks code editor on mouse drag to prevent displacing code.
• 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 P5LIVE opened multiple times (otherwise sync issues).
• Code Size, 15pt adjust font size of editor.
• Code Background, [x] toggle + set color behind lines of code.
• Theme, select custom styling of code.

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

• 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, ....?!

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

• Load Sketch, click on name.
• Hover to view contextual options
  • Inspect, view/edit code as popup.
  • Rename, give sketch new name.
  • Export, export single sketch as JSON 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-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.

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.

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.

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

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

P5LIVE loads p5.js/p5.sound libraries by default. For additional libraries, load them remotely via CDN host or locally if running offline (ie. /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 = [
	""
	,""
];

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, if running offline (ie. /data/images/)
  loadImage('data/images/fish.png');

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

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_*****.json into the browser.

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

• MIDI works online/offline and is implemented with webmidi.js
  For example, demos/_input/_input_midi
• OSC works offline when using node.js/npm.
  For example, 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.

Infinite loop? Broken code?

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

Additional custom functions are available in every sketch:

• 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.
Listed in order of adoption:

• 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
• loadjs, in series loading of libs + sketch
• highlight.js, higlighting of p5.js examples

• cyril
• Hydra

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