Media

Some of the videos in this section were created last year and some two years ago. They use different editors for p5.js. All of the concepts should still apply? If you notice something off, please let me know!

Video

Reference

• p5 reference: pixels
• p5 reference: get()
• p5 reference: set()
• p5 reference: copy()
• p5 reference: filter()
• p5 reference: createVideo() This function is in the DOM library, so don’t forget to add it into your code. Note that at the moment this throws a bug with the Processing editor. User Atom with the latest p5 files from here or use openProcessing.
• p5 reference: createCapture()  This function is in the DOM library, so don’t forget to add it into your code.
• p5 reference: p5.MediaElement This function is in the DOM library, so don’t forget to add it into your code.

Video Tutorials

• 11.1: Live Video and createCapture() – video tutorial. Please note that when I reviewed this video, the tint() function did not work with video (I was using firefox). I had to turn it off for the video to show up.
• 11.2: Video Photobooth / Muybridge Style Animation – video tutorial
• 11.3: The Pixel Array – video tutorial
• 11.4: Brightness Mirror – video tutorial
• 11.5: Checkbox Mirror – video tutorial
• 11.6: Painting with Pixels – video tutorial
• 11.7: Slit-Scan Video – video tutorial
• 11.8: Video Effects with Seriously.js – video tutorial

Code

• p5.js editor: loading and playing video
• p5.js editor: video canvas
• p5.js editor: video pixels
• p5.js editor: video capture
• Code for above video tutorials
• Chapter 15 (images and pixels) from Learning Processing ported to p5.js
• Chapter 16 (video) from Learning Processing ported to p5.js

Sound

Reference

• p5.sound reference

Video Tutorials

• 17.1: Loading and Playing sound – video tutorial
• 17.2: Play and Pause Button – video tutorial
• 17.3: Timing, Jumps and Cues – video tutorial
• 17.4: Amplitude Analysis – video tutorial
• 17.5: Adding Sound Effects – video tutorial
• 17.6: Sound Synthesis – video tutorial
• 17.7: ADSR Envelope – video tutorial
• 17.8: Microphone Input – video tutorial
• 17.9: Sound Visualization: Graphing Amplitude – video tutorial
• 17.10: Sound Visualization: Radial Graph – video tutorial
• 17.11: Sound Visualization: Frequency Analysis with FFT – video tutorial

Code

• p5.js editor: Load and Play Sound
• p5.js editor: Manipulate Sound
• p5.js editor: Amplitude Analysis
• p5.js editor: Live Input
• p5.js editor: Mic Threshold
• p5.js editor: Oscillator
• p5.js editor: Envelope
• p5.js editor: FFT Spectrum
• Code for above video tutorials
• Chapter 20 (sound) from Learning Processing ported to p5.js