Once he created bird.js it became a suggested name. Its only once he created the file that it showed. Edit: But I dont doubt that he has done this challenge off camera to make sure he can actually complete it.
It was literally the first file he created in this video. No doubt he has done this before to test, but that's not where the suggestion necessarily came from.
i don't even javascript but these videos definitely help me in terms of understanding how to properly break down an issue into a programmable solution. the jovial attitude just makes it more infectious.
I think the best way for the bird to reach Max speed is to release after test if bird position has reached slingshot point position not just delaying it 100ms, PS: thx for matter.js explanation
A solution to dettaching the slingshot would be comparing the circle's x (call it c) value to the slingshot's x (call it s) value. If c > s and mouseReleased, dettach the slingshot.
IMO, a better approach would be to replace the setTimeout controlling the slingshot release with an if statement that checks if the bird has crossed the point on the x-axis where the slingshot is placed.
I got a coding challenge for you. You have done a lot of the really, really classic games, and a few modern ones, but I don't think we have seen you make any mid-era classics yet. So my challenge would be Dr. Mario. For the uninitiated, you have a 8x32 grid. At random positions, 3-8 (depending on difficulty) "virus blocks" are placed. Your playing piece will start at the top middle and fall down. The pieces consist of 2 blocks of random colours. You may rotate the piece as it falls, just like in Tetris. Your mission is to match up 4 or more blocks of the same colour, where the "virus block" is part of that chain. Once you do, all blocks in that chain disappears. Once all viruses are gone, you have won. If a piece lands in a way so that one block ends up over the top of the screen, you have lost, just like in Tetris. If a piece land sideways with one block sticking out, and there is no block in the position right below it, the overhanging block will continue to fall, but you no longer have control over it, until it lands on top of another block or the floor. Good luck, fellow programmers!
Amazing presenter, great personality, even better coder and yet, the worse box drawer (that’s proportional and square) I have ever seen! Love the vids!
29:49 Yeah I might, and it would be to compare the x positions of the bird and the point that spring is attached to. When bird.pos.x is higher than that attach point, it would be released. And this way bird will be faster cause you won't be wasting the energy that's left in the spring like you do with the timeout thing.
You could just check the birds X if its a bit greater than the connection point of the sling (the bird is on the right) it should release. So that way it will only release if it actually moves to the right of the sling. Could also check the speed as well. Like if speed > X and x > slingshot.X + 5 fly()
5 лет назад+24
Maybe you could release the bird when it’s position is at the slingshot?
Pål Oliver Kristiansen agreed, either when the bird is at the slingshot constraint 0 point, or simpler when the x delta changes sign after release ( ie your bird went past the slingshot post)
@@joogps function mouseReleased() { console.log(balls.x) console.log(slingshot.sling.pointA.x) if (balls.x >= slingshot.sling.pointA.x){ slingshot.fly(); } } cant get it to work. Everything is the same I cant get it to spring forward before detaching the constraint it just drops as soon as i release.
29:46 :D I had this idea in my mind while you were thinking: Let's assume that users are only going to pull the bird towards the left side. If that is the case, then if the bird's x-position is greater than that of pointA (..? ...or whatever is the starting point of the constraint is called!), then we destroy/remove/stop the constraint. Same thing if it's going backwards! Another idea I had while writing/typing (😂👍) literally the last line was to check for the length of the constraint. If the 'spring' of the slingshot/constraint has reached a certain radius from the point/has been extended to a certain length, we store the force gained, and then let go of the constraint...that is, delete it (just like you set it to null). Then we remove all existing forces from the bird (other than gravity of course!) and add the force stored in the last step, back into the body. Pretty sure I accidentally didn't write the last step correctly and my idea is not gonna work xD! But the first one has to work....99 point cardinally infinite 9's guarantee! (I feel so confused about the second method I specified that my brain is going haywire right now...like, what does 'guarantee' even mean!? >:O) ( _please send help_ )
I noticed the "rest length" really seems to be a "min length", because it pushes the object towards the length value. Obviously, that's not the desired behavior. It's especially noticeable at 27:01. All sorts of weird behavior because it's trying to keep the bird at least 100 units away from the pivot point. Was kinda surprised nobody in chat mentioned this.
whenever you copy and paste code, especially large parts such as at 15:10, it's time for pulling it out and making it it's own function, possibly a parent class member.
To detach the bird at the right moment, you could also detect when the bird's x position is greater than the slingshot's x position and then when it is, trigger the detachment 🙂
@@victorwei6053 if you don't pull it back very much, you can't get any more power out of the shot. This is because once the bird's x position passes the slingshot's x position, the slingshot will start to slow the velocity of the bird down and bring it back. It's pendulum physics 😉
Another minor thing was that because the ground was exactly the same size as the screen, any blocks that went partially off screen could be seen falling off the ground
Maybe it would be better to release the bird when its distance to pointA is less than a certain number, that way the bird can get the full momentum before releasing and you don't have to time it.
It is a very useful and entertaining video, I just missed the part where the teacher explains than you must run the code from a java server or the browser will not load the images Because the cors system. but it let me learn about Apache and tomcat, so a the end I'm thankful for that too
Can you do a coding challenge where you create an interactive Rubik's cube? And possibly publish it to the Internet? Also, include a few buttons to make those moves (like an R button, L button etc.).
If anyone is having troubles with the mouseConstraint part, you may need to set this parameter if you are on a HD display: mouseConstraint.mouse.pixelRatio = 2;
Hi, a big fan of your channel! You have mentioned this project is done in an object orientated manner, I can't help but wonder how would you simulate this in a functional programming paradigm :) Cheers!
With great difficulty. OOP is really ideal for graphical and physics problems as they typically revolve around objects. Functional programming is better suited for tasks requiring guaranteed memory and thread safety.
Daniel Sir Can you tell me which book should I prefer for javascript coding that includes all the concepts right from variables to physics enjine and everything please tell! :)
If you attract a infinite mass with a (constant) gravitional force you get an infinite acceleration which is pretty much not what you've wanted for the 'ground' object xD
You should check after releasing mouse when the ball gets to its start position. In that way you will get the best results... :D At least i would do that...
15:36 I don't know why but I had to write " this.body = Matter.Bodies.circle(x, y, r/2); " dividing radius by 2. Is it possible that they updated the way matter.js works and made it the diameter input instead of radius?
Wait u til mouse press set a flag the flag looks for mouse release and then once that happens it waits until the ball crosses the center point i.e. string is length 0 it releases.
Super late to the party, I know, but is there a reason not to have the this.body.isStatic in the box constructor, and so when you create a new box you just tell it if it’s true or false?
Heya, I was just wondering why you sometimes use function and sometimes use classes when you can just do both with function. Is there a difference, and if so, is it important enough to use both? Edit: great video btw
Think of OOP as a way to model a problem, which is closer to how we (humans) think. You could resolve all programming problems with just variables, loops, conditionals, and functions (and maybe even without functions), which in the end is how CPUs work. When you model your data and behaviours in classes, you're making it easier for you to think about a solution. A classic example would be to model a car, which has an engine, and wheels, all interconnected, and you can only accelerate, brake, or steer. Otherwise, imagine having a chassis, an engine, and wheels, and having access to their innards, and moving everything with wire and by hand :D
help 19:00 matter-js: MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected i dont know why but when i type mouse: mouse it doesnt let me move the ball but i figured if i type Mouse: mouse it does but comes up with the warning above
I actually have an error. In around the minute 19:00 Dan writes code that is able to move the bird object around and toss it. This rarely works for me and it grabs the bird when the cursor isn't even on it! I think that this has to do with the scale but I can't think of anything else, if anybody who has also had this problem or have been able to do this challenge anyway, please help. Thanks
Update! Your code throws an error " Event {isTrusted: true, constructor: Object} isTrusted: true : "Event" name: "Event" " May wanna fix it, I was watching this and wanted to try it out lol.
20 minutes in and just realized this was angry birds and no flappy bird
I know right? I thought it was flappy bird too for the first couple of seconds!😂
He's done flappy bird in another video iirc
elvsrbad2 yes, but he’s done sooooo many flappy bird videos that it wasn’t too much of a stretch for him to do another one😂
Holy shit same lol
"I'm gonna be ising matter.js physics engine" - a bit of overkill if you ask me
"it already knows the name bird.js" when it was first file you already made
Once he created bird.js it became a suggested name. Its only once he created the file that it showed.
Edit: But I dont doubt that he has done this challenge off camera to make sure he can actually complete it.
@@xBrOwNeDoG thats what i said lol
@@CYXXYC lol I didnt think thats what you meant. All good though
I laughed so hard at that moment
It was literally the first file he created in this video. No doubt he has done this before to test, but that's not where the suggestion necessarily came from.
i don't even javascript but these videos definitely help me in terms of understanding how to properly break down an issue into a programmable solution. the jovial attitude just makes it more infectious.
I think the best way for the bird to reach Max speed is to release after test if bird position has reached slingshot point position not just delaying it 100ms,
PS: thx for matter.js explanation
A solution to dettaching the slingshot would be comparing the circle's x (call it c) value to the slingshot's x (call it s) value. If c > s and mouseReleased, dettach the slingshot.
41:24 such a weird kiss 😂
you are the funnest tutor on RUclips
Keep going!
I love very much the coding train channel. I learn whole javascript from this channel only.. I thank to this channel to makes me knowledgeable...❤❤
IMO, a better approach would be to replace the setTimeout controlling the slingshot release with an if statement that checks if the bird has crossed the point on the x-axis where the slingshot is placed.
I got a coding challenge for you.
You have done a lot of the really, really classic games, and a few modern ones, but I don't think we have seen you make any mid-era classics yet. So my challenge would be Dr. Mario.
For the uninitiated, you have a 8x32 grid. At random positions, 3-8 (depending on difficulty) "virus blocks" are placed. Your playing piece will start at the top middle and fall down. The pieces consist of 2 blocks of random colours. You may rotate the piece as it falls, just like in Tetris.
Your mission is to match up 4 or more blocks of the same colour, where the "virus block" is part of that chain. Once you do, all blocks in that chain disappears. Once all viruses are gone, you have won. If a piece lands in a way so that one block ends up over the top of the screen, you have lost, just like in Tetris.
If a piece land sideways with one block sticking out, and there is no block in the position right below it, the overhanging block will continue to fall, but you no longer have control over it, until it lands on top of another block or the floor.
Good luck, fellow programmers!
now i want to code bomberman in p5
@@sadhlife Go ahead. It's all grid-based, so if you watch Coding Train's videos about grids, you'll be halfway there.
So good. The style, attitude and communication are brilliant!
Those libraries in your hands are simply OP. Keep it up!
Him: making a bird.js file
Also him after 5 min: IT EXACTLY KNOWS WHAT I AM GONNA CREATE IN ADVANCE
the editing at the end of the the video was pretty good and also unexpected.
If you had written it in python, you could've used semicolons as the boxes.
the bird is ‘def’
lmaooo
I always watch your videos for motivation in my own code. Thank you so much!
Amazing presenter, great personality, even better coder and yet, the worse box drawer (that’s proportional and square) I have ever seen!
Love the vids!
6:30 When he said that I imagined javascript reporting ''Error: Null Pointer Exception (I dunno what ur talkin about)"
29:49 Yeah I might, and it would be to compare the x positions of the bird and the point that spring is attached to. When bird.pos.x is higher than that attach point, it would be released. And this way bird will be faster cause you won't be wasting the energy that's left in the spring like you do with the timeout thing.
You could just check the birds X if its a bit greater than the connection point of the sling (the bird is on the right) it should release. So that way it will only release if it actually moves to the right of the sling. Could also check the speed as well. Like if speed > X and x > slingshot.X + 5 fly()
Maybe you could release the bird when it’s position is at the slingshot?
Pål Oliver Kristiansen agreed, either when the bird is at the slingshot constraint 0 point, or simpler when the x delta changes sign after release ( ie your bird went past the slingshot post)
that’s exactly what I thought... looking forward to implement that tomorrow!
@@joogps anyone get this working be trying this for a while would be much appreciated.
@@joogps
function mouseReleased() {
console.log(balls.x)
console.log(slingshot.sling.pointA.x)
if (balls.x >= slingshot.sling.pointA.x){
slingshot.fly();
}
}
cant get it to work. Everything is the same I cant get it to spring forward before detaching the constraint it just drops as soon as i release.
Robert Lister you aren’t constantly checking the x positions... only once when the mouse is released
i am learned English to watch your lessons. VERY NICE TANKS YOU!!!!!
Aayush Pokharel oh, yes my level elementary but i am continue learning
38:24 "Things have gone really off the rails here!"
Heh.
Missed the chance to call it birdbox challenge. great as always.
29:46 :D I had this idea in my mind while you were thinking:
Let's assume that users are only going to pull the bird towards the left side. If that is the case, then if the bird's x-position is greater than that of pointA (..? ...or whatever is the starting point of the constraint is called!), then we destroy/remove/stop the constraint.
Same thing if it's going backwards!
Another idea I had while writing/typing (😂👍) literally the last line was to check for the length of the constraint. If the 'spring' of the slingshot/constraint has reached a certain radius from the point/has been extended to a certain length, we store the force gained, and then let go of the constraint...that is, delete it (just like you set it to null). Then we remove all existing forces from the bird (other than gravity of course!) and add the force stored in the last step, back into the body.
Pretty sure I accidentally didn't write the last step correctly and my idea is not gonna work xD!
But the first one has to work....99 point cardinally infinite 9's guarantee! (I feel so confused about the second method I specified that my brain is going haywire right now...like, what does 'guarantee' even mean!? >:O)
( _please send help_ )
4:00 "oh look it like knows what I'm going to do in advance" xD
And doesn't realize he already called it! lol
I noticed the "rest length" really seems to be a "min length", because it pushes the object towards the length value. Obviously, that's not the desired behavior.
It's especially noticeable at 27:01. All sorts of weird behavior because it's trying to keep the bird at least 100 units away from the pivot point.
Was kinda surprised nobody in chat mentioned this.
I am a kid and i love watching this guys videos
the coding train is the most subbed programming channel on RUclips
you ara a coding hero
This really should be the "Crush the castle with Matter.js" coding challenge
Tank Wars :D
Great fun! I'm gonna try Matter with my students. And good to see you naturally using const now.
Pretty soon I'll be pronouncing GIF with a soft g!
@@TheCodingTrain Ha ha. If you did that I would be thrilled!
this is why type="module" is useful, everyone is just tired over worrying over the order of scripts
Thank you for giving us your knowledge and also being so positive😁. Keep up the good work
Just release the bird when distance between the bird and the constraint is less than the initial length
whenever you copy and paste code, especially large parts such as at 15:10, it's time for pulling it out and making it it's own function, possibly a parent class member.
That keyboard sound
Wow 139 likes and 0 dislikes atm, btw nice video. It's a pity I've missed the stream
To detach the bird at the right moment, you could also detect when the bird's x position is greater than the slingshot's x position and then when it is, trigger the detachment 🙂
This method works great when the slingshot is fully charged, but not very effective when slingshot is not very pulled back.
@@victorwei6053 if you don't pull it back very much, you can't get any more power out of the shot. This is because once the bird's x position passes the slingshot's x position, the slingshot will start to slow the velocity of the bird down and bring it back. It's pendulum physics 😉
@@Eniallator do you have the code to get this to work having trouble because of the class objects.
@@robertlister5192 I don't, sorry
No worries :)
Another minor thing was that because the ground was exactly the same size as the screen, any blocks that went partially off screen could be seen falling off the ground
Ah, yes, that definitely needs to be fixed!
Just remember, pong took him longer.
He thought that it knew what he was going to type, but the thing is he already called it! (LOLLLLLLL)
bird's x velocity is maximum when its x position passes the slingshot's x position, so release then.
Maybe it would be better to release the bird when its distance to pointA is less than a certain number, that way the bird can get the full momentum before releasing and you don't have to time it.
bird box?
ground
:O
I have tried to find someone say bird box in the chat for a long time, FINALY😂
u r my leader in coding world
Oh rainbow im coding with unity for game this is awesome. I love 🌈
im learning about kinetic energy and potental energy at school!
Love ur content
It would be great if u do the jenga one!
It is a very useful and entertaining video, I just missed the part where the teacher explains than you must run the code from a java server or the browser will not load the images Because the cors system. but it let me learn about Apache and tomcat, so a the end I'm thankful for that too
More in this workflow series! ruclips.net/p/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X
Can you do a coding challenge where you create an interactive Rubik's cube? And possibly publish it to the Internet? Also, include a few buttons to make those moves (like an R button, L button etc.).
Please suggest or upvote here! github.com/CodingTrain/Rainbow-Topics/issues
If anyone is having troubles with the mouseConstraint part, you may need to set this parameter if you are on a HD display:
mouseConstraint.mouse.pixelRatio = 2;
Why u so pro at programing ?? How did u learn that ??
thanx for the help , u deserve more subs
what about checking the position: when the bird is on the right side of the constraint position, release the sling
12:22 *its okay, we can break physics and make a floor*
Awesome!
Hi, a big fan of your channel! You have mentioned this project is done in an object orientated manner, I can't help but wonder how would you simulate this in a functional programming paradigm :) Cheers!
With great difficulty. OOP is really ideal for graphical and physics problems as they typically revolve around objects.
Functional programming is better suited for tasks requiring guaranteed memory and thread safety.
Can you do the Tower of Hanoi, showing the algorithm's work every step. I would love to see this!! :)
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
Nice video! Btw instead of const options = { mouse: mouse} you can just do const options = { mouse}
Daniel Sir Can you tell me which book should I prefer for javascript coding that includes all the concepts right from variables to physics enjine and everything please tell! :)
Good Content
you better do more videos like this before those (fast typing) fingers get tired
I just can't stop laughing with that bird.js
Good job
awesome!, you made a great game as few minutes..
finally was a HAPPY BIRDS , thanks Dan
If you attract a infinite mass with a (constant) gravitional force you get an infinite acceleration which is pretty much not what you've wanted for the 'ground' object xD
Luckily for Dan matter.js doesn’t simulate N-body gravity.
You should check after releasing mouse when the ball gets to its start position. In that way you will get the best results... :D At least i would do that...
Try this one out... editor.p5js.org/redsky_48/present/PNusb_TyE
Nice!
What about problem: click on equals enemy to move them? :D plz show how to fix it!
I guess the proper way is to calculate the circle distance to start position and when it reaches 0 cut the line.
great vid, how do you setup the presentation of your vidoes (what are the softwares)
Dan, you of all people should know by now that preincrement is superior to postincrement.
I think it would be more realistic to remove the constraint when mouse is released *and* the magnitude/length of the slingshot line equals 0
keep coding challenage
15:36 I don't know why but I had to write " this.body = Matter.Bodies.circle(x, y, r/2); " dividing radius by 2. Is it possible that they updated the way matter.js works and made it the diameter input instead of radius?
I feel like your right, but the api still has it as radius, maybe they havent updated the api? I was having the issue of it floating over the ground
why is my bird floating
you need a shorter drumroll sound.
wooow that's amazing
Next Coding Challenge: Full Fledged Physics Engine With SAT Collision Detection And Resolution
bro you are best
(Please Ignore)
25:04
Could you do a video of depolying processing applications on Android? I couldn't get it to work that well unfortunately.
Wait u til mouse press set a flag the flag looks for mouse release and then once that happens it waits until the ball crosses the center point i.e. string is length 0 it releases.
Imo you could have used a decorator instead if inheritance
Tell me more!
next coding fps game with js
have you ever seen that guy who made an online fps game only with HTML and CSS? keithclark.co.uk/labs/css-fps/
Super late to the party, I know, but is there a reason not to have the this.body.isStatic in the box constructor, and so when you create a new box you just tell it if it’s true or false?
Heya, I was just wondering why you sometimes use function and sometimes use classes when you can just do both with function. Is there a difference, and if so, is it important enough to use both?
Edit: great video btw
Think of OOP as a way to model a problem, which is closer to how we (humans) think. You could resolve all programming problems with just variables, loops, conditionals, and functions (and maybe even without functions), which in the end is how CPUs work.
When you model your data and behaviours in classes, you're making it easier for you to think about a solution. A classic example would be to model a car, which has an engine, and wheels, all interconnected, and you can only accelerate, brake, or steer. Otherwise, imagine having a chassis, an engine, and wheels, and having access to their innards, and moving everything with wire and by hand :D
Bonne vidéo!!!
спасибо за русские субтитры!)
The coding train Vs all coding challenge
👍👍👍厲害！
I don't like the setTimeOut. I think it should release when the tension between the bird and the line reaches 0 Newton.
Yes, that would be much better!
*SHOOTING RELEASE PROBLEM FIXED.* if the bird is in a given radius of pointA then remove the SlingShot
help 19:00
matter-js: MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected
i dont know why but when i type mouse: mouse it doesnt let me move the ball but i figured if i type Mouse: mouse it does but comes up with the warning above
Same... Did you ever figure it out im just now watchong this?
AMAZING
😂😂😂😂😂😂
Sir, can you provide some ui and backed with firebase and ui with p5.js..
suppose where menu screen need to click and go to game screen
woooo!
4:00 lol🤣
I actually have an error. In around the minute 19:00 Dan writes code that is able to move the bird object around and toss it. This rarely works for me and it grabs the bird when the cursor isn't even on it! I think that this has to do with the scale but I can't think of anything else, if anybody who has also had this problem or have been able to do this challenge anyway, please help. Thanks
Oh! Are you on a "high pixel density display" by any chance? Try adding the following:
mouse.pixelRatio = pixelDensity();
@@TheCodingTrain I had the same problem on a 4k display, this fixed it. Thanks !
Update! Your code throws an error
"
Event {isTrusted: true, constructor: Object}
isTrusted: true
: "Event"
name: "Event" "
May wanna fix it, I was watching this and wanted to try it out lol.