9.7: Drawing Object Trails - p5.js Tutorial

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


Category:
Tutorial
Duration: 19:21
80,782 views
1,673

This video looks at how an object can store a history of positions. This allows you to render the object's trail while keeping background() in the draw() loop. I look briefly at p5.Vector and createVector() as well as the push() and splice() functions in JavaScript arrays.
https://thecodingtrain.com/Tutorials/9-additional-topics/9.7-drawing-object-trails.html

p5.js Web Editor Sketches:
🕹️Source code: https://editor.p5js.org/codingtrain/sketches/9DnjxCNB-


🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html
🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
📚 Books: https://www.amazon.com/shop/thecodingtrain
🖋️ 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



Other Videos By The Coding Train


2016-03-24Live Stream #22
2016-03-2215.9: Amazon EC2 Deployment - Twitter Bot Tutorial
2016-03-2215.8: Heroku Deployment - Twitter Bot Tutorial
2016-03-22Live Stream #21
2016-03-189.9: Minimum Spanning Tree (Prim's Algorithm) - p5.js Tutorial
2016-03-18Live Stream #20
2016-03-159.8: Random Circles with No Overlap - p5.js Tutorial
2016-03-15Live Stream #19
2016-03-11Test Broadcast
2016-02-09Tutorial: How to render Processing sketch as a movie
2016-02-099.7: Drawing Object Trails - p5.js Tutorial
2016-02-09Live Stream #18
2015-12-10Live Stream #17: Processing Live Hour of Code
2015-12-049.6: JavaScript Closure - p5.js Tutorial
2015-12-049.5: JavaScript setInterval() Function - p5.js Tutorial
2015-12-049.4: JavaScript setTimeout() Function - p5.js Tutorial
2015-12-04Live Stream #16: setTimeout(), setInterval()
2015-11-2512.5: Closest or Highest Point Tracking - Kinect and Processing Tutorial
2015-11-2512.4: Average Point Hand Tracking - Kinect and Processing Tutorial
2015-11-2512.3: Raw Depth Data - Point Clouds and Thresholds - Kinect and Processing Tutorial
2015-11-2512.2: The Depth Image - Kinect and Processing Tutorial


Tags:
p5.js
JavaScript
Array
Objects
Object-oriented-programming
Vector
p5.Vector
push
splice
programming
tutorial