Coding Challenge

[@franchello1105]

20 minutes in and just realized this was angry birds and no flappy bird

[@aryamankejriwal5959]

I know right? I thought it was flappy bird too for the first couple of seconds!😂

[@elvsrbad2]

He's done flappy bird in another video iirc

[@aryamankejriwal5959]

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😂

[@toasty7408]

Holy shit same lol

[@konstanty8094]

"I'm gonna be ising matter.js physics engine" - a bit of overkill if you ask me

[@CYXXYC]

"it already knows the name bird.js" when it was first file you already made

[@xBrOwNeDoG]

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.

[@CYXXYC]

@@xBrOwNeDoG thats what i said lol

[@xBrOwNeDoG]

@@CYXXYC lol I didnt think thats what you meant. All good though

[@maximgasai1349]

I laughed so hard at that moment

[@bluhb]

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.

[@abdulhadilababidi8052]

41:24 such a weird kiss 😂 you are the funnest tutor on KZbin Keep going!

[@Taterzz]

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.

[@zhabiboss]

Him: making a bird.js file Also him after 5 min: IT EXACTLY KNOWS WHAT I AM GONNA CREATE IN ADVANCE

[@tejaswanama]

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

[@SimpleCarGuy]

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!

[@simeydotme]

So good. The style, attitude and communication are brilliant!

[@adamulrich5011]

Those libraries in your hands are simply OP. Keep it up!

[@krimo4342]

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

[@rukna3775]

the editing at the end of the the video was pretty good and also unexpected.

[@xTWiZTED]

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.

[@morphman86]

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!

[@sadhlife]

now i want to code bomberman in p5

[@morphman86]

@@sadhlife Go ahead. It's all grid-based, so if you watch Coding Train's videos about grids, you'll be halfway there.

[@minionbay8982]

the coding train is the most subbed programming channel on KZbin

[@noahburget3323]

I always watch your videos for motivation in my own code. Thank you so much!

[@epicclutchers233]

I am a kid and i love watching this guys videos

[@vashupandey2212]

you ara a coding hero

[@lapetitemort1666]

i am learned English to watch your lessons. VERY NICE TANKS YOU!!!!!

[@lapetitemort1666]

Aayush Pokharel oh, yes my level elementary but i am continue learning

[@taba1950]

Missed the chance to call it birdbox challenge. great as always.

[@Brahvim]

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_ )

[@Hello_There820]

(Please Ignore) 25:04

[@KongBorup]

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.

[@joogps]

6:30 When he said that I imagined javascript reporting ''Error: Null Pointer Exception (I dunno what ur talkin about)"

[@michelangelo3330]

u r my leader in coding world

[@Garry-jj6jh]

Thank you for giving us your knowledge and also being so positive😁. Keep up the good work

[@Thorou]

If you had written it in python, you could've used semicolons as the boxes.

[@carterjean]

the bird is ‘def’

[@shaggiel3099]

lmaooo

[@Robber7]

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()

[@hashmitsingh572]

thanx for the help , u deserve more subs

[@kolliden]

Love ur content

[@Ubayla]

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.

[@jaackotorus5589]

this is why type="module" is useful, everyone is just tired over worrying over the order of scripts

[@oscantes]

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.

[@DaveBriccetti]

Great fun! I'm gonna try Matter with my students. And good to see you naturally using const now.

[@TheCodingTrain]

Pretty soon I'll be pronouncing GIF with a soft g!

[@DaveBriccetti]

@@TheCodingTrain Ha ha. If you did that I would be thrilled!

[@luismiguelgallegogomez8000]

This really should be the "Crush the castle with Matter.js" coding challenge

[@BrettCooper4702]

Tank Wars :D

[@leandroaraujo4201]

Wow 139 likes and 0 dislikes atm, btw nice video. It's a pity I've missed the stream

[@MaxPicAxe]

4:00 "oh look it like knows what I'm going to do in advance" xD

[@XGSDEV]

And doesn't realize he already called it! lol

[@XGSDEV]

He thought that it knew what he was going to type, but the thing is he already called it! (LOLLLLLLL)

Maybe you could release the bird when it’s position is at the slingshot?

[@TimToolman]

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]

that’s exactly what I thought... looking forward to implement that tomorrow!

[@robertlister5192]

@@joogps anyone get this working be trying this for a while would be much appreciated.

[@robertlister5192]

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

[@clprackers7093]

Robert Lister you aren’t constantly checking the x positions... only once when the mouse is released

[@nachosacco5871]

That keyboard sound

[@HossynAssghary]

Oh rainbow im coding with unity for game this is awesome. I love 🌈

[@neelgohel335]

Awesome!

[@gid9551]

38:24 "Things have gone really off the rails here!" Heh.

[@FalcoGer]

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.

[@matiasvlevi6647]

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?

[@DragonSparks]

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

[@Eniallator]

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]

This method works great when the slingshot is fully charged, but not very effective when slingshot is not very pulled back.

[@Eniallator]

@@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 😉

[@robertlister5192]

@@Eniallator do you have the code to get this to work having trouble because of the class objects.

[@Eniallator]

@@robertlister5192 I don't, sorry

[@robertlister5192]

No worries :)

[@EENYX]

Why u so pro at programing ?? How did u learn that ??

[@sergioescobar3468]

awesome!, you made a great game as few minutes..

[@bernardorodrigues8848]

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?

[@alexandrezuppo2095]

AMAZING 😂😂😂😂😂😂

[@atakanakkas2580]

Good Content you better do more videos like this before those (fast typing) fingers get tired

[@YitzharVered]

Just remember, pong took him longer.

[@micronix1888]

Good job

[@kavyagandhi8839]

bro you are best

[@sajeevanfuels1980]

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! :)

[@malikd.mcnish6482]

great vid, how do you setup the presentation of your vidoes (what are the softwares)

[@JuanMunoz-th3vn]

finally was a HAPPY BIRDS , thanks Dan

[@Uhrbfbdb88]

im learning about kinetic energy and potental energy at school!

[@KX36]

bird's x velocity is maximum when its x position passes the slingshot's x position, so release then.

[@sorrychou]

👍👍👍厲害！

[@KakoriGames]

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.

[@carterjean]

12:22 *its okay, we can break physics and make a floor*

[@minghaoliang4311]

what about checking the position: when the bird is on the right side of the constraint position, release the sling

[@cutipets8706]

wooow that's amazing

[@aryamankejriwal5959]

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

[@TheCodingTrain]

Ah, yes, that definitely needs to be fixed!

[@alefsdev]

It would be great if u do the jenga one!

[@GuillemRibes-w7y]

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

[@TheCodingTrain]

Oh! Are you on a "high pixel density display" by any chance? Try adding the following: mouse.pixelRatio = pixelDensity();

[@adk_88]

@@TheCodingTrain I had the same problem on a 4k display, this fixed it. Thanks !

[@Yufukfu]

Just release the bird when distance between the bird and the constraint is less than the initial length

[@average-enjoyer7]

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!

[@joestevenson5568]

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.

[@MrWindboarder]

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;

[@tekoreypy]

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

[@TheCodingTrain]

More in this workflow series! kzbin.info/aero/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

[@Adam-rt1lc]

Bonne vidéo!!!

[@xFaull]

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

[@CodeBlue-le2sf]

Same... Did you ever figure it out im just now watchong this?

[@ziuhoque1532]

keep coding challenage

[@toxiczappyt5937]

why is my bird floating

[@hedwinbonnavaud6998]

What about problem: click on equals enemy to move them? :D plz show how to fix it!

[@Henkie]

bird box? ground

[@averagewojak2623]

:O

[@mikkel1383]

I have tried to find someone say bird box in the chat for a long time, FINALY😂

[@unlikelysalmon786]

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

[@DrBlort]

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

[@liamasman]

woooo!

[@aryamaangoswamy179]

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

[@TheCodingTrain]

Please suggest or upvote here! github.com/CodingTrain/Rainbow-Topics/issues

[@melody3741]

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.

[@bhagatvirsindhu4869]

Hello Daniel, I have a question : I am 13 years old and I'm currently in 8th grade and I will be in 9th grade in April. I have opted for computer science because I love coding a lot and I want to become a software engineer when I grow up. I will be taught processing.py in school. So I decided to learn Java (Processing) and came across your channel. I saw that in your older videos, you taught processing but in the newer videos, you moved to p5.js and you began to do most of the Coding Challenges with p5.js. It made me think whether I should continue to learn Processing or move to p5.js and leave Processing. This is my question - Whether I continue learning Processing or turn to p5.js. Please answer this question as soon as possible. Thanks

[@TheCodingTrain]

Hi! So glad to hear from you! Maybe this is a disappointing answer, but my answer is. . I have no answer! I think both are great and can have their pros and cons. One reason to use p5.js is that you can run everything in the browser and share easily with friends. But Processing is often faster and you can do more "full screen" things with it as well as interface with hardware and many Processing libraries! Just go with what you enjoy and feel like doing!

[@bhagatvirsindhu4869]

@@TheCodingTrain I feel like doing both, I'll first learn from all of your Processing videos and then I will begin with p5.js because it seems more tempting. Thanks a lot for replying.

[@Zxios]

Dan, you of all people should know by now that preincrement is superior to postincrement.

[@LapSiLap]

Nice video! Btw instead of const options = { mouse: mouse} you can just do const options = { mouse}

[@WEBSTART-LIVE]

спасибо за русские субтитры!)

[@χάθηκα]

I just can't stop laughing with that bird.js

[@VikingCanadian]

Can you do the Tower of Hanoi, showing the algorithm's work every step. I would love to see this!! :)

[@TheCodingTrain]

Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

[@pasirbedog124]

The coding train Vs all coding challenge

[@Robber7]

Could you do a video of depolying processing applications on Android? I couldn't get it to work that well unfortunately.

[@sonalinichit7156]

You are cool

[@FroyoAnto]

you need a shorter drumroll sound.

[@mihir89rd]

What purpose does pushing and popping in the bird show method serve?

[@TheCodingTrain]

I explain these concepts in this video: kzbin.info/www/bejne/pWrWmJ2rnZJ2eK8

[@boradrutvik4291]

Hey what soft ware are u using in the video???

[@TheCodingTrain]

I'm using the p5.js web editor (editor.p5js.org).

[@proyas21]

4:00 lol🤣

[@chloewatson7245]

Hey I tried the code but I am getting an error. And also there was a problem with the swing .Can someone please help me out.

[@jydendmonte190]

ummm pls i hope u see this anbd answer but my bird has an invisible wall around it not letting me touch the ball wut do i do pls respond to this

[@davidbundgaard]

I guess the proper way is to calculate the circle distance to start position and when it reaches 0 cut the line.

[@EduardsSilins]

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

[@EduardsSilins]

Try this one out... editor.p5js.org/redsky_48/present/PNusb_TyE

[@TheCodingTrain]

Nice!

[@isaidstream4547]

Hi, is there a library to make online games?

[@joogps]

isaid stream you should take a look at his videos about websockets :)

[@amrantomer8005]

My collision physics is off. things shoot out in the wrong direction with non realistic momentum. Has someone encountered this problem?

[@Troy-ol5fk]

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