P5LIVE – video tutorial series

[ffd8]

Beginning summer '21, a thorough video tutorial series, walking people through P5LIVE's features, functions and workflow will be created and disseminated for free streaming. This work is supported by a 2021 Processing Foundation Teaching Fellowship. The videos aim to accompany the loong README, while demonstrating beyond its text form and slipping in p5.js tips/tricks/collabs along the way. This issue will live as a place to organize these ideas, host random discussion when discovered (by you?? 👋 ) and eventually link to the series as it's made.

» P5LIVE-WALKTHROUGH YouTube Playlist

TOC

---

At the moment, keeping videos short and modular, so they can be re-recorded as needed due to updates/changes of P5LIVE and allowing views to jump right to a necessary topic rather than jumping to exact moment of a longer video.

[√]- GETTING STARTED

- necessary shortcuts
	- recompile, toggle editor + menu
- getting started (min need to know)
	- new sketch + coding
	- concept of live coding + fullscreen
	- changing sketches
- meta sketch of P5LIVE
- unique features that can confuse
	- soft vs hard compile, background page set, fullscreen default, shortcuts (pc + win)

[√]- MENU » P5LIVE

	- about
	- settings (later)
	- references
	- chalkboard (later)
	- visuals only (quick demo)
	- export (later)

[√]- MENU » SKETCHES

	- new
	- cloning multiple times
	- folder (organizing)
	- importing/exporting files
	- sketches/folders 
		- contextual menu
		- rename/export/inspect
		- re-arranging
	- filtering to find + organize

[√]- SETTINGS PANEL

- reset / import/export settings
- walkthrough options
- backups
- shortcuts
- reset P5LIVE

[√]- SHORTCUTS

- overview of all
- customizing

[√]- EXPORTING / IMPORTING / SHARING

- backup all (switch browsers + online/offline)
- export folder, sketches, all sketches
- importing (button + drag/drop)
- snapshot (w/ w/o code)
- URL sharing
- 1 page HTML

[ ]- COCODING

- init session + sharing link (+ sharing view-only)
- ending / cloning / sync data (later) / lockdown / broadcast
- users list (renaming + color)
- toggling/requesting edit-rights
- chat

[ ]- SYNCDATA

- concept
- basic setup + activating
- details of sharing + admin roles (limited edit)
- demos
- new preset + overwriting one
- (detail they live within settings)

[√]- OFFLINE MODE

- installation (basic vs fancy)
	- download vs github clone
- /data assets folder

[√]- LIBRARIES + ASSETS

- importing libs (CDN + local)
- images/fonts (CORS + local)

[ ]- VJ + PERFORMANCE

- audio reactive demo + snippet
- midi example
- osc example

[ ]- LEARNING P5.JS WITH P5LIVE

- references
- auto-complete
- demos
- cocoding with a peer

[ ]- TEACHING P5.JS WITH P5LIVE

- chalkboard
- cocoding with class / breakouts
- exporting/sharing folder of demos
- sketch » 1 page website

[ ]- SPECIAL TOPICS

- hydra (sandbox, pass-back, scoped)

[ ]- CLASSROOM (pending dev)

- ... coming fall/winter

QUESTIONS

---

Here are a few of the questions I'm considering and contemplating while planning and shooting

w/[o] portrait in the corner?

update: using a p5 sketch in WEBGL for fancy cam as texture

how helpful/necessary is it to see the person talking while watching screen?

• 1 take vs edits?
  update: 1 take, but still edit quickly for audio post-production

ideally captured as a 1-take (multiple times) walk through for simplicity.. are edits/zooms necessary?

• record with quicktime/obs vs HDMI out to PVR?
  update: quicktime screen recording makes best quality for filesize

tech question for framerate/smoothness/quality– ease vs gear?

• how/when/who to collab (remotely vs locally) for demos on OSC (music, kinect), COCODING, SyncData

opportunity to invite/work with others, takes their time, lag in remote vs local?

• ...