11.6: Painting with Pixels - p5.js Tutorial

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


Category:
Tutorial
Duration: 13:36
60,240 views
863

This video looks at how to make a painting from a live video source by reading the pixels to color shapes moving around an HTML5 canvas.

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

Contact: https://twitter.com/shiffman

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

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

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



Other Videos By The Coding Train


2016-04-12Coding Challenge #1: Starfield in Processing
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


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)
swarm
painting
pixel painting
painting with pixels