v 1.2.0
cc teddavis.org – 2019
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 + T » tidy code
• 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 stored in your browser's localStorage,
so export sketches/folders often!
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 (for complete functionality).

Check short-cuts above for faster toggling:

• Live Coding, (auto-compiling mode), recompiles on error-free keyup.
• Fullscreen, toggle fullScreen(), ideal for VJing.
• 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).
• Font Size, adjust size of editor text.
• Background, toggle + set color behind each line of code.
• Theme, select custom styling of code.

There are two modes of compiling in P5LIVE:

• softCompile, CTRL + ENTER, (default) only 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.

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 + D, adds WEBGL code to disable depth-test.
• CTRL + SHIFT + O, adds OSC communication code.

P5LIVE loads p5.js/p5.dom/p5.sound libraries by default. For additional libraries, there's an experimental mode for loading external CDN hosted javascript files (or local if running offline). Use the following syntax at the top of your sketch, placing each link into the following array:

let loadScripts = [
	"", 
	""
];

Want custom assets (fonts/images/...)?
Load from a CORS friendly webserver (ie. imgur for images), or better yet,
Clone/download from GitHub and run locally.
Drop files into folder and link relatively, ie: loadImage('data/fish.png');

Set pixelDensity(1); in setup() if on a retina display and lagging.

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 try refreshing to stop compiler to fix a bug/infinite-loop...
• Add #new to URL and refresh to force a fresh blank sketch. Then you can export and delete broken sketch, try fixing externally, and re-import.

Additional custom functions are available in every sketch:

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

• 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
• goto http:https://localhost:5000

• 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
• goto http:https://localhost:5000

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

• p5.js, magic – v0.10.2
• 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
• markdown.js, parsing this readme into about section
• Roboto Mono, font
• Feather Icons, gui icons
• loading.io, css spinning intro loader
• glitch.com, nodejs websocket hosting
• p5js-osc, osc connection
• WebMidi.js, midi connection

• cyril
• Hydra

• GitHub