p5.js Web Editor: Uploading Media Files - p5.js Tutorial

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


Category:
Tutorial
Duration: 6:30
105,034 views
1,371

In this video, I show how to upload media files to the p5.js web editor for use in p5.js sketches. Code: https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/7-arrays/upload-editor

🎥 Previous video: https://youtu.be/5Q9cA0REztY?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🎥 Next video: https://youtu.be/i2C1hrJMwz0?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Videos:
🎥 p5.js Web Editor with Cassie Tarakajian: https://youtu.be/x1rJJRVTpAI
🚂 HTML / CSS / DOM - p5.js Tutorial: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

Timestamps:
0:00 Introduction
2:15 Uploading an Image to a p5.js Sketch
4:37 Using the preload() Function to Load an Image

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

#webeditor #mediafiles #p5js



Other Videos By The Coding Train


2018-10-16Coding Challenge #118.1: Mastodon Fractal Tree Bot Part 1
2018-10-15Coding Challenge #117: Seven-Segment Display
2018-10-134.7: Mastodon Bot - Replying to a Mention
2018-10-12Coding Train Live 156: word2vec & Seven-Segment Display
2018-10-114.6: Mastodon Bot - Managing User Events
2018-10-104.5: Mastodon Bot - Streaming API
2018-10-104.4: Mastodon Bot - Posting with setInterval()
2018-10-094.3: Mastodon Bot - Environment Variables in Node with dotenv
2018-10-094.2: Mastodon Bot - Setting up a Mastodon Bot
2018-10-084.1: Mastodon Bot - What is Mastodon?
2018-10-06p5.js Web Editor: Uploading Media Files - p5.js Tutorial
2018-10-05Coding Train Live155: Mastodon Image Bot with Processing
2018-10-05Text Generation using Spell with Nabil Hassein
2018-10-056.4: p5.js Web Editor: Adding JavaScript Files
2018-10-04Coding Challenge #116 Continued: Lissajous Curve Table in p5.js
2018-10-03Coding Challenge #116: Lissajous Curve Table
2018-10-02Live Stream #154: Quick p5 web editor tutorials
2018-10-01Live Stream #153: Mastodon
2018-10-01Style Transfer Part 2: Real-Time Style Transfer with ml5.js with Yining Shi
2018-10-01Style Transfer Part 1: Training a model with on Spell with Yining Shi
2018-09-28Coding Train Live #152: Lissajous Curve Table


Tags:
javascript
learning
tutorial
creative coding
JavaScript (Programming Language)
Intro
Lesson
Lessons
Teacher
p5js
daniel shiffman
p5 js
p5.js tutorial
coding
programming
programming beginners tutorial
programming beginners guide
tips for programming beginners
coding for beginners
coding train
html5
html5 canvas
intro programming
intro coding
introduction programming
p5.js editor
p5.js
p5js editor
p5.js web editor