Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)

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...

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...

Other Parts of this Challenge:
📺 Agar.io - Part 2 (Networking with Socket.IO and Node.js):    • Coding Challenge #32.2: Agar.io - Par...  

🎥 Previous video:    • Coding Challenge #31: Flappy Bird  
🎥 Next video:    • Coding Challenge #33: Poisson-disc Sa...  
🎥 All videos:    • Coding Challenges  

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:    • Live Stream #55 - Flappy Bird and Aga...  
🔴 Livestream #58:    • Live Stream #58: Networking Agar.io a...  

Related Coding Challenges:
🚂 #36 Blobby!:    • Coding Challenge #36: Blobby!  
🚂 #69 Evolutionary Steering Behaviors:    • Coding Challenge #69: Evolutionary St...  

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/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord:   / discord  
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#agario #websockets #javascript #nodejs