11.5: Checkbox Mirror - p5.js Tutorial

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


Category:
Tutorial
Duration: 17:50
47,170 views
933

This video looks at how to read the pixels from a live video and alter DOM elements (checkboxes) to create an abstract mirror.

p5.js code: https://github.com/CodingTrain/Rainbow-Code/tree/master/Tutorials/P5JS/p5.js_video/10.5_checkbox_mirror

Contact: https://twitter.com/shiffman

Next video: https://youtu.be/0V3uYA1hafk

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/QbtG/

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



Other Videos By The Coding Train


2016-04-12Code Train Live 30: Creating Real-Time Shared Canvas with WebSockets
2016-04-1111.8: Video Effects with Seriously.js - p5.js Tutorial
2016-04-1111.7: Slit-Scan Video - p5.js Tutorial
2016-04-0811.3: Slit-Scan Video - Processing Tutorial
2016-04-08Coding Train Live 29: Processing and p5.js - Slit-scan and Seriously.js
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.1: Live Video and createCapture() - 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


Tags:
p5.js pixels
p5.js
pixel array
p5 js
p5.js canvas
pixels
html5 canvas
canvas
html5
nested loop
tutorial
JavaScript
js
p5
video
https
javascript (programming language)
mirror
software mirror
creative coding
programming
tutorial (media genre)
education (tv genre)
checkbox
DOM