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

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=JXuxYMGe4KI


Game:
Agar.io (2015)
Duration: 25:06
313,611 views
4,787

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



Other Videos By The Coding Train


2016-09-07Live Stream #59: Week 1 of Programming from A to Z
2016-09-04Coding Challenge #32.2: Agar.io - Part 2 (Networking with Socket.IO and Node.js)
2016-09-02Coding Challenge #36: Blobby!
2016-09-02Q&A #5: The History of p5.js and Processing
2016-09-02Live Stream #58: Networking Agar.io and the History of p5.js/Processing
2016-08-30Coding Challenge #35.3: Traveling Salesperson with Lexicographic Order
2016-08-25Coding Challenge #35.2: Lexicographic Order
2016-08-24Coding Challenge #35.1: Traveling Salesperson
2016-08-22Coding Challenge #33: Poisson-disc Sampling
2016-08-18Coding Challenge #34: Diffusion-Limited Aggregation
2016-08-16Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)
2016-08-12Live Stream #57 - Traveling Salesperson
2016-08-119.10: Genetic Algorithm: Continuous Evolutionary System - The Nature of Code
2016-08-10Coding Challenge #31: Flappy Bird
2016-08-099.9: Genetic Algorithm: Interactive Selection - The Nature of Code
2016-08-089.17: Arguments Array in JavaScript - p5.js Tutorial
2016-08-05Live Stream #56: Poisson Disc Sampling and Diffusion-Limited Aggregation
2016-08-059.6: Genetic Algorithm: Improved Fitness Function - The Nature of Code
2016-08-059.7: Genetic Algorithm: Pool Selection - The Nature of Code
2016-08-04Live Stream #55 - Flappy Bird and Agar.io Clones
2016-08-03Coding Challenge #30: Phyllotaxis


Tags:
rainbow
live
agar
io
games
p5.js
daniel shiffman
p5js
creative coding
p5.js tutorial
nature of code
javascript
tutorial
coding challenge
the nature of code
p5 js
javascript (programming language)
agario
agar.io
challenge
coding
codingrainbow
agario challenges
agario gameplay
agario challenge
JavaScript
agario code


Other Statistics

Agar.io Statistics For The Coding Train

At present, The Coding Train has 506,761 views spread across 4 videos for Agar.io, and about 5 hours worth of Agar.io videos were uploaded to his channel. This is less than 0.50% of the total video content that The Coding Train has uploaded to YouTube.