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:

🕹️ p5.js Web Editor Sketch:

Other Parts of this Challenge:
📺 Agar.io – Part 2 (Networking with Socket.IO and Node.js):

🎥 Previous video:
🎥 Next video:
🎥 All videos:

References:
🔗 Agar.io on Wikipedia:
🔗 Agar.io:
🔗 Node.js:
🔗 Socket.io:

Livestream Archive:
🔴 Livestream #55:
🔴 Livestream #58:

Related Coding Challenges:
🚂 #36 Blobby!:
🚂 #69 Evolutionary Steering Behaviors:

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:
👾 Share Your Creation!
🚩 Suggest Topics:
💡 GitHub:
💬 Discord:
💖 Membership:
🛒 Store:
🖋️ Twitter:
📸 Instagram:

🎥 Coding Challenges:
🎥 Intro to Programming:

🔗 p5.js:
🔗 p5.js Web Editor:
🔗 Processing:

📄 Code of Conduct:

This description was auto-generated. If you see a problem, please open an issue:

#agario #websockets #javascript #nodejs