11.2: Video Photobooth / Muybridge Style Animation - p5.js Tutorial

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=oLiaUEKsRws


Category:
Tutorial
Duration: 21:36
28,139 views
400

This video looks at how to save a history of images from a live camera in p5.js / JavaScript. I first look at saving a single snapshot, followed by an array of images. The video ends with a "Muybridge" style animation of motion.

p5.js code: https://github.com/CodingTrain/Rainbow-Code/tree/master/Tutorials/P5JS/p5.js_video/10.2_p5.js_photoBooth

Contact: https://twitter.com/shiffman

Next video: https://youtu.be/nMUMZ5YRxHI

Learn JavaScript basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Learn HTML / CSS basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

Working with Data / APIs:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r

Help us caption & translate this video!

http://amara.org/v/QbtM/

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct



Other Videos By The Coding Train


2016-04-0714.3: Dynamic Text (contenteditable attribute) - Hamilton Lottery Simulator with p5.js
2016-04-0714.1: The Mathematics (Probability, Logarithm) - Hamilton Lottery Simulator with p5.js
2016-04-0714.2: The Code (HTML, CSS, and JavaScript) - Hamilton Lottery Simulator with p5.js
2016-04-07Coding Train Live 28: Hamilton Lottery Simulator - Probability and DOM
2016-04-0611.6: Painting with Pixels - p5.js Tutorial
2016-04-0511.5: Checkbox Mirror - p5.js Tutorial
2016-04-05Coding Train Live 27: Checkbox Mirror and Painting with Pixels in p5.js
2016-03-3111.4: Brightness Mirror - p5.js Tutorial
2016-03-31Live Stream #26
2016-03-3111.3: The Pixel Array - p5.js Tutorial
2016-03-3111.2: Video Photobooth / Muybridge Style Animation - p5.js Tutorial
2016-03-319.12: Local Server, Text Editor, JavaScript Console - p5.js Tutorial
2016-03-31Live Stream #25
2016-03-29p5.js Github Issue #1079
2016-03-29Live Stream #24
2016-03-29Live Stream #23
2016-03-249.11: Instance Mode (aka "namespacing") - p5.js Tutorial
2016-03-249.10: Reset a Sketch with Button Click - p5.js Tutorial
2016-03-24Live Stream #22
2016-03-2215.9: Amazon EC2 Deployment - Twitter Bot Tutorial
2016-03-2215.8: Heroku Deployment - Twitter Bot Tutorial


Tags:
muybridge
p5.js
p5 js
javascript
image array
live video
getUserMedia
createCapture()
createCapture
Eadweard Muybridge
array
tutorial
html
DOM video
video
p5
js
images
p5.js tutorial