title
Coding Challenge #138: Angry Birds with Matter.js

description
An attempt to implement the basic mechanics of Angry Birds in JavaScript using p5.js and the matter.js physics engine. Code: https://thecodingtrain.com/challenges/138-angry-birds-with-matterjs 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/UOR4nIcNS 🎥 Previous video: https://youtu.be/3_0Ax95jIrk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/PoW8g67XNxA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🐦 Angry Birds: https://www.angrybirds.com/ 🚒 Matter.js: http://brm.io/matter-js/ Videos: 🚂 Matter.js Physics: https://youtube.com/playlist?list=PLRqwX-V7Uu6bLh3T_4wtrmVHOrOEM1ig_ 🚂 Inheritance in JavaScript: https://youtu.be/MfxBfRD0FVU 🚂 Inheritance in Java: https://youtu.be/e6eXD8DHc_A 🕹️ Phaser Game Development with Catt Small: https://youtu.be/T9kOFSFvgKc 🔴 Coding Train Live 171: https://youtu.be/EvOC_vyFAiI?t=5047s Related Coding Challenges: 🚂 #62 Plinko with Matter.js: https://youtu.be/KakpnfDv_f0 🚂 #41 Clappy Bird: https://youtu.be/aKiyCeIuwn4 🚂 #31 Flappy Bird: https://youtu.be/cXgA1d_E-jY 🚂 #20 3D Cloth with Toxiclibs: https://youtu.be/jrk_lOg_pVA 🚂 #147 Chrome Dinosaur Game: https://youtu.be/l0HoJHc-63Q Timestamps: 0:00 Introduction! 1:30 Getting started with an Object Oriented Approach 5:08 Adding and setting up Matter.js 11:05 Adding and using the physics engine 12:52 Making the ground static 15:38 Adding mouse constraints to control the bird 21:20 Adding the slingshot 27:00 Launching the bird with the slingshot! 30:57 Fixing bugs and things to refactor later! 33:07 Replacing the shapes with images 37:15 Adding restitution 38:47 Wrapping things up and improvements to make! 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://thecodingtrain.com/discord 💖 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 #matterjs #physicsengine2d #angrybirds #p5js #javascript

detail
{'title': 'Coding Challenge #138: Angry Birds with Matter.js', 'heatmap': [{'end': 224.916, 'start': 147.325, 'weight': 0.761}, {'end': 1725.881, 'start': 1685.32, 'weight': 0.767}], 'summary': 'In this coding challenge, the presenter builds an angry birds-style game using p5.js and matter.js, covering the creation of game elements, object-oriented approach for game development, integration of matter.js physics engine with p5.js, object manipulation, slingshot creation, and development of the angry birds game basics, encouraging viewers to enhance the code.', 'chapters': [{'end': 284.197, 'segs': [{'end': 29.62, 'src': 'embed', 'start': 0.984, 'weight': 2, 'content': [{'end': 3.547, 'text': 'Hello, welcome to a coding challenge, angry birds.', 'start': 0.984, 'duration': 2.563}, {'end': 6.891, 'text': "Although, my birds won't be angry, they're gonna be loving, loving birds.", 'start': 3.748, 'duration': 3.143}, {'end': 11.838, 'text': "But maybe they won't even be birds, they'll be like cute little coding trained characters, but that's not the point.", 'start': 7.833, 'duration': 4.005}, {'end': 20.096, 'text': 'I am going to program, a version, a much simpler, simplified version of an Angry Birds-style clone.', 'start': 12.258, 'duration': 7.838}, {'end': 25.399, 'text': "I'm going to use p5.js, I'm going to use a physics library called matter.js, and I'm going to get started in one moment.", 'start': 20.176, 'duration': 5.223}, {'end': 29.62, 'text': 'But first, let me diagram out what I need.', 'start': 25.459, 'duration': 4.161}], 'summary': 'Creating a simplified angry birds-style clone using p5.js and matter.js.', 'duration': 28.636, 'max_score': 0.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY984.jpg'}, {'end': 85.95, 'src': 'embed', 'start': 41.925, 'weight': 0, 'content': [{'end': 45.577, 'text': 'And I also need the ground.', 'start': 41.925, 'duration': 3.652}, {'end': 49.501, 'text': "So I'm going to start my simplified Angry Birds.", 'start': 45.838, 'duration': 3.663}, {'end': 52.543, 'text': "It's going to have a single box, a single bird.", 'start': 49.601, 'duration': 2.942}, {'end': 54.204, 'text': 'The box is sitting on the ground.', 'start': 52.883, 'duration': 1.321}, {'end': 58.207, 'text': "I'm going to want to toss the bird at the box and knock it over.", 'start': 54.564, 'duration': 3.643}, {'end': 64.032, 'text': 'And from there, the glorious games throughout the universe that you will make maybe will follow.', 'start': 58.347, 'duration': 5.685}, {'end': 65.633, 'text': 'This is the P5 web editor.', 'start': 64.312, 'duration': 1.321}, {'end': 67.835, 'text': "I'm going to use P5 for all of the drawing stuff.", 'start': 65.653, 'duration': 2.182}, {'end': 73.159, 'text': "And I'm going to use the physics library, matter.js, for handling all of the physics.", 'start': 68.115, 'duration': 5.044}, {'end': 77.823, 'text': "Now, Matter.js does have rendering built into it, but I'm going to do things,", 'start': 73.559, 'duration': 4.264}, {'end': 85.95, 'text': 'my sort of way of combining both libraries so that I can do all the rendering custom in P5 and maybe, by the end of this video,', 'start': 77.823, 'duration': 8.127}], 'summary': 'Creating simplified angry birds game using p5 web editor, matter.js physics library, with custom rendering in p5.', 'duration': 44.025, 'max_score': 41.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY41925.jpg'}, {'end': 224.916, 'src': 'heatmap', 'start': 131.49, 'weight': 4, 'content': [{'end': 135.132, 'text': "Then I'm going to, oh, and so I need to put the arguments in here, x, y, w, h.", 'start': 131.49, 'duration': 3.642}, {'end': 142.163, 'text': "And what do I need to do? I'm going to write a show function.", 'start': 138.161, 'duration': 4.002}, {'end': 146.544, 'text': "And in here, I'm just going to say, I'm going to use fill to make it white.", 'start': 142.563, 'duration': 3.981}, {'end': 154.207, 'text': "And I'm going to say rectangle this.x, this.y, this.w, this.h.", 'start': 147.325, 'duration': 6.882}, {'end': 158.109, 'text': 'So this is the basic idea of a box class with no physics.', 'start': 154.828, 'duration': 3.281}, {'end': 161.83, 'text': 'This is just the data about a box, and this is me drawing it.', 'start': 158.489, 'duration': 3.341}, {'end': 168.811, 'text': "So now in the main sketch, I'm going to say let a ground.", 'start': 162.671, 'duration': 6.14}, {'end': 170.552, 'text': "I'm going to have a global variable called ground.", 'start': 168.811, 'duration': 1.741}, {'end': 178.715, 'text': "I'm going to say ground equals a new box and it's going to be the x is going to be at zero, the y is going to be at height minus 20,", 'start': 170.552, 'duration': 8.163}, {'end': 184.229, 'text': 'and the width will be the full width of the window and the height will be 20..', 'start': 178.715, 'duration': 5.514}, {'end': 186.09, 'text': "And then I'm going to say ground.show.", 'start': 184.229, 'duration': 1.861}, {'end': 187.391, 'text': "Now, it's giving me all sorts of errors.", 'start': 186.13, 'duration': 1.261}, {'end': 189.093, 'text': 'Like, it has no idea what a box is.', 'start': 187.431, 'duration': 1.662}, {'end': 196.138, 'text': "And the reason why it has no idea what a box is is because even though I added a new JavaScript file, I didn't add it to my index.html.", 'start': 189.493, 'duration': 6.645}, {'end': 200.801, 'text': 'So let me go and add it to index.html, box.js.', 'start': 196.418, 'duration': 4.383}, {'end': 201.442, 'text': 'And there we go.', 'start': 201.001, 'duration': 0.441}, {'end': 204.144, 'text': 'Look Step one is done.', 'start': 201.482, 'duration': 2.662}, {'end': 205.825, 'text': 'I have the ground.', 'start': 204.164, 'duration': 1.661}, {'end': 206.806, 'text': 'The ground is there.', 'start': 205.905, 'duration': 0.901}, {'end': 211.489, 'text': "Now, the next thing I'm going to do is I'm going to have a box.", 'start': 207.086, 'duration': 4.403}, {'end': 212.41, 'text': "I'm going to just call it a box.", 'start': 211.589, 'duration': 0.821}, {'end': 215.099, 'text': 'A box is another new box.', 'start': 213.556, 'duration': 1.543}, {'end': 223.574, 'text': "And let's put it over to the side in some arbitrary place and say box.show.", 'start': 215.54, 'duration': 8.034}, {'end': 224.916, 'text': 'There it is.', 'start': 224.516, 'duration': 0.4}], 'summary': 'Creating a basic box class with no physics and displaying it in a main sketch.', 'duration': 26.619, 'max_score': 131.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY131490.jpg'}, {'end': 293.806, 'src': 'embed', 'start': 258.187, 'weight': 1, 'content': [{'end': 260.947, 'text': "but I'm just going to do like a sort of horrible copy paste job.", 'start': 258.187, 'duration': 2.76}, {'end': 272.476, 'text': "But I'm going to change this to an R to indicate radius because my bird is going to be a circle and this dot R.", 'start': 261.149, 'duration': 11.327}, {'end': 279.433, 'text': 'And now I can say let bird Bird equals a new bird.', 'start': 272.476, 'duration': 6.957}, {'end': 284.197, 'text': "And it'll be at like 50 pixels over, 300 pixels down, and with a radius of 25.", 'start': 279.573, 'duration': 4.624}, {'end': 293.806, 'text': "And it doesn't know what bird is yet again because I now also need to add bird.js to my index.html file.", 'start': 284.197, 'duration': 9.609}], 'summary': 'Creating a new bird with a radius of 25 at 50 pixels over, 300 pixels down.', 'duration': 35.619, 'max_score': 258.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY258187.jpg'}], 'start': 0.984, 'title': 'Game development with p5.js and matter.js', 'summary': 'Presents a coding challenge to build an angry birds-style game using p5.js and matter.js, emphasizing the creation of game elements and an object-oriented approach for game development, including class implementation and object instantiation.', 'chapters': [{'end': 85.95, 'start': 0.984, 'title': 'Coding challenge: angry birds clone', 'summary': "Introduces a coding challenge to create a simplified version of an angry birds-style game using p5.js and matter.js, focusing on creating a box, a bird, and the ground to initiate the game's mechanics.", 'duration': 84.966, 'highlights': ['The chapter introduces a coding challenge to create a simplified version of an Angry Birds-style game using p5.js and matter.js.', 'The game will involve creating a box, a bird, and the ground, with the objective of knocking over the box by tossing the bird at it.', 'The author plans to use p5.js for drawing and matter.js for physics handling in a customized manner.']}, {'end': 284.197, 'start': 85.95, 'title': 'Object-oriented approach for game development', 'summary': 'Discusses the implementation of an object-oriented approach for creating a game, including creating classes for box and bird, defining properties and methods, and instantiating objects with specific attributes.', 'duration': 198.247, 'highlights': ['A box class is created with properties like x, y, width, and height, and a show function to draw the box, emphasizing the use of constructor to pass arguments (x, y, w, h) and the concept of a box class with no physics.', "A ground object is instantiated as an instance of the box class with specific attributes (x: 0, y: height-20, width: window's full width, height: 20), demonstrating the instantiation of objects with specific attributes.", 'A bird class is created with a radius property and an instance of the bird is instantiated with specific attributes (x: 50, y: 300, radius: 25), showcasing the implementation of classes and object instantiation for game development.']}], 'duration': 283.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY984.jpg', 'highlights': ['The chapter introduces a coding challenge to create a simplified version of an Angry Birds-style game using p5.js and matter.js.', 'A box class is created with properties like x, y, width, and height, and a show function to draw the box, emphasizing the use of constructor to pass arguments (x, y, w, h) and the concept of a box class with no physics.', 'The game will involve creating a box, a bird, and the ground, with the objective of knocking over the box by tossing the bird at it.', "A ground object is instantiated as an instance of the box class with specific attributes (x: 0, y: height-20, width: window's full width, height: 20), demonstrating the instantiation of objects with specific attributes.", 'The author plans to use p5.js for drawing and matter.js for physics handling in a customized manner.', 'A bird class is created with a radius property and an instance of the bird is instantiated with specific attributes (x: 50, y: 300, radius: 25), showcasing the implementation of classes and object instantiation for game development.']}, {'end': 660.557, 'segs': [{'end': 311.317, 'src': 'embed', 'start': 284.197, 'weight': 4, 'content': [{'end': 293.806, 'text': "And it doesn't know what bird is yet again because I now also need to add bird.js to my index.html file.", 'start': 284.197, 'duration': 9.609}, {'end': 294.807, 'text': "So I've got the bird.", 'start': 293.986, 'duration': 0.821}, {'end': 295.808, 'text': "I've got the box.", 'start': 295.047, 'duration': 0.761}, {'end': 297.129, 'text': 'These are all the elements.', 'start': 296.128, 'duration': 1.001}, {'end': 301.011, 'text': 'So I have all the elements that I want in my scene.', 'start': 297.549, 'duration': 3.462}, {'end': 307.115, 'text': "Ultimately, I'm going to want to have a stack of boxes and use images to make this have more personality.", 'start': 301.371, 'duration': 5.744}, {'end': 311.317, 'text': 'But the next thing that I need to do is add physics.', 'start': 307.475, 'duration': 3.842}], 'summary': 'Adding bird.js and physics to create scene elements and interactions.', 'duration': 27.12, 'max_score': 284.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY284197.jpg'}, {'end': 388.185, 'src': 'embed', 'start': 356.429, 'weight': 3, 'content': [{'end': 358.131, 'text': "I'm going to grab one of these.", 'start': 356.429, 'duration': 1.702}, {'end': 361.973, 'text': 'These are the script tags for the p5 library.', 'start': 358.491, 'duration': 3.482}, {'end': 370.762, 'text': "And so instead, I've got p5, p5 dom, p5 sound, and now I want to add matter.js as a library.", 'start': 363.014, 'duration': 7.748}, {'end': 376.328, 'text': 'So these are now all of my libraries and all of my custom JavaScript code.', 'start': 371.103, 'duration': 5.225}, {'end': 380.833, 'text': "And if I go back to sketch.js, let's make sure the matter.library has loaded.", 'start': 376.689, 'duration': 4.144}, {'end': 388.185, 'text': 'If I just say console.log matter, We can see, yes, stuff is coming out here, the library is loaded.', 'start': 381.173, 'duration': 7.012}], 'summary': 'Adding matter.js as a library to p5, confirming its loading with console.log.', 'duration': 31.756, 'max_score': 356.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY356429.jpg'}, {'end': 560.448, 'src': 'embed', 'start': 529.871, 'weight': 0, 'content': [{'end': 539.418, 'text': "I want to say, hey, matter, I want to say, give me a position, which is this.body's position.", 'start': 529.871, 'duration': 9.547}, {'end': 544.862, 'text': "And now, I'm going to draw the rectangle at pos.x and pos.y.", 'start': 540.379, 'duration': 4.483}, {'end': 554.345, 'text': 'Now there may be a way, in fact, that I could dig into the body and get its width and height,', 'start': 547.523, 'duration': 6.822}, {'end': 557.287, 'text': "but I'm just going to store those out of convenience for myself.", 'start': 554.345, 'duration': 2.942}, {'end': 560.448, 'text': 'The size of these rectangles is never going to change, so I can keep that.', 'start': 557.667, 'duration': 2.781}], 'summary': 'Drawing a rectangle at a position and storing its size for convenience.', 'duration': 30.577, 'max_score': 529.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY529871.jpg'}, {'end': 650.572, 'src': 'embed', 'start': 619.971, 'weight': 1, 'content': [{'end': 625.034, 'text': "So this actually, I've told matter.js where the object is and drawn it in a different place.", 'start': 619.971, 'duration': 5.063}, {'end': 627.116, 'text': 'So I need to reconcile those two things.', 'start': 625.274, 'duration': 1.842}, {'end': 632.94, 'text': "So to reconcile those two things, there's a few different ways I could do it.", 'start': 628.977, 'duration': 3.963}, {'end': 637.743, 'text': "One is first, I should say rect mode, center, so that I'm drawing.", 'start': 633.32, 'duration': 4.423}, {'end': 641.466, 'text': "But now you can see everything's off in a weird place, which is maybe fine.", 'start': 637.783, 'duration': 3.683}, {'end': 644.248, 'text': "Maybe I just need to rethink where I'm placing this stuff.", 'start': 641.506, 'duration': 2.742}, {'end': 650.572, 'text': 'For example, the ground would be now at width divided by 2.', 'start': 644.708, 'duration': 5.864}], 'summary': 'Reconciling object placement and drawing in matter.js, considering repositioning and adjusting ground placement.', 'duration': 30.601, 'max_score': 619.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY619971.jpg'}], 'start': 284.197, 'title': 'Adding and creating matter.js physics', 'summary': 'Covers adding the matter.js library through npm to enable physics in the scene and integrating it with the p5 web editor, as well as creating rectangular and circular bodies using matter.js, establishing engine and world objects, and adding bodies to the world.', 'chapters': [{'end': 400.933, 'start': 284.197, 'title': 'Adding matter.js physics engine', 'summary': 'Discusses adding the matter.js library through npm to enable physics in the scene, and integrating it with the p5 web editor for creating interactive elements.', 'duration': 116.736, 'highlights': ['The matter.js library is added through NPM Node Package Manager to enable physics in the scene.', 'Integration of matter.js with the p5 web editor involves adding the library to the index.html file and verifying its loading in the sketch.js file.', 'The use of matter.js library allows for the creation of interactive elements and the implementation of physics without the need to write custom functions.', 'The process involves obtaining the minified version of matter.js from the unpkg content delivery network for NPM packages.', 'The chapter also mentions the potential use of images to add more personality to the stack of boxes in the scene.']}, {'end': 660.557, 'start': 400.933, 'title': 'Creating matter.js bodies', 'summary': 'Discusses creating rectangular and circular bodies using matter.js, establishing an engine object, a world object, and adding bodies to the world.', 'duration': 259.624, 'highlights': ['Establishing an engine object and a world object The speaker discusses the need to establish an engine object and a world object in order to create bodies using Matter.js.', 'Creating rectangular and circular bodies The speaker explains the process of creating rectangular and circular bodies using the Matter.js library, including the function matter.bodies.rectangle.', 'Adding bodies to the world The speaker describes the process of adding bodies to the world using the matter.world.add function in Matter.js.', 'Positioning and drawing the bodies The speaker discusses positioning and drawing the created bodies, including addressing the issue of reconciling the default behavior of p5 with the xy position for objects in Matter.js.']}], 'duration': 376.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY284197.jpg', 'highlights': ['The matter.js library is added through NPM Node Package Manager to enable physics in the scene.', 'Integration of matter.js with the p5 web editor involves adding the library to the index.html file and verifying its loading in the sketch.js file.', 'Establishing an engine object and a world object The speaker discusses the need to establish an engine object and a world object in order to create bodies using Matter.js.', 'Creating rectangular and circular bodies The speaker explains the process of creating rectangular and circular bodies using the Matter.js library, including the function matter.bodies.rectangle.', 'Adding bodies to the world The speaker describes the process of adding bodies to the world using the matter.world.add function in Matter.js.']}, {'end': 1146.811, 'segs': [{'end': 693.285, 'src': 'embed', 'start': 660.777, 'weight': 1, 'content': [{'end': 663.759, 'text': 'And I obviously could use some math to get it to rest perfectly on the ground.', 'start': 660.777, 'duration': 2.982}, {'end': 664.859, 'text': "But I'm not going to worry about that.", 'start': 663.979, 'duration': 0.88}, {'end': 666.62, 'text': "Still, there's no physics happening.", 'start': 664.979, 'duration': 1.641}, {'end': 669.362, 'text': 'Why is there no physics happening? I created the body.', 'start': 667.06, 'duration': 2.302}, {'end': 670.403, 'text': 'I added it to the world.', 'start': 669.402, 'duration': 1.001}, {'end': 673.526, 'text': "It's because I'm not running the engine.", 'start': 670.984, 'duration': 2.542}, {'end': 676.328, 'text': 'So what I need to do, draw is my loop.', 'start': 673.806, 'duration': 2.522}, {'end': 680.572, 'text': 'So basically, I need to say, every time through draw, step forward in time.', 'start': 676.668, 'duration': 3.904}, {'end': 682.653, 'text': 'So I think I can just say engine.run.', 'start': 681.032, 'duration': 1.621}, {'end': 693.285, 'text': "No I looked it up, I probably could have shown you me looking it up, but it's not, how do you look this stuff up? Let me show you looking it up.", 'start': 682.994, 'duration': 10.291}], 'summary': 'Engine needs to run to simulate physics in the world.', 'duration': 32.508, 'max_score': 660.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY660777.jpg'}, {'end': 751.303, 'src': 'embed', 'start': 702.272, 'weight': 4, 'content': [{'end': 705.715, 'text': "But that's not, oh, I forgot to say matter.engine, but that's actually not what I want.", 'start': 702.272, 'duration': 3.443}, {'end': 707.637, 'text': 'I want to use update.', 'start': 706.596, 'duration': 1.041}, {'end': 709.757, 'text': "I think there's two different ways of doing things.", 'start': 707.937, 'duration': 1.82}, {'end': 720.482, 'text': "Engine.run will just set the engine running, but I want to lock step my P5 animation loop with my matter physics engine, so I'm going to use update.", 'start': 710.898, 'duration': 9.584}, {'end': 729.906, 'text': "And what I'm going to do then is in here, I'm going to say engine.update, but I need to say matter.engine.update.", 'start': 721.383, 'duration': 8.523}, {'end': 730.346, 'text': 'And there we go.', 'start': 729.946, 'duration': 0.4}, {'end': 734.989, 'text': 'Oh! Did you see that? The physics is happening.', 'start': 730.387, 'duration': 4.602}, {'end': 738.203, 'text': 'Oh! but the ground fell out below us.', 'start': 735.349, 'duration': 2.854}, {'end': 739.505, 'text': "We're sinking.", 'start': 738.884, 'duration': 0.621}, {'end': 742.078, 'text': "It's okay, everybody.", 'start': 741.178, 'duration': 0.9}, {'end': 748.241, 'text': 'We can violate the laws of physics and create an object with infinite mass that never moves.', 'start': 742.639, 'duration': 5.602}, {'end': 751.303, 'text': 'The ground can be known as a static.', 'start': 748.561, 'duration': 2.742}], 'summary': 'Using matter engine update to lock step p5 animation with physics engine, creating static ground.', 'duration': 49.031, 'max_score': 702.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY702272.jpg'}, {'end': 893.149, 'src': 'embed', 'start': 845.962, 'weight': 0, 'content': [{'end': 851.066, 'text': "So this actually is one of the rare instances where I've got to put this script tag before that one.", 'start': 845.962, 'duration': 5.104}, {'end': 853.469, 'text': "No? Oh no, that's the bird.", 'start': 851.326, 'duration': 2.143}, {'end': 855.672, 'text': 'Yes, this is going to work any second now.', 'start': 853.789, 'duration': 1.883}, {'end': 858.556, 'text': 'Yes, okay, oh, it still goes away.', 'start': 856.573, 'duration': 1.983}, {'end': 863.423, 'text': 'So now I need to figure out how do I just change one thing to make this static.', 'start': 858.936, 'duration': 4.487}, {'end': 868.049, 'text': 'Can I do this? This.body is static equals true.', 'start': 864.004, 'duration': 4.045}, {'end': 871.776, 'text': 'Okay, so this is the idea of.', 'start': 869.915, 'duration': 1.861}, {'end': 876.219, 'text': 'I have a whole other kind of body that extends box.', 'start': 871.776, 'duration': 4.443}, {'end': 881.042, 'text': 'it does everything the same way, but I can set an additional variable is static to true.', 'start': 876.219, 'duration': 4.823}, {'end': 888.326, 'text': "And so now when this runs, we've got our angry bird box thing over there, and now we're ready to start working with our bird.", 'start': 881.322, 'duration': 7.004}, {'end': 890.568, 'text': "Ooh, okay, so let's work with our bird now.", 'start': 888.506, 'duration': 2.062}, {'end': 893.149, 'text': 'So we need to get rid of the x and the y.', 'start': 891.088, 'duration': 2.061}], 'summary': "Making script tag changes, setting body to static, and working with bird's x and y.", 'duration': 47.187, 'max_score': 845.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY845962.jpg'}], 'start': 660.777, 'title': 'Integrating matter.js physics engine with p5 and creating static bodies with mouse constraints', 'summary': 'Discusses integrating matter.js physics engine with p5.js animation loop, utilizing engine.update function, and demonstrating inheritance. it also covers creating static bodies with additional variables and implementing a mouse constraint for user interaction in game development.', 'chapters': [{'end': 845.522, 'start': 660.777, 'title': 'Integrating matter.js physics engine with p5', 'summary': 'Discusses integrating the matter.js physics engine with the p5.js animation loop, utilizing the engine.update function and demonstrating the use of inheritance in creating static and dynamic objects.', 'duration': 184.745, 'highlights': ['By using the engine.update function in the P5.js animation loop, the physics engine becomes active and the physics starts to take effect, as demonstrated in the example with the ground and rectangle objects.', "The concept of inheritance is applied to create a separate 'ground' class that inherits properties and methods from the 'box' class, showcasing the practical use of inheritance in object-oriented programming.", 'The distinction between static and dynamic objects in the Matter.js physics engine is highlighted, emphasizing that objects are dynamic by default, and demonstrating how to create static objects like the ground.']}, {'end': 1146.811, 'start': 845.962, 'title': 'Creating static bodies and mouse constraints', 'summary': 'Discusses creating static bodies and implementing mouse constraints using matter.js for game development, with key points including creating static bodies with additional variables and implementing a mouse constraint for user interaction.', 'duration': 300.849, 'highlights': ["Creating a static body by extending box and setting an additional variable 'isStatic' to true The speaker explains the concept of creating a static body that extends box and setting an additional variable 'isStatic' to true for implementation in game development.", 'Using matter.bodies.circle to define the body of a bird and adding it to the world The speaker demonstrates the use of matter.bodies.circle to define the body of a bird, along with adding it to the world for game implementation.', 'Implementation of a mouse constraint using matter.mouseConstraint.create for user interaction The speaker explores the implementation of a mouse constraint using matter.mouseConstraint.create for enabling user interaction in the game development process.', 'Aliasing matter.js objects to simplify code by creating a list of objects and setting them equal to matter The speaker discusses the technique of aliasing matter.js objects to simplify code by creating a list of objects and setting them equal to matter, making the code more succinct and easier to manage.']}], 'duration': 486.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY660777.jpg', 'highlights': ['By using the engine.update function in the P5.js animation loop, the physics engine becomes active and the physics starts to take effect, as demonstrated in the example with the ground and rectangle objects.', "The concept of inheritance is applied to create a separate 'ground' class that inherits properties and methods from the 'box' class, showcasing the practical use of inheritance in object-oriented programming.", 'The distinction between static and dynamic objects in the Matter.js physics engine is highlighted, emphasizing that objects are dynamic by default, and demonstrating how to create static objects like the ground.', "Creating a static body by extending box and setting an additional variable 'isStatic' to true The speaker explains the concept of creating a static body that extends box and setting an additional variable 'isStatic' to true for implementation in game development.", 'Using matter.bodies.circle to define the body of a bird and adding it to the world The speaker demonstrates the use of matter.bodies.circle to define the body of a bird, along with adding it to the world for game implementation.', 'Implementation of a mouse constraint using matter.mouseConstraint.create for user interaction The speaker explores the implementation of a mouse constraint using matter.mouseConstraint.create for enabling user interaction in the game development process.', 'Aliasing matter.js objects to simplify code by creating a list of objects and setting them equal to matter The speaker discusses the technique of aliasing matter.js objects to simplify code by creating a list of objects and setting them equal to matter, making the code more succinct and easier to manage.']}, {'end': 1763.913, 'segs': [{'end': 1262.071, 'src': 'embed', 'start': 1234.989, 'weight': 4, 'content': [{'end': 1238.611, 'text': 'So now I have a little stack of boxes, and then I can toss it, and there we go.', 'start': 1234.989, 'duration': 3.622}, {'end': 1239.972, 'text': "I didn't knock them over.", 'start': 1238.831, 'duration': 1.141}, {'end': 1242.554, 'text': 'Oh, whoa, I threw it over.', 'start': 1240.732, 'duration': 1.822}, {'end': 1248.219, 'text': "So there's some nuance here to how physics engines work and how I'm going to need to create some balance in the system.", 'start': 1242.794, 'duration': 5.425}, {'end': 1258.988, 'text': 'And one of the things there is I probably need to increase the number of iterations per update in order for it not to be able to move so fast as to jump over the stuff.', 'start': 1249.119, 'duration': 9.869}, {'end': 1260.449, 'text': 'But let me just run this again.', 'start': 1259.348, 'duration': 1.101}, {'end': 1262.071, 'text': 'I want to really see if I can knock those things over.', 'start': 1260.469, 'duration': 1.602}], 'summary': 'Experimenting with physics engine to prevent fast movements, aiming to knock over boxes.', 'duration': 27.082, 'max_score': 1234.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1234989.jpg'}, {'end': 1347.299, 'src': 'embed', 'start': 1311.653, 'weight': 3, 'content': [{'end': 1319.679, 'text': "And I think it's probably smart for me to wrap this into a class, because I'm really going all in on this object-oriented programming approach.", 'start': 1311.653, 'duration': 8.026}, {'end': 1324.742, 'text': 'So let me make another JavaScript file called slingshot.js.', 'start': 1319.899, 'duration': 4.843}, {'end': 1336.051, 'text': 'And let me just write out the outset, remember, that I need to refer to slingshot.js.', 'start': 1327.084, 'duration': 8.967}, {'end': 1340.514, 'text': 'Then class slingshot.', 'start': 1337.652, 'duration': 2.862}, {'end': 1345.519, 'text': 'So what does a slingshot need?', 'start': 1343.598, 'duration': 1.921}, {'end': 1347.299, 'text': 'So it needs.', 'start': 1346.139, 'duration': 1.16}], 'summary': 'Transitioning to object-oriented programming with javascript, creating a class for slingshot.', 'duration': 35.646, 'max_score': 1311.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1311653.jpg'}, {'end': 1405.923, 'src': 'embed', 'start': 1376.209, 'weight': 5, 'content': [{'end': 1380.271, 'text': "Constraint So I'm going to make up some options now.", 'start': 1376.209, 'duration': 4.062}, {'end': 1383.113, 'text': 'So I need to configure that constraint.', 'start': 1381.152, 'duration': 1.961}, {'end': 1390.116, 'text': "The two things I want to be connected with this constraint are a point, which I'll call point A.", 'start': 1383.693, 'duration': 6.423}, {'end': 1393.478, 'text': 'This is in the matter.js documentation specs.', 'start': 1390.116, 'duration': 3.362}, {'end': 1396, 'text': 'Point A, which is an object with an x.', 'start': 1393.878, 'duration': 2.122}, {'end': 1399.921, 'text': 'which will be what I pass in, and a y, which will be what I pass in.', 'start': 1396.88, 'duration': 3.041}, {'end': 1405.923, 'text': 'And then also, it needs to be connected to something else, body b.', 'start': 1400.701, 'duration': 5.222}], 'summary': 'Configuring a constraint between point a and body b in matter.js documentation specs.', 'duration': 29.714, 'max_score': 1376.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1376209.jpg'}, {'end': 1646.645, 'src': 'embed', 'start': 1622.207, 'weight': 0, 'content': [{'end': 1628.091, 'text': 'Now how do I release it? I have to come up with a way of releasing this.', 'start': 1622.207, 'duration': 5.884}, {'end': 1635.789, 'text': 'I need a way somehow to launch this bird off of the slingshot.', 'start': 1628.472, 'duration': 7.317}, {'end': 1641.337, 'text': 'Like the slingshot should be broken and it should, well, the constraint should be broken and it should go flying.', 'start': 1635.869, 'duration': 5.468}, {'end': 1644.101, 'text': 'So first let me at least create a mechanism for that.', 'start': 1641.978, 'duration': 2.123}, {'end': 1646.645, 'text': "So let me write a function here and I'll call it fly.", 'start': 1644.321, 'duration': 2.324}], 'summary': "The speaker is trying to devise a method to launch a bird off a broken slingshot by creating a mechanism called 'fly'.", 'duration': 24.438, 'max_score': 1622.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1622207.jpg'}, {'end': 1725.881, 'src': 'heatmap', 'start': 1685.32, 'weight': 0.767, 'content': [{'end': 1699.325, 'text': "So, okay, so only if there is a body attached, then should I bother to draw the line, okay? So I need to also not draw the line if there's no body.", 'start': 1685.32, 'duration': 14.005}, {'end': 1701.867, 'text': 'So let me run it and then hit, there we go.', 'start': 1699.645, 'duration': 2.222}, {'end': 1706.972, 'text': 'We can see, now could I possibly time it? Like now my interaction is I have to do this.', 'start': 1701.967, 'duration': 5.005}, {'end': 1714.079, 'text': "But I shouldn't have to hit the space bar, right? I shouldn't have to hit the space bar.", 'start': 1710.055, 'duration': 4.024}, {'end': 1719.544, 'text': 'So how can I determine a time where I should have it fly?', 'start': 1714.399, 'duration': 5.145}, {'end': 1725.881, 'text': "What if I were to get the body's speed right?", 'start': 1721.536, 'duration': 4.345}], 'summary': 'Developing a program to determine when to draw a line based on body attachment and speed.', 'duration': 40.561, 'max_score': 1685.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1685320.jpg'}], 'start': 1147.851, 'title': 'Object manipulation and slingshot creation', 'summary': 'Covers the use of a physics engine for successful object manipulation, including adding boxes and creating a stable stack. it also discusses creating a slingshot mechanism in a game, involving mouse constraints, release mechanism development, and slingshot line drawing.', 'chapters': [{'end': 1264.092, 'start': 1147.851, 'title': 'Physics engine and object manipulation', 'summary': 'Explores the process of manipulating objects using a physics engine, including adding boxes and creating a stack, with the need to adjust the physics system for better balance and stability, resulting in successful object manipulation.', 'duration': 116.241, 'highlights': ['The chapter delves into adding more boxes and creating a stack of boxes using a for loop, with the result of successfully stacking and manipulating the objects.', 'The need for increasing the number of iterations per update in the physics system is highlighted to create balance and prevent objects from moving too fast, resulting in improved stability and successful object manipulation.', 'The process of tossing and manipulating objects in the physics engine is described, including the challenge of ensuring objects do not jump or move too fast, with the successful outcome of knocking over the stacked boxes.']}, {'end': 1763.913, 'start': 1264.413, 'title': 'Creating a slingshot mechanism', 'summary': 'Details the creation of a slingshot mechanism in a game, discussing the implementation of mouse constraints and the development of a release mechanism, with a focus on configuring constraints and drawing the slingshot line.', 'duration': 499.5, 'highlights': ['The implementation of a mouse constraint to create a spring-like connection between the mouse and the object to enable movement. The speaker discusses creating a mouse constraint that enables a spring-like connection between the mouse and the object, allowing for movement.', 'The configuration of constraints by specifying the stiffness and rest length, with a value of 1 indicating high stiffness and 0.5 indicating moderate stiffness. The speaker explains the process of configuring constraints by setting the stiffness, with a value of 1 for high stiffness and 0.5 for moderate stiffness, and specifying the rest length of the constraint.', 'The development of a release mechanism by detaching the body from the constraint to enable the object to go flying, along with the consideration of timing for the release. The speaker details the creation of a release mechanism by detaching the body from the constraint to allow the object to go flying, while also considering timing options for the release.']}], 'duration': 616.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1147851.jpg', 'highlights': ['The chapter covers adding more boxes and creating a stack of boxes using a for loop, resulting in successful stacking and object manipulation.', 'Increasing the number of iterations per update in the physics system improves stability and successful object manipulation.', 'The process of tossing and manipulating objects in the physics engine is described, with the successful outcome of knocking over the stacked boxes.', 'The implementation of a mouse constraint creates a spring-like connection between the mouse and the object, enabling movement.', 'Configuring constraints involves specifying stiffness and rest length, with values of 1 for high stiffness and 0.5 for moderate stiffness.', 'The development of a release mechanism involves detaching the body from the constraint to enable the object to go flying, considering timing for the release.']}, {'end': 2485.354, 'segs': [{'end': 1791.263, 'src': 'embed', 'start': 1763.933, 'weight': 2, 'content': [{'end': 1769.717, 'text': 'Is that right? Maybe it should be more like 100 milliseconds later.', 'start': 1763.933, 'duration': 5.784}, {'end': 1774.077, 'text': "Oh, that's actually kind of great.", 'start': 1772.737, 'duration': 1.34}, {'end': 1774.718, 'text': 'That worked.', 'start': 1774.178, 'duration': 0.54}, {'end': 1785.441, 'text': 'Weirdly, just giving it a little time later, I was going to go through this whole thing of testing its speed.', 'start': 1780.359, 'duration': 5.082}, {'end': 1787.362, 'text': 'You know what? This is good enough.', 'start': 1785.941, 'duration': 1.421}, {'end': 1791.263, 'text': 'I think you could probably, those of you watching, you might want to come up with a different solution.', 'start': 1787.442, 'duration': 3.821}], 'summary': 'Testing showed a slight delay of 100 milliseconds improved performance and deemed it good enough.', 'duration': 27.33, 'max_score': 1763.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1763933.jpg'}, {'end': 1990.463, 'src': 'embed', 'start': 1943.431, 'weight': 3, 'content': [{'end': 1949.173, 'text': "Now notice this is here, I'm not going to see it anymore, but I'm going to try to shoot it right over there again.", 'start': 1943.431, 'duration': 5.742}, {'end': 1955.215, 'text': 'See how it hit the invisible thing? So let me remove it, and that should fix that.', 'start': 1950.153, 'duration': 5.062}, {'end': 1964.893, 'text': "So if I do this, and it's there, and then I do this again, I do this again, Anyway, you can see it's gone.", 'start': 1955.695, 'duration': 9.198}, {'end': 1965.574, 'text': "It's removing it.", 'start': 1964.913, 'duration': 0.661}, {'end': 1968.375, 'text': 'So there are different ways that I could approach this.', 'start': 1965.814, 'duration': 2.561}, {'end': 1975.657, 'text': 'Simon in the chat is pointing out that instead of just making the body be of the slingshot null, I could actually remove the slingshot.', 'start': 1968.675, 'duration': 6.982}, {'end': 1979.198, 'text': 'I could reuse the same bird by just resetting its position.', 'start': 1975.857, 'duration': 3.341}, {'end': 1984.861, 'text': 'So again, you might have a different take on this, refactor this in a different way.', 'start': 1979.499, 'duration': 5.362}, {'end': 1986.541, 'text': "But I've got the basic idea down.", 'start': 1985.021, 'duration': 1.52}, {'end': 1988.722, 'text': 'Now, I want to start adding images.', 'start': 1986.881, 'duration': 1.841}, {'end': 1990.463, 'text': 'All right, so I have all of these.', 'start': 1989.222, 'duration': 1.241}], 'summary': 'Troubleshooting the disappearance issue, considering different approaches to refactor and add images.', 'duration': 47.032, 'max_score': 1943.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1943431.jpg'}, {'end': 2131.369, 'src': 'embed', 'start': 2100.362, 'weight': 5, 'content': [{'end': 2101.043, 'text': "It's so tiny.", 'start': 2100.362, 'duration': 0.681}, {'end': 2102.244, 'text': 'I should make it bigger.', 'start': 2101.063, 'duration': 1.181}, {'end': 2108.011, 'text': 'And I think what I would prefer to do also is draw the slingshot behind the bird.', 'start': 2102.725, 'duration': 5.286}, {'end': 2110.133, 'text': 'OK So now I have my dot.', 'start': 2108.431, 'duration': 1.702}, {'end': 2111.434, 'text': 'There it goes.', 'start': 2110.934, 'duration': 0.5}, {'end': 2113.136, 'text': 'Now I just need to replace those blocks.', 'start': 2111.515, 'duration': 1.621}, {'end': 2119.981, 'text': 'So the boxes, when I make the box, I am in sketch.js.', 'start': 2113.977, 'duration': 6.004}, {'end': 2125.345, 'text': "When I make the box, I'm giving them an x and a y and a width and a height.", 'start': 2120.422, 'duration': 4.923}, {'end': 2128.808, 'text': "Let's just make them square right now.", 'start': 2125.765, 'duration': 3.043}, {'end': 2131.369, 'text': "I could have an image that's not square.", 'start': 2128.828, 'duration': 2.541}], 'summary': 'Discussion about making objects bigger, drawing slingshot, and replacing blocks in a game development scenario.', 'duration': 31.007, 'max_score': 2100.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY2100362.jpg'}, {'end': 2229.632, 'src': 'embed', 'start': 2194.938, 'weight': 6, 'content': [{'end': 2200.759, 'text': 'I have my Angry Birds clone with p5 and Matter.js.', 'start': 2194.938, 'duration': 5.821}, {'end': 2203.06, 'text': "And I'm going to pull this back and release it.", 'start': 2201.199, 'duration': 1.861}, {'end': 2208.241, 'text': 'Oh, wait.', 'start': 2204.06, 'duration': 4.181}, {'end': 2209.481, 'text': 'Why did it make it so small?', 'start': 2208.281, 'duration': 1.2}, {'end': 2220.044, 'text': 'So one thing I really need to do a lot of refactoring of this, because I did something very silly here where I remake the bird.', 'start': 2210.602, 'duration': 9.442}, {'end': 2226.77, 'text': 'But I use a different size, which having a hard-coded value here is pretty bad.', 'start': 2222.048, 'duration': 4.722}, {'end': 2229.632, 'text': "All right, let's try this one more time.", 'start': 2226.79, 'duration': 2.842}], 'summary': 'Working on angry birds clone with p5 and matter.js, facing challenges with refactoring and hard-coded values.', 'duration': 34.694, 'max_score': 2194.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY2194938.jpg'}, {'end': 2367.348, 'src': 'embed', 'start': 2329.57, 'weight': 0, 'content': [{'end': 2331.031, 'text': 'This is my Angry Birds game.', 'start': 2329.57, 'duration': 1.461}, {'end': 2336.149, 'text': 'made with p5 and matter.js and coding trained characters.', 'start': 2332.403, 'duration': 3.746}, {'end': 2340.335, 'text': 'Oh, oh, oh, oh.', 'start': 2338.873, 'duration': 1.462}, {'end': 2357.406, 'text': 'Thank you for watching this coding challenge.', 'start': 2355.546, 'duration': 1.86}, {'end': 2358.587, 'text': 'Sorry to interrupt.', 'start': 2358.047, 'duration': 0.54}, {'end': 2359.907, 'text': "I'm about to wrap this video up.", 'start': 2358.627, 'duration': 1.28}, {'end': 2362.527, 'text': 'But I want to show you two quick improvements before I finish.', 'start': 2360.007, 'duration': 2.52}, {'end': 2367.348, 'text': 'The first one is when I loaded my coding train equals character, it was a square image.', 'start': 2362.807, 'duration': 4.541}], 'summary': 'Angry birds game created using p5 and matter.js with coding-trained characters.', 'duration': 37.778, 'max_score': 2329.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY2329570.jpg'}], 'start': 1763.933, 'title': 'Angry birds game development', 'summary': 'Covers creating the basics of angry birds game, using set timeout, adding new bird, potential and kinetic energy concepts, and images. it also demonstrates development process using p5 and matter.js, refactoring code, adding restitution, and encouraging viewers to enhance the code.', 'chapters': [{'end': 2192.185, 'start': 1763.933, 'title': 'Coding train angry birds project', 'summary': 'Demonstrates the process of creating the basics of the angry birds game, including using set timeout, adding a new bird, interaction design problems, utilizing the concept of potential and kinetic energy, and adding images to the game.', 'duration': 428.252, 'highlights': ['The chapter demonstrates the process of creating the basics of the Angry Birds game. The chapter discusses the process of creating the basics of the Angry Birds game, including using set timeout, adding a new bird, and interaction design problems.', 'Utilizing the concept of potential and kinetic energy. Alma suggests utilizing the concept of potential and kinetic energy for the Angry Birds game, adding a new dimension to the gameplay.', 'Adding images to the game. The chapter explores the process of adding images, including a dot for the bird and an angry equal sign for the block, to enhance the visual aspects of the game.']}, {'end': 2485.354, 'start': 2194.938, 'title': 'Angry birds coding challenge', 'summary': 'Showcases the development process of an angry birds game using p5 and matter.js, including refactoring code, adding restitution for elasticity, adjusting body mass, and encouraging viewers to enhance the code and design, and explore other game mechanics and engines.', 'duration': 290.416, 'highlights': ['The chapter showcases the development process of an Angry Birds game using p5 and Matter.js, including refactoring code. Development of Angry Birds game, usage of p5 and Matter.js, refactoring of code', "Adding restitution for elasticity, with explanation and demonstration of values and its impact on the game's physics. Addition of restitution for elasticity, values and impact on game physics", 'Adjusting body mass to improve game physics and demonstrating the impact on game dynamics. Adjusting body mass, impact on game dynamics', 'Encouraging viewers to enhance the code and design, and explore other game mechanics and engines, such as Phaser. Encouragement to enhance code and design, explore other game mechanics and engines']}], 'duration': 721.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TDQzoe9nslY/pics/TDQzoe9nslY1763933.jpg', 'highlights': ['The chapter demonstrates the process of creating the basics of the Angry Birds game, including using set timeout, adding a new bird, and interaction design problems.', 'Utilizing the concept of potential and kinetic energy for the Angry Birds game, adding a new dimension to the gameplay.', 'Adding images to the game, including a dot for the bird and an angry equal sign for the block, to enhance the visual aspects of the game.', 'The chapter showcases the development process of an Angry Birds game using p5 and Matter.js, including refactoring code.', "Adding restitution for elasticity, with explanation and demonstration of values and its impact on the game's physics.", 'Adjusting body mass to improve game physics and demonstrating the impact on game dynamics.', 'Encouraging viewers to enhance the code and design, explore other game mechanics and engines such as Phaser.']}], 'highlights': ['The chapter covers adding more boxes and creating a stack of boxes using a for loop, resulting in successful stacking and object manipulation.', 'The process of tossing and manipulating objects in the physics engine is described, with the successful outcome of knocking over the stacked boxes.', 'The implementation of a mouse constraint creates a spring-like connection between the mouse and the object, enabling movement.', 'The chapter demonstrates the process of creating the basics of the Angry Birds game, including using set timeout, adding a new bird, and interaction design problems.', 'Utilizing the concept of potential and kinetic energy for the Angry Birds game, adding a new dimension to the gameplay.']}