7.8: Objects and Images - p5.js Tutorial

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


Category:
Tutorial
Duration: 17:01
123,204 views
1,669

This video explores how to load and display images as objects with p5.js.

Code: https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/7-arrays/8-objects-images

๐Ÿ•น๏ธ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/H44xHm5a

๐ŸŽฅ Previous video: https://youtu.be/rO6M5hj0V-o?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
๐ŸŽฅ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Timestamps:
0:00 Introduction
1:19 PNG Images Allow for Transparent Pixels
3:12 The image() Function
6:15 Using a Loop to Load All the Images
8:26 Using String Concatenation to Load Multiple Images
10:00 Picking a Random Image from an Array
14:50 Using a Template Literal to Load Multiple Images

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

๐Ÿš‚ Website: http://thecodingtrain.com/
๐Ÿ‘พ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
๐Ÿšฉ Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
๐Ÿ’ก GitHub: https://github.com/CodingTrain
๐Ÿ’ฌ Discord: https://discord.gg/hPuGy2g
๐Ÿ’– Membership: http://youtube.com/thecodingtrain/join
๐Ÿ›’ Store: https://standard.tv/codingtrain
๐Ÿ–‹๏ธ Twitter: https://twitter.com/thecodingtrain
๐Ÿ“ธ Instagram: https://www.instagram.com/the.coding.train/

๐ŸŽฅ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

๐Ÿ”— p5.js: https://p5js.org
๐Ÿ”— p5.js Web Editor: https://editor.p5js.org/
๐Ÿ”— Processing: https://processing.org

๐Ÿ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#basics #images #objects #p5js #javascript



Other Videos By The Coding Train


2017-12-2718.5: Camera and Perspective - WebGL and p5.js Tutorial
2017-12-2618.4: Texture - WebGL and p5.js Tutorial
2017-12-25Coding Challenge #88: Snowfall
2017-12-23Coding Train Live 112: Happy Holidays from the Coding Train!
2017-12-2218.3: Light and Material - WebGL and p5.js Tutorial
2017-12-20Coding Challenge #87: 3D Knots
2017-12-19Live Stream Archive - ITP Winter Show 2017
2017-12-1918.2: 3D Geometries - WebGL and p5.js Tutorial
2017-12-1818.1: Introduction to WebGL in p5.js - WebGL and p5.js Tutorial
2017-12-17Live Stream #111: More WebGL with p5.js!
2017-12-167.8: Objects and Images - p5.js Tutorial
2017-12-15Coding Train Live 110: WebGL with p5.js Continued
2017-12-1516.4: for...of loop - Topics of JavaScript/ES6
2017-12-147.7: Object Communication Part 2 - p5.js Tutorial
2017-12-13Coding Train Live 109: WebGL with p5.js
2017-12-137.6: Object Communication Part 1 - p5.js Tutorial
2017-12-11Coding Challenge #85: The Game of Life
2017-12-09Coding Train Live 108: More OOP with ES6 & The Game of Life
2017-11-29Coding Challenge #84: Word Definition Extension
2017-11-2811.8: Cross-Browser Extensions - Programming with Text
2017-11-2711.7: Chrome Extensions: New Tab Override - Programming with Text


Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
itp nyu
p5.js
javascript
p5.js tutorial
es6
ecmascript2015
es2015
object-oriented es6
object-oriented programming es6
class es6
array objects
array oop
array oop js
for loop array
array
objects
image p5.js
images clicking
images html5 canvas