title
Coding Challenge #131: Bouncing DVD Logo

description
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

detail
{'title': 'Coding Challenge #131: Bouncing DVD Logo', 'heatmap': [{'end': 581.679, 'start': 560.26, 'weight': 0.722}, {'end': 835.203, 'start': 809.068, 'weight': 1}], 'summary': 'Tutorial explains creating an animation of a dvd logo using html canvas and p5 library with a canvas size of 800x600, discussing the setup, variables, speed, edge detection, bouncing, and dynamic colors, providing a comprehensive guide for coding projects.', 'chapters': [{'end': 182.144, 'segs': [{'end': 83.873, 'src': 'embed', 'start': 21.855, 'weight': 0, 'content': [{'end': 23.155, 'text': 'I should never use this timer.', 'start': 21.855, 'duration': 1.3}, {'end': 25.376, 'text': "Nothing ever comes from it, but I'm going to try.", 'start': 23.335, 'duration': 2.041}, {'end': 27.257, 'text': "Here's the one thing I'm excited about here with this challenge.", 'start': 25.516, 'duration': 1.741}, {'end': 30.659, 'text': 'If you are a beginner, if you have never programmed before,', 'start': 27.577, 'duration': 3.082}, {'end': 37.463, 'text': "I'm hoping that this is a coding challenge that you could follow and actually possibly create yourself.", 'start': 30.659, 'duration': 6.804}, {'end': 40.646, 'text': 'So beginners welcome.', 'start': 39.445, 'duration': 1.201}, {'end': 43.088, 'text': "I'm going to try to talk through all the concepts.", 'start': 41.266, 'duration': 1.822}, {'end': 48.252, 'text': "I'm going to use very few of the basic beginner concepts of programming in JavaScript using the p5 library.", 'start': 43.108, 'duration': 5.144}, {'end': 50.554, 'text': 'Go to editor.p5js.org.', 'start': 48.612, 'duration': 1.942}, {'end': 52.576, 'text': "I'm going to pull that up in a second where I'll be typing the code.", 'start': 50.614, 'duration': 1.962}, {'end': 55.518, 'text': 'So this is the bouncing DVD logo.', 'start': 52.816, 'duration': 2.702}, {'end': 57.64, 'text': "And I think I could, I've got plenty of time.", 'start': 55.938, 'duration': 1.702}, {'end': 59.882, 'text': "I'm going to wait like 20 seconds just to see if it hits the corner.", 'start': 57.66, 'duration': 2.222}, {'end': 61.595, 'text': 'Come on, come on.', 'start': 60.674, 'duration': 0.921}, {'end': 62.556, 'text': 'Oh, oh no.', 'start': 61.955, 'duration': 0.601}, {'end': 64.277, 'text': 'Okay, anyway, I should probably move on.', 'start': 62.596, 'duration': 1.681}, {'end': 66.279, 'text': 'So what do I need?', 'start': 64.596, 'duration': 1.683}, {'end': 74.966, 'text': 'Oh, and I wanted to also do a quick shout out and thank you to Mike Boyd, who learned to code from a lot of different resources,', 'start': 66.359, 'duration': 8.607}, {'end': 76.867, 'text': 'including the coding train, I think.', 'start': 74.966, 'duration': 1.901}, {'end': 78.148, 'text': 'Check out this video.', 'start': 77.388, 'duration': 0.76}, {'end': 83.873, 'text': 'He makes this really awesome game and also at some point tries to make a bouncing DVD logo, which is where this idea came from.', 'start': 78.369, 'duration': 5.504}], 'summary': "A coding challenge is presented for beginners to create a bouncing dvd logo using javascript and p5 library, inspired by mike boyd's learning journey.", 'duration': 62.018, 'max_score': 21.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ21855.jpg'}, {'end': 157.988, 'src': 'embed', 'start': 109.326, 'weight': 1, 'content': [{'end': 122.677, 'text': "400 times 200 is 800 by 600, and that's the aspect ratio of old timey, television tubes, not like this fancy YouTube with your 16 by 9 aspect ratio.", 'start': 109.326, 'duration': 13.351}, {'end': 123.898, 'text': "Woo, it's so fancy.", 'start': 122.717, 'duration': 1.181}, {'end': 128.923, 'text': 'And then I need to draw an image of that DVD logo.', 'start': 124.719, 'duration': 4.204}, {'end': 133.827, 'text': 'And I need to place it randomly somewhere in this canvas.', 'start': 128.943, 'duration': 4.884}, {'end': 138.331, 'text': "I'm its location is going to be defined by the corner.", 'start': 135.149, 'duration': 3.182}, {'end': 141.894, 'text': "That's going to be sorry, It's x, sorry, xy location.", 'start': 138.651, 'duration': 3.243}, {'end': 146.438, 'text': 'And then I need to determine when it hits the edge and have it bounce off that edge.', 'start': 141.894, 'duration': 4.544}, {'end': 153.524, 'text': 'and according to my research, I actually did some research into the science behind this DVD logo thing, which you can.', 'start': 146.438, 'duration': 7.086}, {'end': 157.988, 'text': "actually there's all sorts of formula to calculate the Probability of when it's going to hit the corner and all sorts of stuff like that.", 'start': 153.524, 'duration': 4.464}], 'summary': 'Creating a program to draw and bounce a dvd logo on a canvas with research into its probabilities.', 'duration': 48.662, 'max_score': 109.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ109326.jpg'}], 'start': 0.987, 'title': 'Creating dvd logo animation', 'summary': 'Discusses creating an animation of a dvd logo using html canvas and the p5 library, with a canvas size of 800 by 600 and the logo bouncing off the edges based on research on its movement and probability.', 'chapters': [{'end': 83.873, 'start': 0.987, 'title': 'Bouncing dvd logo coding challenge', 'summary': 'Features a coding challenge where the presenter attempts to create a bouncing dvd logo using basic programming concepts in javascript using the p5 library, with a 10-minute time limit and a shout out to a learner who created a similar project.', 'duration': 82.886, 'highlights': ['The presenter attempts to create a bouncing DVD logo using basic programming concepts in JavaScript using the p5 library. The main focus of the chapter, showcasing the technical challenge and coding demonstration.', 'The presenter sets a 10-minute time limit to complete the coding challenge. Quantifiable time constraint adding urgency and challenge to the coding task.', 'A shout out is given to Mike Boyd, who learned to code from various resources, including the coding train, and created a similar project. Acknowledgment of a learner who created a similar project, adding a personal touch and connection to the coding challenge.']}, {'end': 182.144, 'start': 84.274, 'title': 'Creating dvd logo animation', 'summary': 'Discusses creating an animation of a dvd logo using html canvas and the p5 library, with a canvas size of 800 by 600 and the logo bouncing off the edges based on research on its movement and probability.', 'duration': 97.87, 'highlights': ['The canvas is created with a size of 800 by 600 using the p5 library, resembling the aspect ratio of old television tubes, and the DVD logo is randomly placed within it.', 'Research on the science behind the DVD logo movement and probability is mentioned, with a link to an article provided for further information.', 'The animation involves the DVD logo moving in a direction where its X speed and Y speed are equal, starting at a 45-degree angle and bouncing off the edges.']}], 'duration': 181.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ987.jpg', 'highlights': ['The presenter attempts to create a bouncing DVD logo using basic programming concepts in JavaScript using the p5 library.', 'The canvas is created with a size of 800 by 600 using the p5 library, resembling the aspect ratio of old television tubes, and the DVD logo is randomly placed within it.', 'The presenter sets a 10-minute time limit to complete the coding challenge.', 'The animation involves the DVD logo moving in a direction where its X speed and Y speed are equal, starting at a 45-degree angle and bouncing off the edges.', 'A shout out is given to Mike Boyd, who learned to code from various resources, including the coding train, and created a similar project.']}, {'end': 587.381, 'segs': [{'end': 261.515, 'src': 'embed', 'start': 182.164, 'weight': 0, 'content': [{'end': 187.527, 'text': 'All right, so the first thing that I want to do is, I already forgot.', 'start': 182.164, 'duration': 5.363}, {'end': 191.855, 'text': 'Oh, go to the P5 editor.', 'start': 190.194, 'duration': 1.661}, {'end': 195.238, 'text': 'This is editor.p5js.org.', 'start': 192.116, 'duration': 3.122}, {'end': 196.9, 'text': "And you can see here I've made a canvas.", 'start': 195.478, 'duration': 1.422}, {'end': 198.361, 'text': "It's 800 by 600.", 'start': 196.96, 'duration': 1.401}, {'end': 200.423, 'text': "And I've drawn a background of 0.", 'start': 198.361, 'duration': 2.062}, {'end': 201.283, 'text': 'That means black.', 'start': 200.423, 'duration': 0.86}, {'end': 203.985, 'text': 'So this draw function is looping over and over again.', 'start': 201.543, 'duration': 2.442}, {'end': 205.847, 'text': 'And setup is happening just once.', 'start': 204.226, 'duration': 1.621}, {'end': 208.669, 'text': 'Set up the canvas, draw that background over and over again.', 'start': 206.187, 'duration': 2.482}, {'end': 211.352, 'text': 'So what I need is I need to keep track of that x.', 'start': 208.99, 'duration': 2.362}, {'end': 217.244, 'text': 'and the y position of the DVD logo.', 'start': 212.762, 'duration': 4.482}, {'end': 218.505, 'text': 'So I need a variable.', 'start': 217.505, 'duration': 1}, {'end': 221.927, 'text': 'I need x to store the x position and y to store the y position.', 'start': 218.545, 'duration': 3.382}, {'end': 227.39, 'text': 'And by the way, the way the canvas works is 0, 0 is in the top left here.', 'start': 222.207, 'duration': 5.183}, {'end': 231.632, 'text': 'This is x equals 0, y equals 0, all the way up to x equals 799.', 'start': 227.77, 'duration': 3.862}, {'end': 234.934, 'text': "So it's 800 wide, 0 through 799.", 'start': 231.632, 'duration': 3.302}, {'end': 235.354, 'text': 'Think about that.', 'start': 234.934, 'duration': 0.42}, {'end': 236.315, 'text': "I know I'm going too fast.", 'start': 235.394, 'duration': 0.921}, {'end': 240.077, 'text': 'Check my other tutorials where I speak hopefully a little bit slower.', 'start': 236.875, 'duration': 3.202}, {'end': 246.064, 'text': "All right, so I'm just going to set x equal to 400 and y equal to 300.", 'start': 241.721, 'duration': 4.343}, {'end': 251.588, 'text': "And I'm actually just going to draw a rectangle that's like 80 by 60.", 'start': 246.064, 'duration': 5.524}, {'end': 254.59, 'text': 'Sorry, a rectangle at x and y.', 'start': 251.588, 'duration': 3.002}, {'end': 257.452, 'text': 'So I want to draw a rectangle at x and y.', 'start': 254.59, 'duration': 2.862}, {'end': 261.515, 'text': 'And I want the width of the rectangle to be 80 and the height of the rectangle to be 60.', 'start': 257.452, 'duration': 4.063}], 'summary': 'Using p5 editor, created canvas 800x600, drew a black background, and positioned a rectangle at (400, 300) with dimensions 80x60.', 'duration': 79.351, 'max_score': 182.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ182164.jpg'}, {'end': 345.026, 'src': 'embed', 'start': 316.496, 'weight': 3, 'content': [{'end': 321.598, 'text': "These, by the way, up here are known as global variables, so they're variables that I can use throughout the program.", 'start': 316.496, 'duration': 5.102}, {'end': 325.039, 'text': 'I want to initialize them in setup and then use them in draw.', 'start': 322.098, 'duration': 2.941}, {'end': 330.281, 'text': "So I'm going to say xSpeed equals 10, ySpeed equals 10.", 'start': 325.379, 'duration': 4.902}, {'end': 337.903, 'text': 'I need separate variables, because when it bounces on one side, the y continues to go down but the x reverses direction.', 'start': 330.281, 'duration': 7.622}, {'end': 341.265, 'text': "or when it's on the top, the y changes direction but the x stays the same.", 'start': 337.903, 'duration': 3.362}, {'end': 345.026, 'text': "So then what I need to do, let's just make sure this runs.", 'start': 341.785, 'duration': 3.241}], 'summary': 'Global variables xspeed=10, yspeed=10 used for program, with specific behavior on bounce.', 'duration': 28.53, 'max_score': 316.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ316496.jpg'}, {'end': 414.542, 'src': 'embed', 'start': 385.001, 'weight': 4, 'content': [{'end': 387.143, 'text': "There's something in programming called an if statement.", 'start': 385.001, 'duration': 2.142}, {'end': 393.349, 'text': 'When do I want to turn it around? I want it to turn around if it hits the edge.', 'start': 387.684, 'duration': 5.665}, {'end': 398.353, 'text': 'If it hits the edge, change the amount of, change the value of x speed, reverse its direction.', 'start': 393.789, 'duration': 4.564}, {'end': 401.436, 'text': 'So if x speed is positive, then x speed should be negative.', 'start': 398.573, 'duration': 2.863}, {'end': 408.722, 'text': "So I could say if x equals and this is a little bit flawed, but I'm going to do this right now equals the width.", 'start': 401.716, 'duration': 7.006}, {'end': 414.542, 'text': "Width is a variable, by the way, that's keeping track of the width of the canvas, which is 800..", 'start': 410.14, 'duration': 4.402}], 'summary': 'Using an if statement to reverse x speed when hitting the edge of an 800-wide canvas.', 'duration': 29.541, 'max_score': 385.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ385001.jpg'}, {'end': 520.977, 'src': 'embed', 'start': 489.462, 'weight': 5, 'content': [{'end': 491.183, 'text': 'Boom, boom, ah, this is looking good.', 'start': 489.462, 'duration': 1.721}, {'end': 495.464, 'text': "Okay, oh, now I've got to do the other spots.", 'start': 491.323, 'duration': 4.141}, {'end': 497.905, 'text': 'Well, I can use something called an else if.', 'start': 495.544, 'duration': 2.361}, {'end': 507.288, 'text': 'So I can say else if x equals zero, x speed equals x speed times negative one.', 'start': 498.285, 'duration': 9.003}, {'end': 508.868, 'text': "But you know what, there's another way I could do this.", 'start': 507.308, 'duration': 1.56}, {'end': 511.91, 'text': 'I can actually say or, or if x equals zero.', 'start': 509.269, 'duration': 2.641}, {'end': 512.929, 'text': 'I want to do the same thing.', 'start': 511.93, 'duration': 0.999}, {'end': 516.573, 'text': 'So this weird double pipe symbol means or.', 'start': 513.429, 'duration': 3.144}, {'end': 520.977, 'text': 'By the way, to test if something is equals, I have to use two equals.', 'start': 517.774, 'duration': 3.203}], 'summary': "Using 'else if' statement and 'or' condition to handle x equals zero scenario in programming.", 'duration': 31.515, 'max_score': 489.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ489462.jpg'}, {'end': 581.679, 'src': 'heatmap', 'start': 560.26, 'weight': 0.722, 'content': [{'end': 569.255, 'text': "Ah, line 32, token, missing token, ah! Okay, here we go, let's, oh no! Oh, no.", 'start': 560.26, 'duration': 8.995}, {'end': 570.476, 'text': 'Oh, no.', 'start': 570.115, 'duration': 0.361}, {'end': 572.456, 'text': 'Oh, hi.', 'start': 571.976, 'duration': 0.48}, {'end': 578.858, 'text': "I said I wasn't going to edit anything, but I had to take a little short break there because my code disappeared in the browser.", 'start': 572.716, 'duration': 6.142}, {'end': 581.679, 'text': 'Then the timer went to zero, but now my code is back.', 'start': 579.418, 'duration': 2.261}], 'summary': 'The speaker encountered a missing token while coding, causing a brief interruption, but the issue was resolved.', 'duration': 21.419, 'max_score': 560.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ560260.jpg'}], 'start': 182.164, 'title': 'Creating dvd logo animation and variables, speed, bouncing, and edge detection', 'summary': 'Covers setting up a canvas using editor.p5js.org, initializing x and y positions, and drawing a rectangle with specified dimensions for dvd logo animation. it also discusses the usage of global variables xspeed and yspeed to control movement, implementing edge detection and bouncing on the canvas using if statements and or conditions.', 'chapters': [{'end': 285.707, 'start': 182.164, 'title': 'Creating dvd logo animation', 'summary': 'Covers setting up a canvas using editor.p5js.org, initializing x and y positions, and drawing a rectangle with specified dimensions, preparing to implement rate of change along the x-axis and y-axis for a dvd logo animation.', 'duration': 103.543, 'highlights': ['Setting up canvas using editor.p5js.org The speaker demonstrates setting up a canvas with dimensions 800 by 600 and drawing a black background using the draw function.', 'Initializing x and y positions for the DVD logo The speaker sets the x position to 400 and the y position to 300 for the DVD logo, explaining the coordinate system of the canvas.', 'Drawing a rectangle with specified dimensions The speaker uses p5.js functions to draw a rectangle with a width of 80 and a height of 60 at the specified x and y positions.', 'Preparing to implement rate of change along the x-axis and y-axis The speaker mentions the need to implement the rate of change along the x-axis and y-axis for the DVD logo animation.']}, {'end': 587.381, 'start': 285.947, 'title': 'Variables, speed, bouncing, and edge detection', 'summary': 'Discusses the usage of global variables xspeed and yspeed to control the movement of an object, as well as the implementation of edge detection and bouncing on the canvas, utilizing if statements and or conditions, to achieve movement and direction change in a visual programming environment.', 'duration': 301.434, 'highlights': ['Implemented global variables xSpeed and ySpeed to control the movement of an object. The global variables xSpeed and ySpeed are initialized in the setup and used in the draw function to control the movement of the object.', 'Utilized if statements for edge detection and direction change based on canvas boundaries. If statements are used to detect when the object hits the edge and change the x and y speed accordingly to reverse its direction.', "Demonstrated usage of 'or' condition for multiple edge detection scenarios. The 'or' condition is used to handle multiple edge detection scenarios, such as when the object reaches the top, bottom, left, or right edges of the canvas."]}], 'duration': 405.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ182164.jpg', 'highlights': ['Setting up canvas using editor.p5js.org with dimensions 800 by 600 and drawing a black background', 'Initializing x and y positions for the DVD logo at x=400 and y=300', 'Drawing a rectangle with a width of 80 and a height of 60 at specified x and y positions', 'Implemented global variables xSpeed and ySpeed to control the movement of an object', 'Utilized if statements for edge detection and direction change based on canvas boundaries', "Demonstrated usage of 'or' condition for multiple edge detection scenarios"]}, {'end': 1095.312, 'segs': [{'end': 673.216, 'src': 'embed', 'start': 644.417, 'weight': 1, 'content': [{'end': 646.178, 'text': "I'm going to add something called preload.", 'start': 644.417, 'duration': 1.761}, {'end': 652.261, 'text': "Preload is a block of code, a function, where it's good to write things that you want to happen.", 'start': 646.919, 'duration': 5.342}, {'end': 655.103, 'text': 'I know I said setup is stuff that happens at the beginning.', 'start': 652.361, 'duration': 2.742}, {'end': 656.864, 'text': 'Preload is like the pre-setup.', 'start': 655.463, 'duration': 1.401}, {'end': 660.125, 'text': 'And something that I want to do there is load media assets.', 'start': 656.984, 'duration': 3.141}, {'end': 662.486, 'text': "So I'm going to say dvd.png.", 'start': 660.685, 'duration': 1.801}, {'end': 665.428, 'text': 'What did I call it? dvd underscore logo dot png.', 'start': 662.666, 'duration': 2.762}, {'end': 673.216, 'text': "By the way, in the meantime, I selected this auto refresh thing so that it's rerunning the code every time I make a change.", 'start': 667.13, 'duration': 6.086}], 'summary': 'Adding preload function to load media assets like dvd_logo.png.', 'duration': 28.799, 'max_score': 644.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ644417.jpg'}, {'end': 714.665, 'src': 'embed', 'start': 689.125, 'weight': 2, 'content': [{'end': 694.267, 'text': 'but instead of saying rectangle, I can say image, and then I can say image.', 'start': 689.125, 'duration': 5.142}, {'end': 696.969, 'text': 'oh, what did I call it? DVD at that same location.', 'start': 694.267, 'duration': 2.702}, {'end': 697.529, 'text': 'So look at that.', 'start': 697.009, 'duration': 0.52}, {'end': 699.009, 'text': "There's the DVD logo.", 'start': 697.869, 'duration': 1.14}, {'end': 701.671, 'text': 'Now I might have messed with its dimensions.', 'start': 699.05, 'duration': 2.621}, {'end': 703.792, 'text': 'I can actually just use its native dimensions.', 'start': 701.731, 'duration': 2.061}, {'end': 708.22, 'text': "Ooh, but now it's not bouncing correctly.", 'start': 704.878, 'duration': 3.342}, {'end': 710.522, 'text': "So let's actually look at what its dimensions are.", 'start': 708.28, 'duration': 2.242}, {'end': 714.665, 'text': "I can just, in the Apple Finder, I can see it's 128.", 'start': 710.542, 'duration': 4.123}], 'summary': "Using 'image' instead of 'rectangle', adjusting dimensions to 128 in apple finder.", 'duration': 25.54, 'max_score': 689.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ689125.jpg'}, {'end': 848.812, 'src': 'heatmap', 'start': 809.068, 'weight': 1, 'content': [{'end': 811.73, 'text': 'Or what I probably want to do is resize the image to be something.', 'start': 809.068, 'duration': 2.662}, {'end': 813.811, 'text': 'But this is now going to be fine.', 'start': 811.75, 'duration': 2.061}, {'end': 817.446, 'text': 'Okay, so I can move this console down.', 'start': 814.884, 'duration': 2.562}, {'end': 818.748, 'text': 'I should do this again.', 'start': 817.466, 'duration': 1.282}, {'end': 822.531, 'text': 'This is actually what programming is, by the way.', 'start': 820.549, 'duration': 1.982}, {'end': 825.794, 'text': 'And now, here we go.', 'start': 823.332, 'duration': 2.462}, {'end': 828.016, 'text': 'Bouncing DVD logo.', 'start': 826.795, 'duration': 1.221}, {'end': 829.157, 'text': 'Some things I want to do to this.', 'start': 828.096, 'duration': 1.061}, {'end': 835.203, 'text': 'Number one is I want it to start in a random position every time so I can use the random function.', 'start': 829.538, 'duration': 5.665}, {'end': 848.812, 'text': "So this will now, every time I run the code, it'll start, oh, look at that, oh, it's stuck, oh, oh, oh no, oh god, everything, oh, this is the worst.", 'start': 837.987, 'duration': 10.825}], 'summary': 'Resizing image, moving console, randomizing dvd logo position in programming.', 'duration': 39.744, 'max_score': 809.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ809068.jpg'}, {'end': 893.233, 'src': 'embed', 'start': 858.137, 'weight': 0, 'content': [{'end': 859.257, 'text': 'oh, this is what I need to do.', 'start': 858.137, 'duration': 1.12}, {'end': 860.478, 'text': 'Let me separate this out.', 'start': 859.297, 'duration': 1.181}, {'end': 865.648, 'text': "I'm going to say, I'm going to be very strict about this DVD logo.", 'start': 861.502, 'duration': 4.146}, {'end': 873.279, 'text': "I'm going to say, if it goes past the width, reverse its direction and set it to that spot.", 'start': 866.549, 'duration': 6.73}, {'end': 875.142, 'text': 'Shuffle it back.', 'start': 874.341, 'duration': 0.801}, {'end': 877.706, 'text': "And I've got to do this now separately.", 'start': 875.823, 'duration': 1.883}, {'end': 882.321, 'text': "I've got to do the same thing.", 'start': 880.939, 'duration': 1.382}, {'end': 886.565, 'text': "Then I'm going to set it back equal to 0.", 'start': 882.841, 'duration': 3.724}, {'end': 893.233, 'text': "So there's this issue that can happen where it can go kind of like past the edge and then not make it all the way back on, I think.", 'start': 886.565, 'duration': 6.668}], 'summary': 'Addressing issue with dvd logo overshooting width and not returning completely, implementing strict rules for its movement.', 'duration': 35.096, 'max_score': 858.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ858137.jpg'}, {'end': 1052.354, 'src': 'embed', 'start': 954.95, 'weight': 3, 'content': [{'end': 958.772, 'text': "I've got to add a red, green, and blue value.", 'start': 954.95, 'duration': 3.822}, {'end': 960.052, 'text': "So I'm just going to say rgb.", 'start': 958.832, 'duration': 1.22}, {'end': 963.733, 'text': 'You can declare three variables at once, by the way, with commas.', 'start': 960.072, 'duration': 3.661}, {'end': 981.087, 'text': "And then I want those values to be, you're going to see why, I want those values to be some random number between 0 and 255.", 'start': 964.133, 'duration': 16.954}, {'end': 986.772, 'text': 'and then I am going to say tint RGB.', 'start': 981.087, 'duration': 5.685}, {'end': 990.295, 'text': 'So tint is a function that allows me to tint the image.', 'start': 987.072, 'duration': 3.223}, {'end': 994.419, 'text': "Look, so every time I run this, it's going to be a different color.", 'start': 990.575, 'duration': 3.844}, {'end': 999.203, 'text': 'Now I think I want to like guarantee, I want it to have some amount of brightness.', 'start': 994.439, 'duration': 4.764}, {'end': 1005.743, 'text': "So I could do like a hue, saturation, brightness thing, but I'm just going to limit the bottom range to 10.", 'start': 1000.322, 'duration': 5.421}, {'end': 1016.066, 'text': "And then every time it hits one of the edges, I'm actually going to put this in a separate function called function pick color.", 'start': 1005.743, 'duration': 10.323}, {'end': 1020.207, 'text': "And I'm going to say pick color.", 'start': 1018.807, 'duration': 1.4}, {'end': 1022.268, 'text': "I'm going to call that function.", 'start': 1020.227, 'duration': 2.041}, {'end': 1026.848, 'text': 'So this is me making up a new function and then calling that function because I want to reuse that code.', 'start': 1022.288, 'duration': 4.56}, {'end': 1037.446, 'text': "So in all of these cases, and really, There's got to be a nicer way to write this.", 'start': 1027.148, 'duration': 10.298}, {'end': 1039.348, 'text': 'And here we go.', 'start': 1037.627, 'duration': 1.721}, {'end': 1040.789, 'text': 'So now, we are done.', 'start': 1039.367, 'duration': 1.422}, {'end': 1049.152, 'text': 'And thank you for watching this coding challenge.', 'start': 1047.271, 'duration': 1.881}, {'end': 1052.354, 'text': "I'm sorry this turned into something of a mess.", 'start': 1050.153, 'duration': 2.201}], 'summary': 'Creating a function to generate random rgb values between 0 and 255, applying tint to the image, and defining a separate function for reusing the code.', 'duration': 97.404, 'max_score': 954.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ954950.jpg'}, {'end': 1095.312, 'src': 'embed', 'start': 1071.843, 'weight': 6, 'content': [{'end': 1075.305, 'text': 'the world of the bouncing DVD logo is now yours to play with.', 'start': 1071.843, 'duration': 3.462}, {'end': 1077.725, 'text': "I don't know, hope you learned something, had a little bit of fun.", 'start': 1075.325, 'duration': 2.4}, {'end': 1086.349, 'text': 'If you want to learn more about programming, I basically do this exact same thing in my Foundations of JavaScript with p5.js tutorial series,', 'start': 1078.046, 'duration': 8.303}, {'end': 1089.37, 'text': 'but kind of step through all these concepts quite a bit more slowly.', 'start': 1086.349, 'duration': 3.021}, {'end': 1093.351, 'text': "I don't know whether that's going to be helpful or interesting to you, but you're welcome to watch it.", 'start': 1090.41, 'duration': 2.941}, {'end': 1095.312, 'text': 'Thanks, and see you in a future coding challenge.', 'start': 1093.371, 'duration': 1.941}], 'summary': 'Learn about programming with p5.js in my tutorial series.', 'duration': 23.469, 'max_score': 1071.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ1071843.jpg'}], 'start': 587.781, 'title': 'Creating dynamic dvd logo animation and dynamic colors in coding projects', 'summary': 'Covers creating an animation of a bouncing dvd logo, including adding the logo file, using the preload function, adjusting dimensions, and implementing logic alongside demonstrating creating dynamic colors using random values, defining a function to ensure brightness, and reusing code through function calls to explore variations and possibilities in programming.', 'chapters': [{'end': 954.51, 'start': 587.781, 'title': 'Dvd logo animation', 'summary': 'Covers how to create an animation of a bouncing dvd logo in a coding project, including adding the logo file, using the preload function, adjusting dimensions, and implementing logic to ensure the logo stays within the boundaries of the display.', 'duration': 366.729, 'highlights': ['The chapter demonstrates how to add a DVD logo file to the coding project and utilize the preload function to load media assets.', "It explains the process of adjusting the dimensions of the DVD logo and the use of the 'width' and 'height' properties of the image.", 'The chapter illustrates the implementation of logic to ensure the bouncing DVD logo stays within the boundaries of the display by reversing its direction when it reaches the edge and setting it back to the appropriate location.']}, {'end': 1095.312, 'start': 954.95, 'title': 'Creating dynamic colors and functions', 'summary': 'Demonstrates creating dynamic colors using random values between 0 and 255, defining a function to ensure brightness, and the concept of reusing code through function calls, emphasizing the exploration of variations and possibilities in programming.', 'duration': 140.362, 'highlights': ['The chapter showcases the creation of dynamic colors by generating random RGB values between 0 and 255, adding an element of variability to the program.', 'It introduces the concept of defining a function to ensure a minimum brightness level, providing a method to control the visual output of the program.', "The implementation of a separate function, 'pick color,' and its subsequent reuse highlights the importance of modular and reusable code in programming.", 'The emphasis on exploration, variations, and possibilities in programming encourages viewers to experiment and create their own unique adaptations, fostering creativity and innovation.', "The mention of the tutorial series 'Foundations of JavaScript with p5.js' provides an additional resource for viewers to deepen their understanding of programming concepts at a slower pace."]}], 'duration': 507.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0j86zuqqTlQ/pics/0j86zuqqTlQ587781.jpg', 'highlights': ['The chapter illustrates the implementation of logic to ensure the bouncing DVD logo stays within the boundaries of the display by reversing its direction when it reaches the edge and setting it back to the appropriate location.', 'The chapter demonstrates how to add a DVD logo file to the coding project and utilize the preload function to load media assets.', "It explains the process of adjusting the dimensions of the DVD logo and the use of the 'width' and 'height' properties of the image.", 'The chapter showcases the creation of dynamic colors by generating random RGB values between 0 and 255, adding an element of variability to the program.', 'It introduces the concept of defining a function to ensure a minimum brightness level, providing a method to control the visual output of the program.', "The implementation of a separate function, 'pick color,' and its subsequent reuse highlights the importance of modular and reusable code in programming.", 'The emphasis on exploration, variations, and possibilities in programming encourages viewers to experiment and create their own unique adaptations, fostering creativity and innovation.', "The mention of the tutorial series 'Foundations of JavaScript with p5.js' provides an additional resource for viewers to deepen their understanding of programming concepts at a slower pace."]}], 'highlights': ['The tutorial explains creating an animation of a DVD logo using HTML canvas and p5 library with a canvas size of 800x600, discussing the setup, variables, speed, edge detection, bouncing, and dynamic colors, providing a comprehensive guide for coding projects.', 'The presenter attempts to create a bouncing DVD logo using basic programming concepts in JavaScript using the p5 library.', 'The canvas is created with a size of 800 by 600 using the p5 library, resembling the aspect ratio of old television tubes, and the DVD logo is randomly placed within it.', 'The presenter sets a 10-minute time limit to complete the coding challenge.', 'The animation involves the DVD logo moving in a direction where its X speed and Y speed are equal, starting at a 45-degree angle and bouncing off the edges.', 'A shout out is given to Mike Boyd, who learned to code from various resources, including the coding train, and created a similar project.', 'Setting up canvas using editor.p5js.org with dimensions 800 by 600 and drawing a black background', 'Initializing x and y positions for the DVD logo at x=400 and y=300', 'Drawing a rectangle with a width of 80 and a height of 60 at specified x and y positions', 'Implemented global variables xSpeed and ySpeed to control the movement of an object', 'Utilized if statements for edge detection and direction change based on canvas boundaries', "Demonstrated usage of 'or' condition for multiple edge detection scenarios", 'The chapter illustrates the implementation of logic to ensure the bouncing DVD logo stays within the boundaries of the display by reversing its direction when it reaches the edge and setting it back to the appropriate location.', 'The chapter demonstrates how to add a DVD logo file to the coding project and utilize the preload function to load media assets.', "It explains the process of adjusting the dimensions of the DVD logo and the use of the 'width' and 'height' properties of the image.", 'The chapter showcases the creation of dynamic colors by generating random RGB values between 0 and 255, adding an element of variability to the program.', 'It introduces the concept of defining a function to ensure a minimum brightness level, providing a method to control the visual output of the program.', "The implementation of a separate function, 'pick color,' and its subsequent reuse highlights the importance of modular and reusable code in programming.", 'The emphasis on exploration, variations, and possibilities in programming encourages viewers to experiment and create their own unique adaptations, fostering creativity and innovation.', "The mention of the tutorial series 'Foundations of JavaScript with p5.js' provides an additional resource for viewers to deepen their understanding of programming concepts at a slower pace."]}