title
Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)
description
In this multi-part coding challenge, I create a clone of the multiplayer online game Agar.io with JavaScript, node.js and websockets. Code: https://thecodingtrain.com/challenges/32-agario
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/J3BZeLP02
Other Parts of this Challenge:
đē Agar.io - Part 2 (Networking with Socket.IO and Node.js): https://youtu.be/ZjVyKXp9hec
đĨ Previous video: https://youtu.be/cXgA1d_E-jY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/flQgnCUxHlw?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Agar.io on Wikipedia: https://en.wikipedia.org/wiki/Agar.io
đ Agar.io: http://agar.io
đ Node.js: https://nodejs.org/en/
đ Socket.io: http://socket.io/
Livestream Archive:
đ´ Livestream #55: https://youtu.be/eOii4P7WYbY
đ´ Livestream #58: https://youtu.be/_cDPN2Ief6Q
Related Coding Challenges:
đ #36 Blobby!: https://youtu.be/rX5p-QRP6R4
đ #69 Evolutionary Steering Behaviors: https://youtu.be/flxOkx0yLrY
Timestamps:
0:00 Introduce the coding challenge
0:55 Set up sketch
1:05 Create a blob class
2:06 Create a blob object
2:24 Debug drawing logic
2:42 Describe movement logic
3:05 Create an array of blob objects
4:05 Position blobs in the canvas
4:40 Explain movement logic
5:32 Move blob toward the mouse
6:46 Explain coordinate system
7:52 Translate origin
9:13 Debug movement logic
9:56 Position blobs in a larger world
10:46 Consider blob collision
11:48 Implement collision detection
12:18 Explain overlap test
12:38 Increase the radius of the blob
13:02 Debug collision logic
14:03 Consider chat suggestions
14:32 Increase the radius based on area
15:52 Scale coordinate system to expand the world
17:00 Debug operations on the coordinate system
18:10 Fix the order of the operations
19:10 Introduce `lerp` interpolation
19:47 Interpolate the change in scale
21:54 Interpolate the velocity of the blob
23:22 Summarize the coding challenge
23:44 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
#agario #websockets #javascript #nodejs
detail
{'title': 'Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)', 'heatmap': [{'end': 76.715, 'start': 58.829, 'weight': 0.791}, {'end': 170.399, 'start': 119.675, 'weight': 0.944}, {'end': 414.178, 'start': 371.378, 'weight': 0.76}], 'summary': 'Covers the agar.io coding challenge in p5.js, including creating blob objects and movement, shifting canvas view, object interaction, blob game mechanics, understanding blob size calculation, and using scale function in p5, providing a comprehensive guide to implementing basic game mechanics in stages.', 'chapters': [{'end': 61.972, 'segs': [{'end': 61.972, 'src': 'embed', 'start': 0.652, 'weight': 0, 'content': [{'end': 1.893, 'text': 'Hello everyone.', 'start': 0.652, 'duration': 1.241}, {'end': 3.934, 'text': 'Welcome to another coding challenge.', 'start': 2.033, 'duration': 1.901}, {'end': 7.437, 'text': "Today's coding challenge is Agar.io.", 'start': 4.014, 'duration': 3.423}, {'end': 15.243, 'text': 'Agar.io A game that I was not familiar with until recently when Little Ott on GitHub suggested this particular game.', 'start': 7.877, 'duration': 7.366}, {'end': 15.823, 'text': 'I looked it up.', 'start': 15.323, 'duration': 0.5}, {'end': 17.404, 'text': 'I played it for a few minutes.', 'start': 16.163, 'duration': 1.241}, {'end': 22.428, 'text': "It's a massively multiplayer game created by Matthias Valadares.", 'start': 18.065, 'duration': 4.363}, {'end': 23.028, 'text': "I don't know if I'm.", 'start': 22.588, 'duration': 0.44}, {'end': 29.331, 'text': 'pronounce that correctly, you could go to agar.io and play it yourself,', 'start': 25.87, 'duration': 3.461}, {'end': 32.533, 'text': "but basically you're this blob moving around the screen and you eat other blobs.", 'start': 29.331, 'duration': 3.202}, {'end': 35.554, 'text': "now here's the thing this is actually quite complex the simple mechanic.", 'start': 32.533, 'duration': 3.021}, {'end': 41.577, 'text': "I think it's going to be hopefully something easy that I can implement in this short video, but I'm going to do this in several stages,", 'start': 35.554, 'duration': 6.023}, {'end': 45.38, 'text': "And so part one is I'm going to implement the basic game mechanic.", 'start': 42.057, 'duration': 3.323}, {'end': 52.245, 'text': 'And in part two, I will start to look at how you might use WebSockets to create a multiplayer version of this game.', 'start': 45.7, 'duration': 6.545}, {'end': 54.766, 'text': 'So this video is just going to be the basic game mechanic.', 'start': 52.265, 'duration': 2.501}, {'end': 56.708, 'text': "So I'm using the p5.js framework.", 'start': 55.067, 'duration': 1.641}, {'end': 58.809, 'text': "I'm using the Sublime text editor.", 'start': 56.748, 'duration': 2.061}, {'end': 60.751, 'text': 'I have a canvas and a black background.', 'start': 58.829, 'duration': 1.922}, {'end': 61.972, 'text': "That's all I'm starting with.", 'start': 60.791, 'duration': 1.181}], 'summary': 'Agar.io coding challenge using p5.js framework in several stages.', 'duration': 61.32, 'max_score': 0.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI652.jpg'}], 'start': 0.652, 'title': 'Agar.io coding challenge', 'summary': 'Covers the agar.io coding challenge, a massively multiplayer game created by matthias valadares, and the plan to implement the basic game mechanic in p5.js framework in several stages.', 'chapters': [{'end': 61.972, 'start': 0.652, 'title': 'Agar.io coding challenge', 'summary': 'Covers the agar.io coding challenge, a massively multiplayer game created by matthias valadares, and the plan to implement the basic game mechanic in p5.js framework in several stages.', 'duration': 61.32, 'highlights': ['The chapter covers the Agar.io coding challenge, a massively multiplayer game created by Matthias Valadares.', 'The plan includes implementing the basic game mechanic in p5.js framework in several stages.', 'The game involves controlling a blob to eat other blobs, and the challenge will be implemented using the Sublime text editor with a black background canvas.']}], 'duration': 61.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI652.jpg', 'highlights': ['The plan includes implementing the basic game mechanic in p5.js framework in several stages.', 'The chapter covers the Agar.io coding challenge, a massively multiplayer game created by Matthias Valadares.', 'The game involves controlling a blob to eat other blobs, and the challenge will be implemented using the Sublime text editor with a black background canvas.']}, {'end': 401.952, 'segs': [{'end': 88.557, 'src': 'embed', 'start': 62.532, 'weight': 0, 'content': [{'end': 69.793, 'text': "And I also have a JavaScript file called blob.js where I'm going to write a constructor function to create this idea of a blob object.", 'start': 62.532, 'duration': 7.261}, {'end': 76.715, 'text': 'The blob object will serve to be both you, the blob moving around the screen, as well as other little blobs that you are trying to eat.', 'start': 70.053, 'duration': 6.662}, {'end': 78.075, 'text': 'So what does this blob need?', 'start': 77.015, 'duration': 1.06}, {'end': 82.796, 'text': "Now I'm going to use vector objects, which are something that exists in p5,", 'start': 78.095, 'duration': 4.701}, {'end': 88.557, 'text': 'a vector being an object that stores an x and a y component for a position on the screen and lots of other things that we could do with that.', 'start': 82.796, 'duration': 5.761}], 'summary': 'Creating a blob object in javascript with vector objects for position.', 'duration': 26.025, 'max_score': 62.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI62532.jpg'}, {'end': 170.399, 'src': 'heatmap', 'start': 119.675, 'weight': 0.944, 'content': [{'end': 125.36, 'text': 'So then the size of the ellipse is the radius times two, and the height is the radius times two.', 'start': 119.675, 'duration': 5.685}, {'end': 137.398, 'text': 'So now if I go to sketch, I can just say var blob, blob equals new blob, blob.show.', 'start': 125.701, 'duration': 11.697}, {'end': 138.519, 'text': "So let's just see.", 'start': 137.598, 'duration': 0.921}, {'end': 143.503, 'text': "Where's the blob? Oh, something's going terribly wrong.", 'start': 139.96, 'duration': 3.543}, {'end': 147.666, 'text': "I'm kind of being silly here.", 'start': 146.425, 'duration': 1.241}, {'end': 154.691, 'text': "where I forgot the whole point of this was I made a vector called pause for position and then I tried to draw it at this.x, which doesn't exist.", 'start': 147.666, 'duration': 7.025}, {'end': 158.234, 'text': 'So this.pause.x, this.pause.y.', 'start': 155.071, 'duration': 3.163}, {'end': 159.615, 'text': 'There we go.', 'start': 159.154, 'duration': 0.461}, {'end': 161.816, 'text': 'So there we are in the window.', 'start': 159.875, 'duration': 1.941}, {'end': 167.837, 'text': 'This is something a little bit crazy, as I just realized, is part of this game.', 'start': 163.115, 'duration': 4.722}, {'end': 170.399, 'text': 'so I want to move around the space.', 'start': 167.837, 'duration': 2.562}], 'summary': 'Discussion on ellipse size and position in a sketch, resolving errors and displaying it in the window.', 'duration': 50.724, 'max_score': 119.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI119675.jpg'}, {'end': 236.547, 'src': 'embed', 'start': 198.87, 'weight': 3, 'content': [{'end': 207.299, 'text': 'I think that I should give the blob a variable in the constructor so I can actually say how big to make it.', 'start': 198.87, 'duration': 8.429}, {'end': 219.905, 'text': "so I want this blob to be 64 and now I want to say var i equals 0, i is less than I'm going to add 10 smaller blobs.", 'start': 207.299, 'duration': 12.606}, {'end': 223.907, 'text': 'blobs index i equals a new blob which will be smaller.', 'start': 219.905, 'duration': 4.002}, {'end': 236.547, 'text': 'all these blobs are going to be 16 and then now I can have a loop in the draw loop Where I call show on all those?', 'start': 223.907, 'duration': 12.64}], 'summary': 'Code to create 64-sized blob and 10 smaller blobs.', 'duration': 37.677, 'max_score': 198.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI198870.jpg'}, {'end': 347.405, 'src': 'embed', 'start': 312.455, 'weight': 1, 'content': [{'end': 319.719, 'text': 'What I want is I need to create a vector, an arrow that points from the blob towards the mouse, and I want that to be the direction that it moves.', 'start': 312.455, 'duration': 7.264}, {'end': 327.803, 'text': 'So this is actually quite easy to do, because, coming back over here, if I know this position and I know this position, if I take this position,', 'start': 320.039, 'duration': 7.764}, {'end': 331.305, 'text': 'minus this position, I get a vector that points from here to there.', 'start': 327.803, 'duration': 3.502}, {'end': 334.707, 'text': 'So I can actually use coming back over here.', 'start': 331.785, 'duration': 2.922}, {'end': 347.405, 'text': 'I can say mouse equals, create vector, mouseX, mouseY, and then I can say mouse.subtract this.position.', 'start': 334.707, 'duration': 12.698}], 'summary': 'Create vector arrow from blob to mouse for movement.', 'duration': 34.95, 'max_score': 312.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI312455.jpg'}], 'start': 62.532, 'title': 'Creating blob objects and movement in javascript game', 'summary': 'Covers creating blob objects using a constructor function, utilizing vector objects in p5 library, defining functions, and implementing movement towards the mouse using vectors and magnitude, with the end goal of the blob following the mouse.', 'chapters': [{'end': 147.666, 'start': 62.532, 'title': 'Creating blob object in javascript', 'summary': 'Discusses creating a blob object using a constructor function in a javascript file, utilizing vector objects in p5 library to store position, and defining functions like show and variables like radius for the blob object.', 'duration': 85.134, 'highlights': ['The blob object serves as both the player and other blobs, and the position is stored using vector objects, which store x and y components on the screen and other functionalities.', 'The constructor function initializes the position of the blob at the center of the screen using the createVector function with width divided by 2 and height divided by 2 as parameters.', 'The show function, defined within the blob object, fills the ellipse with color and draws it at the specified position using the x and y coordinates.', 'The size of the blob is determined by the radius, initially set to 32 or 64, and the ellipse is drawn based on this radius, making it visible on the screen.']}, {'end': 401.952, 'start': 147.666, 'title': 'Creating blob movement in game', 'summary': 'Discusses creating a blob and smaller blobs, setting their positions, and implementing movement towards the mouse using vectors and magnitude, with the end goal of the blob following the mouse.', 'duration': 254.286, 'highlights': ['Creating an array of smaller blobs and setting their positions with a loop. The author creates an array of smaller blobs and sets their positions, with each blob being 16 in size and positioned at random locations.', "Implementing movement towards the mouse using vectors and magnitude. The author calculates the movement direction by creating a vector pointing from the blob towards the mouse, setting its magnitude, and applying it to the blob's position, resulting in the blob following the mouse.", 'Initial creation of the blob and discussing the game concept. The author introduces the concept of a central blob and smaller blobs, where the central blob moves towards the mouse, representing the game mechanics.']}], 'duration': 339.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI62532.jpg', 'highlights': ['The blob object serves as both the player and other blobs, and the position is stored using vector objects, which store x and y components on the screen and other functionalities.', "Implementing movement towards the mouse using vectors and magnitude. The author calculates the movement direction by creating a vector pointing from the blob towards the mouse, setting its magnitude, and applying it to the blob's position, resulting in the blob following the mouse.", 'The constructor function initializes the position of the blob at the center of the screen using the createVector function with width divided by 2 and height divided by 2 as parameters.', 'Creating an array of smaller blobs and setting their positions with a loop. The author creates an array of smaller blobs and sets their positions, with each blob being 16 in size and positioned at random locations.']}, {'end': 627.682, 'segs': [{'end': 489.291, 'src': 'embed', 'start': 461.507, 'weight': 0, 'content': [{'end': 466.368, 'text': "Basically, what I want to do is, it's moving over here, but I want to shift the view to be over there.", 'start': 461.507, 'duration': 4.861}, {'end': 468.849, 'text': "And the view of where we're seeing everything is kind of like.", 'start': 466.388, 'duration': 2.461}, {'end': 470.71, 'text': 'where is the origin point in our canvas?', 'start': 468.849, 'duration': 1.861}, {'end': 473.551, 'text': 'And translate is a function that shifts the origin.', 'start': 470.99, 'duration': 2.561}, {'end': 483.695, 'text': 'So what if I just said right here, translate by blob.position.x, blob.position.y, negative.', 'start': 473.871, 'duration': 9.824}, {'end': 489.291, 'text': "I think this is going to be a little bit off and you'll see why in a second.", 'start': 484.568, 'duration': 4.723}], 'summary': 'Shifting the view with translate function using blob position', 'duration': 27.784, 'max_score': 461.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI461507.jpg'}, {'end': 541.586, 'src': 'embed', 'start': 511.706, 'weight': 4, 'content': [{'end': 513.688, 'text': 'tell me in the chat if this is kind of the right idea.', 'start': 511.706, 'duration': 1.982}, {'end': 516.76, 'text': "it's not right.", 'start': 515.859, 'duration': 0.901}, {'end': 519.501, 'text': 'look, is it?', 'start': 516.76, 'duration': 2.741}, {'end': 527.008, 'text': 'yeah, move this way, move this way, move up, move down, move this way, move this way, move this way, move this way.', 'start': 519.501, 'duration': 7.507}, {'end': 530.25, 'text': 'it is just sort of sort of strange to see.', 'start': 527.008, 'duration': 3.242}, {'end': 535.634, 'text': "let's add a lot more of these.", 'start': 530.25, 'duration': 5.384}, {'end': 537.536, 'text': "it feels like I'm steering it incorrectly.", 'start': 535.634, 'duration': 1.902}, {'end': 541.586, 'text': "Okay, people are saying it's right.", 'start': 539.884, 'duration': 1.702}], 'summary': 'Adjusting direction and position in chat, adding more and steering correctly.', 'duration': 29.88, 'max_score': 511.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI511706.jpg'}, {'end': 627.682, 'src': 'embed', 'start': 587.568, 'weight': 2, 'content': [{'end': 593.453, 'text': "but the user's interaction is always relative to the center of the window, and so that's what was messing things up.", 'start': 587.568, 'duration': 5.885}, {'end': 596.376, 'text': 'So now you can see this works well.', 'start': 593.893, 'duration': 2.483}, {'end': 597.937, 'text': "Now there's another sort of issue here,", 'start': 596.416, 'duration': 1.521}, {'end': 605.383, 'text': "which is that the world should really be much bigger than what I'm seeing actually the width of the canvas itself.", 'start': 597.937, 'duration': 7.446}, {'end': 613.929, 'text': "and in that sense we can kind of do that really rather easily by saying let's pick a random x between,", 'start': 605.383, 'duration': 8.546}, {'end': 622.416, 'text': "like negative width and width divided times two, and let's pick a y between negative height and height times two,", 'start': 613.929, 'duration': 8.487}, {'end': 627.682, 'text': 'just so we have kind of like a larger space for the blobs to live in.', 'start': 622.416, 'duration': 5.266}], 'summary': 'User interaction realigned, canvas size increased for expanded world space.', 'duration': 40.114, 'max_score': 587.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI587568.jpg'}], 'start': 401.952, 'title': 'Shifting canvas view and object interaction', 'summary': 'Explores using the translate function to shift canvas view, maintaining object position at the center while enabling other elements to move. it also discusses adjusting object position, centering user interaction, and expanding world space for blobs, addressing velocity tracking and space constraints.', 'chapters': [{'end': 541.586, 'start': 401.952, 'title': 'Shifting canvas view with translate function', 'summary': "Discusses the use of the translate function to shift the canvas view based on an object's movement, aiming to maintain the object's position at the center while allowing other elements to move around it. the author explores the concept through code demonstration and seeks validation from the audience.", 'duration': 139.634, 'highlights': ["The author introduces the concept of using the translate function to shift the canvas view relative to an object's movement, aiming to keep the object centered while allowing other elements to move around it.", "The author demonstrates the use of the translate function in the code to shift the origin point based on the object's position, ensuring the object stays centered as other elements move around it.", 'The author seeks validation from the audience and acknowledges the initial challenges in determining the correct approach, highlighting the interactive nature of the learning process.']}, {'end': 627.682, 'start': 541.606, 'title': 'Adjusting object position and interaction', 'summary': "Discusses adjusting the object's position, centering the user's interaction relative to the window, and expanding the world space for the blobs to live in, addressing issues with velocity tracking and space constraints.", 'duration': 86.076, 'highlights': ["The user's interaction is always relative to the center of the window, addressing issues with the object's position and the mouse tracking.", 'Expanding the world space for the blobs to live in by picking random x and y coordinates within a larger space, enhancing the environment for the objects.']}], 'duration': 225.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI401952.jpg', 'highlights': ["The author introduces the concept of using the translate function to shift the canvas view relative to an object's movement, aiming to keep the object centered while allowing other elements to move around it.", "The author demonstrates the use of the translate function in the code to shift the origin point based on the object's position, ensuring the object stays centered as other elements move around it.", "The user's interaction is always relative to the center of the window, addressing issues with the object's position and the mouse tracking.", 'Expanding the world space for the blobs to live in by picking random x and y coordinates within a larger space, enhancing the environment for the objects.', 'The author seeks validation from the audience and acknowledges the initial challenges in determining the correct approach, highlighting the interactive nature of the learning process.']}, {'end': 838.335, 'segs': [{'end': 751.743, 'src': 'embed', 'start': 628.403, 'weight': 0, 'content': [{'end': 637.995, 'text': "And so now, you can see that as I move around, there's a much kind of larger world of things for me to eat potentially.", 'start': 628.403, 'duration': 9.592}, {'end': 641.42, 'text': "Okay, so I think we're moving along here.", 'start': 639.257, 'duration': 2.163}, {'end': 643.482, 'text': "We've got the basic gist of the game.", 'start': 641.6, 'duration': 1.882}, {'end': 651.465, 'text': 'Okay, Now I need to add one more thing here, Which is that if I eat one of these,', 'start': 644.343, 'duration': 7.122}, {'end': 655.447, 'text': 'if I find one of these other pieces of Bob things that eat it? Then I get a little bit bigger.', 'start': 651.465, 'duration': 3.982}, {'end': 661.832, 'text': "I think that's what happens in the game So one thing that I need to do is when we're looping through Bob's index.", 'start': 655.508, 'duration': 6.324}, {'end': 671.698, 'text': 'I then blob grows And actually, what I want to do is remove that blob.', 'start': 662.092, 'duration': 9.606}, {'end': 674.98, 'text': 'So blob index i dot splice 0 comma 1.', 'start': 671.718, 'duration': 3.262}, {'end': 676.882, 'text': 'And I find myself saying this a lot these days.', 'start': 674.98, 'duration': 1.902}, {'end': 683.667, 'text': 'I also want to loop through the array backwards because I just said this in another video I made.', 'start': 677.262, 'duration': 6.405}, {'end': 692.714, 'text': "But if I am removing things from the array as I'm going forward through the array, the elements slide backwards and I could skip one by accident.", 'start': 684.167, 'duration': 8.547}, {'end': 694.395, 'text': "So it's good to loop through the array backwards.", 'start': 692.774, 'duration': 1.621}, {'end': 696.869, 'text': "So let's see.", 'start': 695.888, 'duration': 0.981}, {'end': 702.974, 'text': 'I want to check if the blob eats one of those other blobs, then I want to remove one of those other blobs from the array.', 'start': 697.029, 'duration': 5.945}, {'end': 713.363, 'text': "And how do I determine if it eats it? The way that I do that is by writing a function, eats, which receives another blob I'll call other.", 'start': 703.254, 'duration': 10.109}, {'end': 715.005, 'text': 'And I need to check something.', 'start': 713.884, 'duration': 1.121}, {'end': 723.397, 'text': "I need to know what is the distance between this blob's x You know what, and actually there is a p5 vector distance function.", 'start': 715.085, 'duration': 8.312}, {'end': 728.442, 'text': "So I'm going to say what is the distance between this blob's position and the other blob's position.", 'start': 723.417, 'duration': 5.025}, {'end': 735.289, 'text': "And if that distance is less than this blob's radius plus the other blob's radius, then we've eaten it.", 'start': 729.984, 'duration': 5.305}, {'end': 739.113, 'text': 'Why is that true? Oops, I hit the wrong button.', 'start': 735.57, 'duration': 3.543}, {'end': 741.716, 'text': 'Right, if I have two objects.', 'start': 740.154, 'duration': 1.562}, {'end': 747.941, 'text': 'And I check their distance relative to the sum of the two radiuses radii.', 'start': 743.058, 'duration': 4.883}, {'end': 751.743, 'text': "if they're overlapping that sum, that distance is going to be less than it.", 'start': 747.941, 'duration': 3.802}], 'summary': 'Developing a game where blobs eat and grow, utilizing distance calculation and array manipulation.', 'duration': 123.34, 'max_score': 628.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI628403.jpg'}], 'start': 628.403, 'title': 'Blob game mechanics', 'summary': "Covers the mechanics of a blob game where a blob eats and grows, importance of looping through the array backwards, writing a function 'eats' for a blob, and debugging array splicing code to adjust array size.", 'chapters': [{'end': 702.974, 'start': 628.403, 'title': 'Blob game: eating and growing', 'summary': 'Explains the mechanics of a game where a blob eats and grows as it moves around a larger world, and the importance of looping through the array backwards to avoid skipping elements when removing items from the array.', 'duration': 74.571, 'highlights': ['The importance of looping through the array backwards to avoid skipping elements when removing items from the array.', 'The game mechanics involve the blob getting bigger when it eats other pieces, expanding its potential food sources in the larger world.']}, {'end': 781.099, 'start': 703.254, 'title': 'Blob eats function', 'summary': "Discusses writing a function 'eats' for a blob which determines if it has eaten another blob based on the distance between their positions and radii, allowing the first blob to grow and return true if it has eaten the other blob.", 'duration': 77.845, 'highlights': ["Writing a function 'eats' to determine if a blob has eaten another blob by checking the distance between their positions and radii The function 'eats' is designed to check if the distance between a blob and another blob is less than the sum of their radii, indicating that the first blob has eaten the other blob.", 'Increasing the size of the blob if it has eaten another blob and returning true If the first blob has eaten the other blob, its size increases by the radius of the other blob, and the function returns true.']}, {'end': 838.335, 'start': 781.099, 'title': 'Debugging array splicing', 'summary': 'Discusses debugging an incorrect array splicing code while the coder struggles due to lack of energy, leading to a successful correction and adjustment of array size.', 'duration': 57.236, 'highlights': ['The coder encounters an error while trying to splice an array at index i, leading to confusion and frustration.', 'The coder attributes the struggle to not having eaten breakfast, indicating a lack of energy affecting coding performance.', 'The coder successfully corrects the array splicing code and adjusts the array size by multiplying it by 0.2.']}], 'duration': 209.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI628403.jpg', 'highlights': ['The game mechanics involve the blob getting bigger when it eats other pieces, expanding its potential food sources in the larger world.', "Writing a function 'eats' to determine if a blob has eaten another blob by checking the distance between their positions and radii.", 'Increasing the size of the blob if it has eaten another blob and returning true.', 'The importance of looping through the array backwards to avoid skipping elements when removing items from the array.', 'The coder successfully corrects the array splicing code and adjusts the array size by multiplying it by 0.2.']}, {'end': 1505.331, 'segs': [{'end': 941.517, 'src': 'embed', 'start': 874.674, 'weight': 1, 'content': [{'end': 887.182, 'text': "so I'm going to make a variable called sum, which is equal to pi times this dot r, times this dot r plus pi times other dot r times other dot r.", 'start': 874.674, 'duration': 12.508}, {'end': 892.904, 'text': "So that is the sum of the two areas of the blob, that's eating the smaller blob.", 'start': 887.642, 'duration': 5.262}, {'end': 897.426, 'text': "Now the new radius should be the radius that's associated with that particular sum.", 'start': 893.244, 'duration': 4.182}, {'end': 902.148, 'text': "And how do I get that? Well, let's think about this really quick.", 'start': 897.686, 'duration': 4.462}, {'end': 906.79, 'text': 'If the area equals pi.', 'start': 903.348, 'duration': 3.442}, {'end': 917.217, 'text': 'r squared, then r squared equals area divided by pi and r equals the square root of area divided by pi.', 'start': 907.934, 'duration': 9.283}, {'end': 925.299, 'text': 'so I could just solve for r with that particular equation and I can come back to here.', 'start': 917.217, 'duration': 8.082}, {'end': 928.68, 'text': "no, I'm getting a bad at my switching.", 'start': 925.299, 'duration': 3.381}, {'end': 937.122, 'text': 'I can come back to here and I can say this dot r equals the square root of that area.', 'start': 928.68, 'duration': 8.442}, {'end': 939.029, 'text': 'What did I say??', 'start': 938.487, 'duration': 0.542}, {'end': 939.571, 'text': 'Oh, no, no.', 'start': 939.049, 'duration': 0.522}, {'end': 941.517, 'text': 'Area divided by pi.', 'start': 940.273, 'duration': 1.244}], 'summary': 'Calculating sum of two areas and finding new radius using specific equation.', 'duration': 66.843, 'max_score': 874.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI874674.jpg'}, {'end': 1111.542, 'src': 'embed', 'start': 1080.757, 'weight': 4, 'content': [{'end': 1081.577, 'text': "okay, there's a.", 'start': 1080.757, 'duration': 0.82}, {'end': 1083.318, 'text': "there's a kind of an issue going on here.", 'start': 1081.577, 'duration': 1.741}, {'end': 1085.279, 'text': 'so let me think about this.', 'start': 1083.318, 'duration': 1.961}, {'end': 1087.18, 'text': 'let me get this right here for a second.', 'start': 1085.279, 'duration': 1.901}, {'end': 1090.822, 'text': "I've done this twice now, but hopefully you're seeing an edited version of this now.", 'start': 1087.18, 'duration': 3.642}, {'end': 1098.046, 'text': 'so the problem is actually that the first thing that I need to do is translate to the center.', 'start': 1090.822, 'duration': 7.224}, {'end': 1102.814, 'text': "so let's not do anything just right now, but translate to the center.", 'start': 1098.991, 'duration': 3.823}, {'end': 1108.339, 'text': 'so now you can see, this is where the blob moves freely around and it should be growing as it eats other blobs.', 'start': 1102.814, 'duration': 5.525}, {'end': 1111.542, 'text': 'now what I want to do is I wanted to.', 'start': 1108.339, 'duration': 3.203}], 'summary': 'Issue with blob movement; need to translate to center and grow by consuming other blobs.', 'duration': 30.785, 'max_score': 1080.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI1080757.jpg'}, {'end': 1233.17, 'src': 'embed', 'start': 1204.519, 'weight': 0, 'content': [{'end': 1213.665, 'text': 'And zoom should always be the lerp between a value in between itself and what the new zoom is.', 'start': 1204.519, 'duration': 9.146}, {'end': 1219.289, 'text': 'And now the last argument of this lerp function, I have a whole video about lerp.', 'start': 1215.346, 'duration': 3.943}, {'end': 1221.39, 'text': 'You can find that video.', 'start': 1219.309, 'duration': 2.081}, {'end': 1225.413, 'text': "If I make it like 0.1, let's see what happens.", 'start': 1221.711, 'duration': 3.702}, {'end': 1227.334, 'text': 'Oh, wait, wait, hold on, hold on, hold on, hold on.', 'start': 1226.114, 'duration': 1.22}, {'end': 1231.197, 'text': '0.9? Oh, wait, wait, wait.', 'start': 1227.354, 'duration': 3.843}, {'end': 1233.17, 'text': 'I got to actually put it in there.', 'start': 1231.809, 'duration': 1.361}], 'summary': 'Discussion of zoom and lerp function with 0.1 and 0.9 values.', 'duration': 28.651, 'max_score': 1204.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI1204519.jpg'}, {'end': 1455.667, 'src': 'embed', 'start': 1427.608, 'weight': 5, 'content': [{'end': 1433.572, 'text': 'I encourage you to take this, tweak it, improve it, change the design of the blobs, change the size of the world.', 'start': 1427.608, 'duration': 5.964}, {'end': 1438.836, 'text': 'Maybe as an exercise, add the feature of when you eat a smaller blob, a new one gets added somewhere else.', 'start': 1433.632, 'duration': 5.204}, {'end': 1442.278, 'text': 'and see what you can add to improve this and make this a little bit better.', 'start': 1439.756, 'duration': 2.522}, {'end': 1444.019, 'text': "I'm going to do two more videos.", 'start': 1442.298, 'duration': 1.721}, {'end': 1445.06, 'text': 'This one video.', 'start': 1444.279, 'duration': 0.781}, {'end': 1450.163, 'text': "I'm just going to show you how to make this something that's a little bit blobby, so the vertices kind of undulate a little bit,", 'start': 1445.06, 'duration': 5.103}, {'end': 1451.364, 'text': "so it's not a perfect circle.", 'start': 1450.163, 'duration': 1.201}, {'end': 1455.667, 'text': "I'm going to do that in a separate video and then in a third part of this challenge.", 'start': 1451.644, 'duration': 4.023}], 'summary': 'Encourages tweaking and improving design, adding new feature, and making blobs undulate for improvement.', 'duration': 28.059, 'max_score': 1427.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI1427608.jpg'}], 'start': 838.395, 'title': 'Understanding blob size calculation and using scale function in p5', 'summary': 'Explains the correct method of determining blob size through surface area calculation and demonstrates a new radius calculation. it also explores using the scale function in p5 to create a game mechanic where the view of the world scales as the blob grows, showcasing the use of translate, scale, and lerp functions.', 'chapters': [{'end': 941.517, 'start': 838.395, 'title': 'Understanding blob size calculation', 'summary': 'Explains the misconception of calculating blob size by radius and highlights the correct method of determining it through surface area by using the formula pi * r^2, with a demonstration of the new radius calculation.', 'duration': 103.122, 'highlights': ['The size of the blob is determined by its surface area, not its radius, which is calculated using the formula pi * r^2.', 'Demonstrating the correct method of calculating the new radius of the blob after consuming another smaller blob using the formula r = sqrt(area / pi).', 'Explanation of the misconception regarding the calculation of blob size by radius and the correct method using the surface area formula.']}, {'end': 1505.331, 'start': 942.44, 'title': 'Using scale function in p5', 'summary': 'Explores using the scale function in p5 to create a game mechanic where the view of the world scales as the blob grows, illustrating the use of translate, scale, and lerp functions.', 'duration': 562.891, 'highlights': ["The chapter demonstrates using the scale function in p5 to create a game mechanic where the view of the world scales as the blob grows. The speaker explains how to use the scale function in p5 to scale the world as the blob grows, illustrating the concept using a 64 divided by the blob's radius.", 'The transcript also showcases the use of translate and lerp functions to manipulate the view and smoothly interpolate the scale of the world. The speaker discusses using the translate function to adjust the view and the lerp function to smoothly interpolate the scale of the world, providing a visual demonstration of the functionality.', 'The chapter hints at potential future improvements, such as adding multiplayer networking and optimizing performance by reducing the usage of square root calculations. The speaker mentions potential future enhancements, including multiplayer networking and performance optimization by minimizing the use of square root calculations, seeking feedback and suggestions from the audience.']}], 'duration': 666.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JXuxYMGe4KI/pics/JXuxYMGe4KI838395.jpg', 'highlights': ['The size of the blob is determined by its surface area, not its radius, which is calculated using the formula pi * r^2.', 'Demonstrating the correct method of calculating the new radius of the blob after consuming another smaller blob using the formula r = sqrt(area / pi).', 'Explanation of the misconception regarding the calculation of blob size by radius and the correct method using the surface area formula.', 'The chapter demonstrates using the scale function in p5 to create a game mechanic where the view of the world scales as the blob grows.', 'The transcript also showcases the use of translate and lerp functions to manipulate the view and smoothly interpolate the scale of the world.', 'The chapter hints at potential future improvements, such as adding multiplayer networking and optimizing performance by reducing the usage of square root calculations.']}], 'highlights': ['The plan includes implementing the basic game mechanic in p5.js framework in several stages.', 'The chapter covers the Agar.io coding challenge, a massively multiplayer game created by Matthias Valadares.', 'The game involves controlling a blob to eat other blobs, and the challenge will be implemented using the Sublime text editor with a black background canvas.', 'The blob object serves as both the player and other blobs, and the position is stored using vector objects, which store x and y components on the screen and other functionalities.', "Implementing movement towards the mouse using vectors and magnitude. The author calculates the movement direction by creating a vector pointing from the blob towards the mouse, setting its magnitude, and applying it to the blob's position, resulting in the blob following the mouse.", 'The constructor function initializes the position of the blob at the center of the screen using the createVector function with width divided by 2 and height divided by 2 as parameters.', 'Creating an array of smaller blobs and setting their positions with a loop. The author creates an array of smaller blobs and sets their positions, with each blob being 16 in size and positioned at random locations.', "The author introduces the concept of using the translate function to shift the canvas view relative to an object's movement, aiming to keep the object centered while allowing other elements to move around it.", "The author demonstrates the use of the translate function in the code to shift the origin point based on the object's position, ensuring the object stays centered as other elements move around it.", "The user's interaction is always relative to the center of the window, addressing issues with the object's position and the mouse tracking.", 'Expanding the world space for the blobs to live in by picking random x and y coordinates within a larger space, enhancing the environment for the objects.', 'The author seeks validation from the audience and acknowledges the initial challenges in determining the correct approach, highlighting the interactive nature of the learning process.', 'The game mechanics involve the blob getting bigger when it eats other pieces, expanding its potential food sources in the larger world.', "Writing a function 'eats' to determine if a blob has eaten another blob by checking the distance between their positions and radii.", 'Increasing the size of the blob if it has eaten another blob and returning true.', 'The importance of looping through the array backwards to avoid skipping elements when removing items from the array.', 'The coder successfully corrects the array splicing code and adjusts the array size by multiplying it by 0.2.', 'The size of the blob is determined by its surface area, not its radius, which is calculated using the formula pi * r^2.', 'Demonstrating the correct method of calculating the new radius of the blob after consuming another smaller blob using the formula r = sqrt(area / pi).', 'Explanation of the misconception regarding the calculation of blob size by radius and the correct method using the surface area formula.', 'The chapter demonstrates using the scale function in p5 to create a game mechanic where the view of the world scales as the blob grows.', 'The transcript also showcases the use of translate and lerp functions to manipulate the view and smoothly interpolate the scale of the world.', 'The chapter hints at potential future improvements, such as adding multiplayer networking and optimizing performance by reducing the usage of square root calculations.']}