Coding Challenge #131: Bouncing DVD Logo

Channel:

The Coding Train

Subscribers:

1,740,000

Published on February 8, 2019 4:40:34 PM ● Video Link: https://www.youtube.com/watch?v=0j86zuqqTlQ

Category:

Vlog

Duration: 18:27

189,243 views

5,301

In this coding challenge, I simulate the “Bouncing DVD Logo” meme in JavaScript with p5.js. Code: https://thecodingtrain.com/challenges/131-bouncing-dvd-logo

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/S-es-dYVn

🎥 Previous video: https://youtu.be/MY4luNgGfms?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/alhpH6ECFvQ?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
📓 Bouncing DVD Logo: https://knowyourmeme.com/memes/bouncing-dvd-logo
📓 Bouncing DVD Logo explained: http://prgreen.github.io/blog/2013/09/30/the-bouncing-dvd-logo-explained/
🔗 p5.js rect reference: https://p5js.org/reference/#/p5/rect

Videos:
🎥 How I Learned to Code My Own Game: https://youtu.be/s12npdDmGUc
🔴 Livestream Archive: https://youtu.be/_LyC2l8g0R8

Related Coding Challenges:
🚂 #67 Pong!: https://youtu.be/IIrC5Qcb2G4
🚂 #174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls

Timestamps:
0:00 Introduce the coding challenge
0:52 Describe bouncing DVD logo
1:07 Reference connected video
1:24 Whiteboard the concepts behind the challenge
3:03 Let's code
3:12 Introduce the p5.js web editor
3:28 Track the x and y coordinates
4:33 Consider the rate of change in the x and y dimensions
5:44 Test movement
6:15 Bounce a rectangle against the right and bottom edge
7:30 Consider the rectangle's width and height
8:12 Bounce the rectangle against all edges
9:00 Debug existing code
9:30 Fix code and summarize the coding challenge
10:10 Add image for the DVD logo
10:39 Draw image
11:39 Consider image's dimensions
12:30 Check if the logo moves past edges
13:49 Experiment with different values
14:14 Test the four edges individually
15:12 Fix position
15:41 Test code
15:54 Tint image with RGB values
16:47 Change the color on collision
17:23 Conclude the coding challenge

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

#p5js #beginners #javascript #p5js