I love how energetic you are! Watching people code would almost always put me to sleep after a few minutes. You manage to keep it interesting throughout. Good job! I love this series.
JoJo BlowJo Seeing interesting code in my own time and reading it and understanding it is different from having to sit through a video of sleepy monotone sounding people explaining it lol. That's why someone like Daniel is such a breath of fresh air.
I have been working a lot with low-level C lately and every time you throw functions like setMag and dist in my face I feel a sting of envy. High-level programming can be a breeze sometimes! Excellent video series :)
@@Tin98Tin There's this sort of full-circle effect that can happen as you learn about programming (which by now I'm sure you've made plenty of progress in given how long ago this comment was posted) where there is that sense of shame in being able to do things so easily. It's only after you use some of those lower-level languages and have to learn about and make use of more abstract approaches to problems that you really start to understand what people are talking about when they say that different languages serve different purposes. For the most part, all of the stuff Dan does is a great fit for Javascript because of the ease of graphics manipulation and the lack of necessity for optimizations in performance. But on the other hand, something simple like a program to automate the installation of a different program is better left to the lower-level stuff (best not to face a problem more overly-equipped than what's needed). All this to say that what you said really resonates with my experience, and I hope by now you've observed that it's 1) completely normal to feel that way and 2) not something you have to bother yourself with. So long as you've got the knowledge needed to solve the problem as efficiently as is necessary, there's really nothing to be ashamed of, regardless of what those circumstances might entail.
You need to wear a much wider (green only) head band, so we can much easier see your thoughts. Also might be cool to also wear a green collar. Seriously... keep um coming... love that code!
It is awesome how interesting you make coding hahaha, seriously, i couldnt have imaginated seen a video of someone writing code could be so entertaining :D (Also i dont know a shit about programming haha but thanks to you i really want to learn :D )
Instead of just adding the smaller blob's radius to your radius, you should add the areas of the circles. In theory, the circle is gaining the mass of the eaten circle. So instead of blob.r += other.r, you should use a blob.mass variable, do blob.mass += other.mass, and then calculate the radius of the blob based on the mass (or area) which is, blob.r = math.sqrt(blob.mass / math.pi) Edit: Ah. Apparently you figured that out, but in a more complicated way.
Just watched 10+ of your videos; It had a similar vibe as my favourite book 'The nature of code', and heck you're the creator of it! You've always inspired me in all my codings. Thank you very much :D and keep up the great work!
I desperately need the next episode. Your video on Websockets and node.js just opened up a million opportunities for my code. Learning how to do this will help me create my own stuff. Thanks for the awesome videos! Your content is very high quality as far as programming lessons go. The same content would be dreadfully boring when delivered by most others you can find online.
Just a minor optimisation: you never need to use pi to scale up the blob's radius. Consider, new_area = pi * new_radius^2 = pi * old_radius^2 + pi * other_radius^2 Divide everything by pi and take the square root to get: new_radius = sqrt( old_radius^2 + other_radius^2 ) And thus we have a formula for the new radius with no pi's involved.
I don't know anything about code. What is the best way to start learning code? All the "beginner coding" videos just basically talk about what coding and programming means, and what you can do with it. You are the first person I have come across that shows the code and the outcome of it. Keep doing what you are doing!
jordan dont try to learn from this guy, this is advanced stuff and u can take classes in school and online for beginning coding. Also, check youtube for some tutorials
Man you're too good. So jelly. slither.io? You did the snake game already, for all intents and purposes, but maybe you can revisit and implement the multiplayer aspect of it.
@@TheCodingTrain I looked that up once but I only saw this vid. Can you (unless you already did) make a beginners guide (main functions, their parameters, etc)?
It is so hard to me but Im a beginner. This is a fantastic game and video. Im eagerly waiting part 2. Im interested in web sockets. You are my role model in programming!
I code along to these videos to learn p5 but im having an issue. I just implemented the eats feature and im at 17:00 in the video but everytime my blob eats something it disappears. I cant figure out why and ive been comparing my code to the github and its exactly the same.
Make a T1000 simulator. Near the end of Terminator 2 when the T1000 gets frozen and blown apart, all the little blobs of liquid metal steered toward the nearest other blob, melded together, and repeated until there was only one main blob. Then, for fun, you could make it explode again with a mouse click.
This is awesome. You are the first man on earth to give a video tutorial on how to make a Agar.io game. I am looking forward to the forthcoming videos. Am I a bit late for this? I tried to make a clone from scratch but I find that using a library like p5.js will probably speed up my development significantly after watching your video.
15:44 Wouldn’t it be easier to simply store internally the blob’s area rather than its radius, and simply use a square root when you display it? Calibrating the sizes means you don’t have to deal with any pi factors, and the eating could be done simply by adding the areas.
you should do a chain reaction game, where there's a swarm of objects that continuously spawn in from the edge, and when you click, it creates an "explosion" that the other swarm object hit and thus explode, and so on, and so on
I really wish I can program like you and understand it as well as you do. I'm trying to learn java and I'm having a very hard time. You make it look so easy. I get frustrated so many times and it takes me forever to do one simple thing.
The Coding Train, did you already made some kind of cooldowns on javascript? Some kind of press a key and do something but if you press again that key before some kind of cooldown (make cooldowns with actual time (seconds or milliseconds)) reach the value 0, but if the that cooldown value is 0 that cooldown wont go even lower but if the key get pressed, it does something again and so on. (would be awesome make quite some cooldowns counting at same time, but still make the canvas and objects being drew).
yes, you need to time things based of how long the program has been running for. performance.now() will return how long the game has been running. For example, if you want to shoot a bullet only once a second at most: var bulletTime = 0; if (mousePressed) { if (bulletTime < performance.now()) { bulletTime = performance.now() + 1000; //code that makes a new bullet } } hope this helps!
I have known a game almost the same but more complex, the game is called: "Tasty Planet", you think you can do it with this program and teach us please
Hey Daniel, do you think you can show us an implementation of a quad tree to improve collision detection performance, or some other similar data structure?
Awesome vid, but I'm curious.. What do you need to change to make this playable over the internet? Agario has thousands of players? It is perfectly realistic. Are TCP heartbeat updates really fast enough for a totally real-time gaming experience. - Not in a home LAN. There is no UDP ability from browsers. I have access to a Godaddy pro dedicated server, non VPN. I have lots of experience coding Java authoritative RTS servers How does agario do it? Thanks
Very interesting and great videos. makes coding fun again, but the code doesn't work at all... its one error after another.. maybe show us how to set up the environment?
Dan plz reply! If you are having a performance issue with so much food, you should make an if statement which tests if the food is near you. If it is near you, then you should show it, otherwise you don't show it. I was able to make above 3200 food blobs (well, my for loop will generate width*height/32 food blobs, which means the width and height are 320*320, which is a small window) without the if statement, the performance is trash, but with it, it is good!
I am trying my best to remake agario, however i can't add the server because of something which is impossible to debug, and the solution isnt in google. :( can i show you the singleplayer one alone?
So p5 has a built in camera? This library seems like a graphics only version of phaser- perfect for multiplayer games where all the game mechanics are on the server :)
Man that fucked me up, you were my ad. I got really confused because there were a ton of circles bouncing around in the background and I thought that I skipped through the video or something.
For detecting if the main blob is eating another one I used: if (Math.sqrt(Math.pow(blobs[i].pos.x-blob.pos.x,2)+Math.pow(blobs[i].pos.y-blob.pos.y,2))
Yes, in ANY game that is only client side, you can hack and cheat mercilessly, however, if you use Node.js to host a server, and then do the game logic server-side, the client wont be able to cheat, as long as you make sure that the SERVER is doing the game logic, the client side should only get info from the server and spit it out on the screen.
Hey Dan I was following your vid to the letter but the "blob = new blob();" doesn't work. It doesn't work with any of the challenges either btw. I've even copy pasted your github onto a new project and still wont work. halp pls
I failed university cause I am not able to code xD I hated to code after my studies (not really cause I always wanted to learn it but it wont go into my brain >.< that makes me angry about myself) But nevertheless I watched in 2 days a shit load of your videos cause its so insane how you solf this problems and have such fun with what you are doing. That is just impressive. My greatest respect.
6 years ago, this video inspired me to be a developer. Now, I'm a software engineer in the Netherlands with six years of experience. Thanks, Dan!
that is incredible! can you share some projects you are currently working on? i would love to hear about it!
I love how energetic you are!
Watching people code would almost always put me to sleep after a few minutes. You manage to keep it interesting throughout. Good job! I love this series.
puru
hmm seeing interesting codes > interesting coder
It's good that we have both here.
JoJo BlowJo
Seeing interesting code in my own time and reading it and understanding it is different from having to sit through a video of sleepy monotone sounding people explaining it lol. That's why someone like Daniel is such a breath of fresh air.
haha i get what you mean, the monotone guys
Nope you love tseries 😂
@@atanki5682 What?
Never had I realized most than now how relatively little are my problem-solving skills at coding. Dan, you're magic.
I have been working a lot with low-level C lately and every time you throw functions like setMag and dist in my face I feel a sting of envy. High-level programming can be a breeze sometimes! Excellent video series :)
feel this so hard
I'm new to programming and feel ashamed of the functions i get to use sometimes...
0Im new to programming and i dont even understand what an Array is. You should feel proud that u are able to write ! Im envy :3
Acedia I always thought arrays were useless
@@Tin98Tin There's this sort of full-circle effect that can happen as you learn about programming (which by now I'm sure you've made plenty of progress in given how long ago this comment was posted) where there is that sense of shame in being able to do things so easily. It's only after you use some of those lower-level languages and have to learn about and make use of more abstract approaches to problems that you really start to understand what people are talking about when they say that different languages serve different purposes. For the most part, all of the stuff Dan does is a great fit for Javascript because of the ease of graphics manipulation and the lack of necessity for optimizations in performance. But on the other hand, something simple like a program to automate the installation of a different program is better left to the lower-level stuff (best not to face a problem more overly-equipped than what's needed).
All this to say that what you said really resonates with my experience, and I hope by now you've observed that it's 1) completely normal to feel that way and 2) not something you have to bother yourself with. So long as you've got the knowledge needed to solve the problem as efficiently as is necessary, there's really nothing to be ashamed of, regardless of what those circumstances might entail.
1:30 'What's your Victor, vector?' Haha, nice reference to Airplane!
You need to wear a much wider (green only) head band, so we can much easier see your thoughts. Also might be cool to also wear a green collar.
Seriously... keep um coming... love that code!
haha, indeed.
+Daniel Shiffman pls make a smooth agario extension
+bemer bemer yesssss
Same thoughts here :D
that would be hilarious
Great Video! you make really interesting videos. Keep it up :)
Glad to hear, thank you!
It is awesome how interesting you make coding hahaha, seriously, i couldnt have imaginated seen a video of someone writing code could be so entertaining :D
(Also i dont know a shit about programming haha but thanks to you i really want to learn :D )
Jenese Pados me too
Jenese Pados Imaginated? Lol.
damn this man is a genius. i wish i had 10% of his js knowledge
Thanks for watching!
pee gee - You can, just watch his videos!
These videos just makes me happy. Its so awesome to take part of your energy and passion.
Thank you!
man i don't code but you're so energetic, i need more people like you in my life lol
Love the P5js framework and you! keep the videos comin
Instead of just adding the smaller blob's radius to your radius, you should add the areas of the circles. In theory, the circle is gaining the mass of the eaten circle. So instead of blob.r += other.r, you should use a blob.mass variable, do blob.mass += other.mass, and then calculate the radius of the blob based on the mass (or area) which is,
blob.r = math.sqrt(blob.mass / math.pi)
Edit: Ah. Apparently you figured that out, but in a more complicated way.
Yes, thanks for the simple explanation!
Daaamnnn that video was fire. Nice work!
I dont even code but this is hella entertaining
Just watched 10+ of your videos; It had a similar vibe as my favourite book 'The nature of code', and heck you're the creator of it! You've always inspired me in all my codings. Thank you very much :D and keep up the great work!
I desperately need the next episode. Your video on Websockets and node.js just opened up a million opportunities for my code. Learning how to do this will help me create my own stuff. Thanks for the awesome videos! Your content is very high quality as far as programming lessons go. The same content would be dreadfully boring when delivered by most others you can find online.
Thank you so much, I will try to make the time for the continuation. Feel free to upvote it here: github.com/CodingRainbow/Rainbow-Topics/issues
Just a minor optimisation: you never need to use pi to scale up the blob's radius. Consider,
new_area = pi * new_radius^2 = pi * old_radius^2 + pi * other_radius^2
Divide everything by pi and take the square root to get:
new_radius = sqrt( old_radius^2 + other_radius^2 )
And thus we have a formula for the new radius with no pi's involved.
your variant does involve sqrt operation though, which is slower than multiplication
you are one of the best code teacher on youtube, don't stop !!!
I don't know anything about code. What is the best way to start learning code? All the "beginner coding" videos just basically talk about what coding and programming means, and what you can do with it. You are the first person I have come across that shows the code and the outcome of it. Keep doing what you are doing!
jordan dont try to learn from this guy, this is advanced stuff and u can take classes in school and online for beginning coding. Also, check youtube for some tutorials
Awesome! Just as always!
You are my fav. youtuber :D
Thanks for watching!
Daniel Shiffman :)
Another awesome video. Really love your videos :D
Thanks for watching!
your vids made me pick up js again!
keep it up :D
Man you're too good. So jelly.
slither.io? You did the snake game already, for all intents and purposes, but maybe you can revisit and implement the multiplayer aspect of it.
oh, good idea!
Daniel Shiffman excellent! Can't wait.
@@camelcase9225 are you still waiting?
@@salman4430 yup maybe he is
@@TheCodingTrain I looked that up once but I only saw this vid. Can you (unless you already did) make a beginners guide (main functions, their parameters, etc)?
Dan: "I am the blob!"
Me: "OH HELL NO!"
(2 seconds later)
Me: "Well then, let's continue."
I don't like Javascript, not even a single bit. But I will try this with Godot as soon as I get the time. Awesome vid, man!
It's been 3 seconds and I already fucking love this guy
i jusy started watching your videos yesterday.. Great Work!
It is so hard to me but Im a beginner. This is a fantastic game and video. Im eagerly waiting part 2. Im interested in web sockets. You are my role model in programming!
Thanks for watching!
This is so fun to watch!
I code along to these videos to learn p5 but im having an issue. I just implemented the eats feature and im at 17:00 in the video but everytime my blob eats something it disappears. I cant figure out why and ive been comparing my code to the github and its exactly the same.
Make a T1000 simulator. Near the end of Terminator 2 when the T1000 gets frozen and blown apart, all the little blobs of liquid metal steered toward the nearest other blob, melded together, and repeated until there was only one main blob.
Then, for fun, you could make it explode again with a mouse click.
I love your videos SO MUCH! Omg
This is awesome. You are the first man on earth to give a video tutorial on how to make a Agar.io game. I am looking forward to the forthcoming videos. Am I a bit late for this? I tried to make a clone from scratch but I find that using a library like p5.js will probably speed up my development significantly after watching your video.
15:44 Wouldn’t it be easier to simply store internally the blob’s area rather than its radius, and simply use a square root when you display it? Calibrating the sizes means you don’t have to deal with any pi factors, and the eating could be done simply by adding the areas.
"Damn Daniel" ... Love these coding challenges :D
Thanks for watching!
Im so happy. To be an aspiring coder ( i suck and currently failing my courses but still want to try)
Thanks for your great tutorials!
Why do I het a «ReferenceError: createVector is not defined» at 2:47. I'm working with the p5JS-Editor
Oh! I just renamed the "class" Blob to Blobb and also renamed the instance(?)(first line at sketch.js) and it works now...
@@AdrianDegonda I had the same issue, and renamed it as you said, and it works! Why?
@@C00lestNerd I have no idea :)
Thanks a lot! Now my friend and I can code our dream: an io game.
hahah, funny.
good luck!
wish you best of luck!
You might want to check out a faster way:
github.com/websockets/ws
Very nice! You are so awesome :)
you should do a chain reaction game, where there's a swarm of objects that continuously spawn in from the edge, and when you click, it creates an "explosion" that the other swarm object hit and thus explode, and so on, and so on
I really wish I can program like you and understand it as well as you do. I'm trying to learn java and I'm having a very hard time. You make it look so easy. I get frustrated so many times and it takes me forever to do one simple thing.
Your channel has a great community woah! 264 likes and 0 dislikes! Keep it up :)
TheInvincibleNinjas first dislike
not
The new radius can be written as sqrt(other.r^2 + this.r^2) since the PI's cancel
Hi can you make a game like tik tac toe, chess , pinball etc., please
Or some great 2 player games
Sir it was coming the numbers added are not enough for sequence
I didnt know that a brazilian coded it! Im so proud
I just found the best Chanel on youtube 😍
god damnit Dan, i seriously love you. You better take my love damnit
do you have understandings in android and apk's (applications)
How to make animation on the "corner" while eating ball
The Coding Train, did you already made some kind of cooldowns on javascript?
Some kind of press a key and do something but if you press again that key before some kind of cooldown (make cooldowns with actual time (seconds or milliseconds)) reach the value 0, but if the that cooldown value is 0 that cooldown wont go even lower but if the key get pressed, it does something again and so on. (would be awesome make quite some cooldowns counting at same time, but still make the canvas and objects being drew).
yes, you need to time things based of how long the program has been running for.
performance.now() will return how long the game has been running.
For example, if you want to shoot a bullet only once a second at most:
var bulletTime = 0;
if (mousePressed) {
if (bulletTime < performance.now()) {
bulletTime = performance.now() + 1000;
//code that makes a new bullet
}
}
hope this helps!
I have known a game almost the same but more complex, the game is called: "Tasty Planet", you think you can do it with this program and teach us please
you make coding look so easy. Where did u learn to code?
The green in the middle of his headband you can see through cause of the green screen
ian meier just wanted to say that
How much do the square root calculations slow this down?
The Head Band tho
Roger, Roger. What's your vector, Victor? Can I get that clearance, Clarence?
Hey Daniel, do you think you can show us an implementation of a quad tree to improve collision detection performance, or some other similar data structure?
Yes, I would very much like to do this as a topic. upvote here: github.com/CodingRainbow/Rainbow-Topics/issues/144
Awesome vid, but I'm curious.. What do you need to change to make this playable over the internet? Agario has thousands of players? It is perfectly realistic. Are TCP heartbeat updates really fast enough for a totally real-time gaming experience. - Not in a home LAN. There is no UDP ability from browsers. I have access to a Godaddy pro dedicated server, non VPN. I have lots of experience coding Java authoritative RTS servers How does agario do it? Thanks
Awesome video!
Thanks for watching!
i want to learn how to code but how are doing this thing how do you know all of that and did you work in making a game. is youtube is your full job??
you forgot to do the mouse thing where the thurther your mouse is from the circle it moves quicker.
My sketch does not know object 'Blob' when it's code is in another file. Any tips on fixing this?
You have to add a reference to it to index.html. See: th-cam.com/video/Yk18ZKvXBj4/w-d-xo.html (I'm using a different editor in this video).
i'm stating the obvious but just want to say you are really good at coding.
so fun to watch!
did you no blobs.forEach(function(value){});
Sir when I entered blob.show it is coming blob.show is not a function
His head band acts like a green screen at one part XD 3:01
His mind is levetating
Very interesting and great videos. makes coding fun again, but the code doesn't work at all... its one error after another.. maybe show us how to set up the environment?
Try this playlist! th-cam.com/play/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X.html
Why does the main blob 'judder' when the mouse is held still?
It says:
Uncaught TypeError: Cannot read property 'show' of undefined (sketch: line 34).
Line 34 says blobs[i].show.
What am I doing wrong?
TECHtutorials I didn’t watch the video yet but this means that in blobs[i] at that index there is no object to read
I thought of sth. like this, so i made an if(blobs[i]){} statement around it. I still sometimes get the error.
4:34 And so, the campest of Marvel's supervillains were born!
can u make any other .io games like diep, slither or something like that
P.S-i subbed :)
slither? probably, diep yes
Dan plz reply! If you are having a performance issue with so much food, you should make an if statement which tests if the food is near you. If it is near you, then you should show it, otherwise you don't show it. I was able to make above 3200 food blobs (well, my for loop will generate width*height/32 food blobs, which means the width and height are 320*320, which is a small window) without the if statement, the performance is trash, but with it, it is good!
Thanks for the suggestion!
I am trying my best to remake agario, however i can't add the server because of something which is impossible to debug, and the solution isnt in google. :( can i show you the singleplayer one alone?
So p5 has a built in camera? This library seems like a graphics only version of phaser- perfect for multiplayer games where all the game mechanics are on the server :)
For camera stuff take a look at createCapture(VIDEO)
+Daniel Shiffman lol not that kind of camera... A game camera like in unity! P5 is great... I've tried using it, and I was impressed.
I searched in the reference and this splice function was remove, what can I do to have the same effect?
When you're referring to "chat" are you talking about twitch? I'd love to watch you live, no clue where though
he does livestreams on youtube. use the bell on the sub button to get notified of youtube and also on your phone when hes live
Man that fucked me up, you were my ad. I got really confused because there were a ton of circles bouncing around in the background and I thought that I skipped through the video or something.
For detecting if the main blob is eating another one I used: if (Math.sqrt(Math.pow(blobs[i].pos.x-blob.pos.x,2)+Math.pow(blobs[i].pos.y-blob.pos.y,2))
Its safe make games in JS??? I think its really easy to hack, because the variables are client-sided and you can make anything.
Yes, in ANY game that is only client side, you can hack and cheat mercilessly, however, if you use Node.js to host a server, and then do the game logic server-side, the client wont be able to cheat, as long as you make sure that the SERVER is doing the game logic, the client side should only get info from the server and spit it out on the screen.
*"Me, I am de blob!"*
- Daniel Shiffman
Hey Dan I was following your vid to the letter but the "blob = new blob();" doesn't work. It doesn't work with any of the challenges either btw. I've even copy pasted your github onto a new project and still wont work.
halp pls
you didn't capitalize the 'b' in new Blob()
How would you go about making the speed of the player inversely proportional to it's size?
blob.speed = 3 * (64/blob.r)
just remember to set the magnitude of the vel vector to blob.speed
I made this game before this challenge, I win ^_^
I really like your videos
keep it up
have you been told that you bifurcated your head due to the green stripe in the rainbow headband?
Yes actually, he has been told
when i do
function Blob(x, y, r) {
I cant run it and it says syntax error, maybe missing a semicolon?
Please help
That is correct, what is the error message?
wish i understood more of this, still fun to watch tho
im new to js from java .. do we need the p5.js library to create canvas and do these other stuff ?
no you don't. You just would have to do write much more lines of code and figure out more stuff yourself and write it more manually
I have 1 problem.
Everytime I try to execute it I get "blob.show is not a function"
How do I fix this?
Are there any classes / more pde files?
Can I please tell me how do you get your computer screen behind you!??
Sorry. Can u please tell me how do you get your computer screen in the background!!????
Green screen! I will be making a studio tour soon which will explain more.
The Coding Train Thanks for replying! I just found your channel less than a week ago and I'm really loving it! Keep it coming!
l love you videos you actually good you should be over 100000 subscribers
Thanks for watching!
*I have an important question!* What is the exact name of the program you are using?
thank you :)
Andy Sarren visual studios is better
what I have to do in the index.html to link this tow libraries to the page (it dose not work when I do this "")
I have to put a localhoast ? but javascript dont need a localhoast to work !
The newzoom with the lerp function only works one time for me, could anyone help me?
Dan may i improve this? so it doesnt look plain? like random player colors, white background, and spliitting.
oh yes i watched till the end ill inprove it :)
Please do, yes!
argh so hard. i cant easily get it to split :( but i can make it rainbow :)
try making an array for the player so that all their induvidual pieces can be represented as one whole player.
blobs.push (new Blob(width/2,height/2));
in draw function:
for (var i = blobs.length - 1; I >= 0; i--) {
blobs [i].show();
}
.show isn’t working for me can somebody help me
I failed university cause I am not able to code xD I hated to code after my studies (not really cause I always wanted to learn it but it wont go into my brain >.< that makes me angry about myself) But nevertheless I watched in 2 days a shit load of your videos cause its so insane how you solf this problems and have such fun with what you are doing. That is just impressive. My greatest respect.
Is this p5, or proccessing?
Whenever I speedily see a word "blob", I usually see it as "boob". Lol I'm crazy!