Coding Challenge 131: Bouncing DVD Logo

From the creator

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 e

Published 2019-02-08 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.