Coding Challenge #67: Pong!

hello everybody this is Paul and I just finished a coding challenge where I programmed exactly this and this is working pong with very very very very few bugs it probably has the bugs they haven't noticed yet however I had a lot of problems making this video I was so excited like here it is again I'm going to have the greatest video ever on the internet it could be ten minutes is making pong and everyone will just be able to Washington ten minutes and make their own versions of pong to creative the life of children everywhere but I failed first of all the videos at least an hour long it can be longer now that I'm rambling introduction I had a lot of problems and things I couldn't figure out and I want to say that there was a major issue at a certain point later in the video I use this function to kind of look at how I can map an angle to a direction because based on where the paddle where the puck hits the paddle it should move in a certain direction and I forgot a couple things I didn't actually convert to radians when I was doing that test and the range that I used actually went in the wrong direction so both things will be wrong in the video the code however that you see linked in this description has the corrected version and is what you see right here there's some sound we turn that off and I can move I going to play this a little bit more right now my left paddle is doing much better than my right paddle but I made it I'm a pawn I hope you will do creative versions of it and I'll see you in another video sometime enjoy this coding challenge hello welcome to a coding challenge I am super excited for this one it's been a while people have asked me to do more coding challenges with a timer or simple games and I'm going to program in this coding challenge poem in 2 minutes and 30 seconds no just please hot so I could be like 3 hours but you see how long this video is and then you'll know about how long it takes I'm not stopping in the middle of it it doesn't matter what bugs or things I can't figure out I am going on but I'm not starting my timer just yet what I'm gonna do it for it sort of timers lifted leaves together you would be map out the pieces of pong figure out what features we're going to implement so if I have a computer graphics window Kandice in the browser or some other kind of graphics window what I need to have are two paddles I need a left paddle and a right panel and then I also need to have a puck the paddles move up or down based on keyboard input so maybe you like will do look over the keyboard like you know a and Z and KN or something you know whatever so you could be played on one keyboard I mean obviously one reason doing this is later I might make a video to look at some different artificial intelligence algorithms that might allow us to like see if we can have a computer play one of the pals but that's for the suicide so I need the puck and the puck needs to have an X and a Y and it also needs an X I'll call it X speed and a Y speed because it needs to figure out which way it's going I need to have some type of collision detection between the paddle and the puck and then I also need to figure out if the puck goes past either side there's a score so this this player gets you know plus one score if the puck goes past the opposite side it's like air hockey it's Paul okay we ready to do this now here's the thing how do you ever programs before if not you must have a little trouble following this video but I'm going to try to keep this fairly beginner friendly I'm going to use a programming environment called processing you can learn more about processing in this video's description and I'm going to use a concept called object-oriented programming meaning I'm going to think of the puck as an object and each paddle as an object and the puck is going to have data associated with it like its location and speed where it's moving and there's going to be functions like does the puck hits the paddle so those are the things that going to add to the program I will also make a JavaScript version that you can run in the browser so you can look in this video's description for that code as well I'm trying to say all this stuff out now because I know I have to get started it's like well like forget it I think I can just get going now okay I'm going to walk over here that's where my computer is alright now I have this timer going up there it says 14 minutes look I'm in the wrong program here we go this is processing it's got a set up in a draw function started yet don't look at what time we hit refresh we'll go back to 20 minutes really I might just I'm procrastinating I'm going to do this how long is already like 5 minutes long probably let's just get started ok ready here we go 1 2 3 ok all right oh god I'm panicking ok first let me just add a background and make a background that is black the puck is go I want the puck to be I'm going to make it a circle because that'll be easier to deal with so let's just get started oh let me save this save pawn I'm going to add another tab here in processing and I'm going to call that puck and the way object-oriented programming works is I create something called a class and the class is a template for making things so this is the PAC's template I need to make an actual puck so the template is going to have an X and it'll start in the middle of the window and the the template the puck is also going to have a Y and it will start it also in the middle of the window and it's going to have a function I'm going to call it show and I'm going to in that function on this side fill 255 ellipse X Y and I'm just going to give it some arbitrary size 24 24 so the lips function draws a circle with the font size the font size okay can you see it okay so let's now go and run this well now let's make a puck so now I can say buck-buck-buck equals new puck and puck show that the right thing is a call to puck an ellipse call here we go tada am I done yet no so now I need that thing to move so for it to move I'm going to give it I'm going to shut it I'm going to say X speed equals I'm gonna make this a random number so I can use the random function to say random negative 3 3 so a lot of things about this that I should be using vectors for and why speed is negative 3 3 here's the problem I don't actually want to do this oh it's so sad but let's just leave it this way I can improve this later I don't like this because I could get a puck that's not moving at all let's just give it a fixed let's just give it a fixed speed 3 1 so always going to move the same way I'll fix that later void update I'll call this I'm gonna write a function called update and an update I say I say x equals x plus X speed y equals y plus y feet ok so now if I run this doesn't do anything but if I say puck dot update now I'm calling that function drawl by the way the thing that happens over and over again updates show update show background update show background update show background updates show I should not be singing it takes up too much time there we go there's there we go so now oh we're going to need some paddles I'm strangely want to do something that I wouldn't normally do but before I do the paddles let's implement some other parts of the game so let's let's write a function that's called edges so really we have to worry what happens Oh what happens if the puck hits the top or the bottom right so if Y is less than 0 then I need to reverse the Y speed so Y speed x equals negative 1 and actually going to do this if y is less than 0 and this by the way is a simple in programming for or in Java programming or processing also JavaScript two of these pipe symbols or if it's less than 0 meaning it's above the window or greater than height meaning it's below the window reverse the speed and let's be sure that this is doing that by kind of giving it a very kind of initial oops whoops wrong thing wrong run run let's just test this by saying giving it a very slow X but a fast why that didn't work so I have to call it so I have to say puck edges so I can write a function that gives it some logic to follow but if I don't call the function doesn't do anything so okay so that's working it's going to bounce off the top of the bottom it does that in pond right cricket done okay great so now let's let me go back to something more reasonable so now I also want to check though if X ever gets past the window then what I want to do is I want to say I want to I want to like reset the puck if X is greater than width or X is less than zero I want to reset the puck now here's the thing you can track both of those separately because different players are going to win but let's so let's just make that two separate if statements for later but let's just call reset right now and reset so I'm reset it's going to be a function that I'm putting inside this object and what does it do it sets the puck back to the center and you want to do I'm not even going to change its wide speed or EXPEED I'm just going to let it be the same which is probably should probably we're in so now we can see here's what it's doing if it gets past the right-hand side okay so that's actually a problem is always going to go the same way but okay so we've got the puck moving yes I didn't somebody James in the chat right you didn't take into account the ellipse size so it's going to clip on the edges but not a big deal this is a good point I don't know if I applied for these details but let me see if I can I'll add that in later perhaps and that's something of somebody watching to that okay we need some paddles so what I'm going to do now is I'm going to make an object called paddle and again I need a template for the paddle and the paddle is going to get it needs to have an X location and a Y location and let's think of a height and you know what let's use mm and a with this is a little tricky I kind of want the paddle to be maybe using the reference point low let's just we're going to do we're going to do okay x and y is my okay stuff everything is buzzing okay I turn off the education before you start these things okay so the other thing I'm going to do is when I make the paddle I want to pass in a I'm going to call this like I'm going to say X underscore there's a little bit weird if you haven't done object-oriented programming I would construe it this is what's known as a constructor function so why go first of all why is oh it's going to be yeah let's tap okay so here's the thing I need a minute can I take a minute there's no way to pause this timer but I don't get the thought there's lots of different ways you can think about a rectangle you can think about a rectangle as from this point with a width and a height so this is the X Y with a width and height you can think about it from here with a wisp and a height you can even think about it based on this these two corners I think I want to think about the rectangle strangely enough I don't really love this because it causes some other problems but I think it's gonna be easier for me to think of the rectangle from the center point so I'm going to do that so I'm back so Y is always going to be height divided by 2 width of the PALS could be like 10 pixels and the height is gonna be 50 pixels so probably have to change those later so and then I want a function called show and I need to say wrecked mode Center and I'm because they fill 255 for this as well and I'm going to say wrecked X Y width height and it's okay now where it's X is kind of a tricky thing and you know what I'm going to do I'll gonna leave this we're know there's there's a better way to do this but I'm not going to worry about it right now okay so so let's now in here let's make paddle I'm going to call it left and paddle right so I want to be able to use that same template to make two objects oh the power of object-oriented programming so I'm going to say left equals new paddle at 0 this is going to be wrong and right equals new paddle at width and then I want to say let Dutch show right show okay let's run this and see what I get ah not so bad there are the paddles get really small paddles so a couple things one is notice how because the center of the rectangle is right on 0 actually half the rectangles offices off the window which is fine but just first you know just to keep things I probably want to say its actual location is X wherever is given this initial X plus plus its width divided by 2 or shoot or minus depending on whether it's the left or the right okay better idea we're going to use an argument here boolean left so is it the left or the right paddle so I'm gonna make one o'clock true once one paddle true one paddle fault I'm sure everybody in the chat is thinking of a lot of things that I'm doing wrong I can't look up a chat the I don't know post a lot of if there's something really major I don't know I don't know how to get my attention okay so what I'm going to do is I'm going to say if left X equals W divided by 2l X equals with minus W divided by two so I'm basically going to take a boolean variable in because I have only two kinds of columns and now if I run this there we go and I should make these paddles taller let's make them 100 pixels and there we go so now we've got we're pretty good we've got pong oh something saying there's usually a gap between the paddles and the edges okay let's add that plus a float gap well that's going to make it so complicated let's find them actually it won't really x equals W divided by 2 plus 10 minus 10 let's just give a little or actually one I just use the full width and that'll the gap is however wide the bar okay there we go pause oh I got nine minutes left okay ah so here's the thing I need for fighting to move the paddles boy boy boy boy attention shift master Meister false alarm okay so what do you do is move the paddles let's write a function called move and it's going to move by some number of steps so I mean say Y plus equal that number of steps and then I'm also going to say y equals constrain so I don't want to let the user move the paddle above off the window constrain is a function that says take this value and constrain it between zero and height only I don't want to constrain it between zero and height I want to constrain it between because X can't actually go all the way up I wanted to stop but because sorry Y is the middle of the paddle between constrain between I want to draw a diagram but I'm worried about the time it should never use your timer things hi its height divided by two and height minus H divided by 2 so this would now keep it I'm going to use I'm gonna draw the diagram forget the time right because if this is the edge right I this is the Y where it can't go up any further and this amount is the panel's height divided by two so that's sort of an important piece there now I have some errors here oh I need a semicolon so now how do I move how do I move the paddle okay well in processing in addition to setup starting the program and draw running the program I can have a key press function and then the key press function I get an event every time a key is pressed this code is executed am i standing in front of it let's move this over so what I want to do is I'm just going to say if key equals a I'm going to take the left paddle and what I call it move negative one that's up else if key equals Z or I realize I'm going to have a problem here left move one time and now I'm going to do the same thing for I don't know J and n this terrible interaction ideas but let's end it should be the right one so now let's run this well look how little it moves so let's change this let's have to move ten steps every time I press and I should probably make that a variable now I can't hold it down oh I'm really gonna have to fix this boy that's good I'm going to need more implies I need more time I got to fix this now actually it's kind of unplayable the issue is I can't hold down the key so this is a problem what I actually need to do is whenever I press the key I need it to start moving and not stop moving until I release the key so so what I'm going to do this is a little tricky but I'm going to key released in any key release basically I want to say left stop moving or actually can do move zero because I have a function right move zero and the difference is instead of actually in exactly won't be so hard so right what it does right now in the move function if I go to the paddles move function it's actually moving it in the function but what I want to do is I want it to have a I'll just call it like a Moute I don't know what to call it you shouldn't I don't have time to think about it it is let's call it a Y change Y change which is zero and I'll also have an update function which does this so the update function always changes if I Y change and the move function just set Y change to a certain value so in other words I'm going to always left update right saving the hardest part for last let's update write down update so it's always moving it's just often moving by zero it's always moving by zero unless I press a key it sets it to move by a certain amount and stop once I release the key and now I'm going to do this so now this is quite a bit more elegant to play with there's issues with I can't press more than one key to time but those things can be ironed out later okay here we go now good palm I see a question did pong repel in different angles depending on where it hit the paddle in the original ooh the paddle is broken up into eight slices that make the ball bounce at different angles depending on which segment the ball hit why why makes it so hard this is definitely going to take longer than that amount of time but let's first at least gets up let me first let me make this thing move a little bit faster here okay so and why is it so slow okay okay great so first thing that I want to do is I want to check to see if the puck hits the paddle this we can do and because I'm using object-oriented programming I can just have a little dream a fantasy state of how I might write this right if puck hits left or if puck hits right puck reverse reverse so and actually what I want to do is this is kind of like the idea but you know what I'm going to do all this can happen just in the puck itself I can just say puck check left Oh check paddle left puck check paddle right okay so this is what I want to do I want you can see here it's got this red light it has no idea what check paddle is but the idea is that I want to write a function called check paddle that's part of the puck object that receives the paddle and checks if it's hitting it and I have to do it a little do I have to do it differently with the left and the right kind of yeah I shouldn't use reverse because that's a reserved word okay okay so let's go into the puck I should have thought this through in advance a void check paddle paddle piece by the way you'll notice here I didn't write a constructor function technically don't have to unless your have some type of logic that you need to execute in the constructor function all I have with these set variables so don't you although you know proper object-oriented programming would have me right just this blank function that would get called when I say new puck okay check paddle hmm hmm check paddle check battle okay let's just pretend all I'm thinking about is the right paddle if X is greater than paddle dot x and y is less than paddle dot y plus paddle dot what oh boy I'm just going to do it paddled out why I don't love this paddle dot y plus paddle paddle out y plus paddle dot H divided by two and Y is greater than paddle dot y minus paddle dot H / - I hate this long awkward if statement there's so many ways I could probably make this nicer but this whole look of a horrible gallery bug but let's let's let's use the fact that there are visual didn't left to explain what I'm thinking about here you're going to hear a dingbat actually you won't if it goes off while over at the white board so I have to okay I'm gonna get myself some Sonya Smith it so in other words I want to know if the X has moved past paddles X but I want to know this is paddle why if the Y is in between paddle Y minus H divided by two and paddle y plus h divided by two so that is that that's the section that I want to look at I kind of want to I want to refactor this so badly to make it nicer but this is kind of will work on my own time a minute left still so if this is true I want the pucks X speed to change by both myself by negative one is this and this is going to work for the right paddle so let me just only right now check the right paddle let's just see Oh quick cool down yeah okay there we go ah okay this this really looks so wrong right right because you can see here I really first of all goes it goes way past so I really have to I really have to [Music] I really have to I'm sorry I really have to deal with the fact that the pass the puck has a size I just looking at the time how much more time do I give myself about ten more minutes oh my god that was really loud let's give myself ten more minutes by the way if you want to know how to program the timer in JavaScript I previously did a coding challenge where I made that exact time okay ten more minutes see if we can do that okay so we've really got to deal with the fact that the puck the puck needs an R so it's size I like the size of it is reason why I was drawing it at 24 so the radius is actually 12 and you know what I kind of want I want the paddle to variable to be half height half width it's going to be much better that way but we'll worry about that later R times 2r times 2 so there's a couple things here one thing that I want is now in the paddle in the puck to check if X plus R right because if it's right edge is has it passed the paddles X and not just passed the paddles X but passed the paddles left edge which is minus paddle w divided divided by 2 oh my kingdom for some clean not so horrible long if statement but let's just look at this and see if this looks nicer which key to I give it up there you go to that that didn't look exactly right did it I can't tell something so fast hold on oh that's perfect okay I thought it's perfect okay so that's great so that works for the right panel here's the thing I think what I need to the problem is there's a little bit of an issue which is that I want to check if the X is greater than the X for this panel but I want to check if it's less than for this paddle so I think what I need is to indicate because you know I could do some more sophisticated thing where it could bounce off either sides I doesn't do that in pause so I might want to pass that function maybe a plus one or a negative one depending on which side of the paddle I'm coming from I could also just write two different functions I don't know what's best so let's try my goofy way of giving this a number like direction so this is like the direction it's coming from so in other words I'm going to check right it's coming in a positive direction I'm going to check paddle left it's coming in the negative direction so in that case let's look can I can I do something like this so I'm going to I want to like format this in a way where I can kind of see it like these are the these are the things I'm checking if X plus R is greater than so this is well direction it this is minus so I should really say plus minus direction times right because I want to check on this side the X minus well the other side I want to check the X plus so and I just needs to also be this needs to be plus Direction times R right because R is a my moving to the right of it or two then you'll ask whether it's going and then this has to become less than now can i how can i turn a lesson to a greater than with oh i could just use the puck speed if it's going to the right or the left that's a good point how can I change this so here's the thing let's just do this ridiculous way if hmm so first all right let's just let's break up this this statement I don't like what I'm doing here if let's just check these things first let's just check if the Y is in between so if the Y is in between which is just this statement then we could move on if Direction equals negative 1 then check the ax value if it's less than and I can actually just do this because I'm going to be lazy to make it right I can check this and I can put this as an and if direction is negative 1 and so I actually don't need this direction I don't need this direction because I can use the X speed okay I got it I got it I got we're going to take this out and we're going to say if XP is greater than is less than 0 that's the negative one direction then I'm checking it against the right edge of that paddle and if that's the case XP x equals negative 1 else if if X speed is less than 0 and now I need to just do the opposite thing so if it's moving to the right actually if I definitions already moving the right else/if camera one off timeout this will get edited out actually no it won't get right off notice the time we're still going X plus R is greater than px minus PW divided by 2 then often I'm sure I could join these with an O oh wait I mean so convoluted and complicated but now let's think about this this is very very hard to read this is not so friendly but this is what we're doing first I just want to know if the paddles wide position between the top of the bottom then is it on the right side of the screen is it moving to the right or the moving to the left it's moving to the right check if it's gone past pile is moving left check miss gone past that paddle let's see if this works oh and I don't need this direction saying anymore that was a digression that seemed interesting but unnecessary and now oh boy Elena's crazy crazy Fox crazy pond whoa strange issues it's just a flag with negative 1 or +1 and multiply people are people that's probably a very good idea but what did I do wrong if X speed is less than zero okay it should be like a pause here for debugging okay let me think about this if X I need I need the problems I need to sketch this out while I'm looking at the code if so let's let's this camera went off - all right everybody coding challenge disaster okay wait hold on okay let me check this out right so if X speed is positive the PAC's X should be greater than the paddles X - oh the pucks X plus R should be greater than the paddles X minus its width / - right this is the points we want to check if it's greater plus X puck X minus puck with divided by two x anyway otherwise if X speed is less than zero that seems right but really here's the thing why have the same the thing is hmm what'd I do wrong X x equals negative 1 what did I do wrong for this again oh I can refresh the timer it's totally by accident Oh it'sa getting it's getting stuck so first of all panicking I'm panicking everybody it's getting stuck why is it getting stuck X minus R looks all right let's just look at on let's just look at 4 so let's treat these separately let's treat these separately so let's just look at um let's just look at the right let's just check the right paddle first now what I get wrong here I need another or I need another closed bracket this is me D bunching so much for my timer okay so why is it stopping because it changes oh it's doesn't it's not updating it it's not moving off so it's still there because where do I check then I show that an update it should move though because it's checking it should get a chance to move I mean so you know if we just I guess what I could say here is X equals P dot X plus P 2 I could just shove it I could shove it off to the little wait oh I'm on the wrong side here this is the side that I want what I could do is if it's moved past it I could I think this is the same as the gravity bouncing ball problem I could just shuffle it right to its proper spot which is px - P dot W divided by Q minus R oh oh it's checking oh this is like a terrible thing that I'm doing no wonder this is awful this is like an awful thing that I've done because it's just it this is still like the right paddle so it's still checking this it I can't I can't actually do it this way with its X speed because I actually only wanted to check the paddle based on its direction oh boy can I have a can I have a mulligan here give me Edison say this is part out I thought it wasn't going to do it so oh this isn't going to be that short 12 minute I'll do another version of this in JavaScript where I won't make these mistakes okay let's see I'm going to be really the thought I'm going to unfortunately have to do a terrible thing that I wanted to avoid check paddle left and that's just going to be checking this is the right right you know this is the last check paddle left so forget about this X speed thing I have to check all these things so I ran out of speed meter and it's going to make this much easier I was just trying to avoid I'll trying to reuse the same function and I think I should just refactor this later after I think about it check paddle right and then now we need to say if it is still within the paddle but the X is different and the X X is X plus R is greater than this - so now we should be good so now what I just need to do is I just need to say check title right and check paddle left I just need a slightly different algorithm for each paddle and two different functions that'll do it okay there we go now the other thing that people were saying is the angle should change based on where it hits it hmm let's implement to score first I've got five minutes somebody tell them what so okay so the angle should change so this has to do with angle so actually no - never mind I'm going to do something here so here's the thing remember when I said I wasn't too happy about the way I created this initial speed well I don't actually want to create a speed and you the whiteboard here everything you ever want to do is more complicated than you think I don't actually if I pick a random X speed between like negative five and five and a random Y speed between say negative five and five I could potentially pick an XP to zero and a Y speed of zero that's not what I want what I actually want is to pick a random speed that's always maybe going five that is just in a random direction so what I really want is a random angle between zero and 360 or between zero and 2pi and I have this other video it's called polar coordinates you can go look up that right now because if I pick a random angle I can then say X speed equals whatever speed I want like five times cosine of that angle and Y speed is five times sine of that angle so this has to do with a right triangle and sine and cosine of that angle and I go through the math of that in another video okay so now what I'm going to do here is I'm actually going to take this out of here and I do this in the constructor because what I want to do is slope angle equals a random angle between zero and 2pi and I want to say X speed equals cosine of that angle and I'm going to times five and Y speed equals five times sine of that angle so now when we run this we should see the puck always going in a difference always going at the same speed but in a different direction so the reason why this is important is because this angle thing I think is actually ethically a variable that I'm going to want to keep track of Oh vectors I should be using vectors that's okay we're going to be fine okay people were taking bets on how long this was going to take me and I think somebody's about to win okay so now what can I do here so now this should also by the way this algorithm should go in that reset function which sets it back to the middle and then by the way why not in the constructor just call reset now I wish I could keep track of the angle and then I could just okay let's run I'm playing it I'm playing it okay come on come on come on come on this is pretty good Hey kind of made pong here whoops whoa that's bad that's a bug look at that okay so I got to deal with there's so many but I shouldn't pretend I did not made that happen okay so here we go let's at least add two scores let's do something satisfying because scoring sound okay so I'm going to I'm going to say left score and right score and I'm going to put those on the screen let's say fill 255 text left score um 10 I don't know I'm just going to pick some location and text right score and I should you know with -10 something like that let's try that so so let's see if we get the score whoops so you should see the score is there it should make the font size a lot bigger and then maybe make this in a different spot okay you can see the score is there yay okay now let's start adding some points where do the points increase we're in the puck the edges issue if it goes off to the right this is right left score gets a point now I don't love the fact that I'm using this global variable here in the puck object probably should return and scores releases its book just for the sake of quickness here I'm going to say right score plus plus here so now let's see if we can get some scoring going 1 1 2 2 1 2 2 2 3 2 2 okay so we've got score so in a lot of ways we're in pretty good shape let that a sound do I even have the health library import sound okay so what did I just do by the way under sketch import library I can go to import library imports sound if you don't have the sound library you're gonna have to go to add library to bring up this menu search for sound hit install that you'll have the sound library so I have the sound library I'm going to say P sound I think it's called ding and then a P sound equals new P sound ding mp3 you have to save this this ding dot mp3 looks like 100 I got scared whoo excessively look at 10 per minute please ten one minutes there we go I knew this was useless it's not P sound apparently let's look at the huh why am i adding sound is really ok this is really just taking up a lot of unnecessary time processing sound sound libraries I want to look at sound file I know I said P sound sound file file I just imagined it was called P sound sounds file and then and let's just call it a ding and ding ding equals a sound file and then let's have it being we have a thing every time somebody gets a point ding dot play ding that play ok let's run this well it's so loud is it loud for you guys come on it was really like I think it air hockey or just who the hell gets to walk around pick it up and put it back really just why I'm testing the sound and now and now you're going to bow top of the plunger gate because you can restrict it can you guys hear that sound volume is fine okay okay so we've kind of got pause here's the thing I put like a hug stop okay there's a couple things missing here hold on one is there's a bug that's a ball can get stuck behind the panel so we should really deal with that number two is oh I think I know how to deal with that actually that's going to be easy one let's fix that let's fix that because I'm realizing that what I'm checking for really if it just gets past the middle of the paddle right it's so I think that's really the issue the edges is it really is really like the width - what is it called right paddle right - right divided - right dot dot W right and then the this is a left dot W so I really just want to check and not if the ball gets all the way to the edge but just a little bit past the paddle well though is that going to make it disappear in a weird way maybe well that's going to so maybe it's okay if it gets all the way to the edge so maybe it's more maybe it's not about that maybe it's actually so I don't like that because we want it to go and it really should be if X should get all the way off the edge if X plus if X - ours off the edge and if X plus R is less than zero that means it's all the way off the edge nobody really should fix is here where I'm checking the checking this monstrosity here because what if it should only actually reverse its speed if as long as also I should also just subject as long as the X is not greater than maybe the other side of the paddle so not greater than P X plus W divided by two so as long as it is right because if it's already gotten so it it might get past the paddle further away so as long as X is actually less than it has to be greater that's to be like really within the within that within the paddles back Oh starting angle yes yes the starting angle should be constrained okay good point X is less than X is less than and to do the digit into the the paddles X just to say the paddles X like it should be between the edge and its center so this is like a quick extra double check to make sure it's not kind of behind the paddle and this is another quick double check to make sure as long as it is greater than paddles on X okay so let's try this and now we should okay I'm going to constrain that angle in reset what we're going to do is we're going to constrain the angle between negative PI forty-five degrees which is PI divided by four and 45 degrees which is PI divided by four and so that will always give me something pretty much pointing to the right but what if I want randomly to go to the left sometimes so I can say my chicken is ready my tofu whatever tofu tofurkey is ready okay um my if my coast-to-coast that's what I was looking for if X beautiful this is horrible if you've made it hashtag ding-ding-ding-ding me you've made it to the end of this if what was I doing oh yes if random 50% of the time let's have it go the other direction if random one is that less than five let's have let's have X speed x equals negative one so I always picking an angle between negative 45 and 45 degrees in this direction but half the time it might go the other direction well I think I might have fixed everything oh it looks like it's off right it's not look at that so why what's wrong here well let's see if this side is right oh boy I think I have my kite please take a break I can't I will finish this I will finish this so why is that off it was working before let's look at this I wish I didn't have this horrible if statement I hate my horrible if statement okay stop dinging okay let's take this out for a second let's also just make the angle always zero just so I can test this did that mess something up no okay so something is woefully wrong and is it bouncing in the right part here it looks like it's a little bit off right yeah okay so let's see if we can figure this out what did I screw up paddle check paddle right let's check the paddle right okay if Y ok the Y thing is right it's the X if X plus R is greater than the paddles X minus PW divided by 2 that seems right I have an extra speed minus one where we're all right oh look at that oh no wonder that's going to screw stuff up okay I think it's working now is it just me that's visually like I feel like it should get a little closer I know it's working oh it's just because it moves five pixels per frame so it's always it's you know my it's sometimes not going to appear exactly but that's right okay now let's put this back in what is this - let's make sure it's also I would within a certain range okay that's good I was working I had that extra thing there now let's give it some a random angle again a random angle where's where did where did I do have a puck let's take out angle equal zero okay now we're gonna play it here we go Oh so let's see if I can make that bug happen yeah okay that bug is gone it's not getting stuck behind that anymore so everything is actually done except for one big thing the angle that it moves the way that it changes should actually change according to according to where it hit on where it hits on the paddle attention ship Mike okay that's a good way to catch my attention okay what are the timers going to fit like the third time i refresh this in ten minutes am I like 45 minutes into this now hilariously embarrassing okay so I should do this in multiple parts but I'm just not good just consider myself done but I'm not we're going to finish this out I need to something ginger tea here for here ok I gotta leave finish it for an hour you do realize I'm doing this live on livestream with other people watching with like lights on me standing up it's very stressful by wearing like a light-up bow tie now we're just getting ridiculous here with this timer okay alright I walk you over here why did I walk over here so let's think about this we're going to call if you get title of this video should probably be pong in 60 minutes because I think it's going to be a 60 minute video ok here we go now here is the paddle and here is the puck coming as a paddle so what we're saying is if it hits in the center maybe it would reverse its x-direction precisely and not change the angle but if it is closer to this side it would then project further down so we'd be rotating the angle by some amount the further down the paddle it gets is that correct and same thing but what if it hits up here did that cause it to also rotate further because it's just based on the distance to the center or would that actually have it reflect further in which one is it some of you helped me out I don't know how pong actually works like is it always somebody tell me we could pause this video for a minute I'm waiting for the chat thinking we'll wait time yes further in what is it further in what does that need be more specific okay let's stick it let me look in the code to where I need to do this [Music] depending on the movement direction of the paddle middle third is straight on the PAL is like a circle and the angle reflects the angle from the center if it's on the very corner it should go in the opposite direction further at the top all right so if it hits further up angle goes up hits further down angle goes down reduce the angle incoming angle doesn't matter top is reflect up top third ricochets up divided into thirds okay here's the thing I'm trying to avoid actually using the angle because then I'm going to have to get into tangents and all that stuff and I should just use vectors in the first place oh my god Adam Justin or Adam Jay Austin sorry in the chat just posted a just poked does it actually just give you where it hits it gives you a specific angle no matter what its direction is that's perfect how do I google for that there's no angular reflection this makes it so easy Adam Jay Austin how do I Google that image how'd you find it looks puck angle direction okay cut pong paddle angle direction oh this makes it so easy where is there a picture where's that picture it came into the slack Channel can someone just tweet it to me at the coding train pong angle segments thank you pong angle segments okay pong angle thing is there it is oh no that's it was this one okay this is totally manageable look at it so here this is so much easier to deal with because it doesn't actually matter what angle it's coming in it just it just goes at that angle no matter what so what I'm going to do is I'm actually just going to map the angle I don't even need to divide it in segments I can be fancier and have it be continuous so I just need to take it Y value its Y position from zero to the bottom and map it between negative 45 and 45 degrees or negative 135 and 135 okay let's do this okay so where does it hit the paddle over an hour with the correct answer okay okay okay this is where it changes speed but now forget about all this nonsense all I want to know is I want to know the difference between the so the difference between I want to know its Y location - we top the paddles Y location - I really should have a paddle keep track of its top and bottom locations I don't have to keep calculating them all the time but I want to know how far from the top is Y and then I want to have an angle I can use the prospect map function where I take that difference which goes between 0 and P H 0 to the top right it could be all the way at the bottom you all at the top and map that from negative 45 - 45 and then X speed equals 5 times cosine of angle and Y speed equals 5 times sine of angle and then I'm going to do the same thing for the right the difference is I want the range to be between negative 35 135 and 135 what does it say in that I might have to rethink I probably have to rethink these angle values because I've computer graphics window and angles point down and also hello radians people radians radians radians so let's just convert this to rad equals radians of 45 so I want to go from RIT I mean I could do it's PI divided by 4 but I don't feel like I'm sure this is wrong Radian 135 negative rad - rat okay let's just throw caution to the wind here I'm sure it's wrong yeah okay so first of all you can see how I have it it's going in the other direction so this one should actually be 45 stop singing hold on it does it still go this is still ding if I turn my volume off maybe not okay let's try it again how does it look right is that right or is it going oh that kind of looked right is that right I can't be right whoa so I think my aapke so it's clearly wrong so let's think about okay let's think about what these angles actually should be versus that diagram I should never take a diagram literally okay okay so this is the diagram let's just look at the left one okay and I can see what the problem is already oh no that's actually incorrect this is computer graphics because the left one should be between negative 45 and 45 that's actually correct hold on because I was concerned that it's flipped but if you rotate open sine and cosine all right let's make a separate let's make a separate sketch to be sure about this okay we're going to figure this out zero is to the right zero is to the right but do sine and cosine they do the actual math and they don't know about the axis being flipped right or do they I don't need draw right because what I'm saying here is let's do this what I'm doing is I'm saying I have size 400 400 and I want to draw a line from a width divided by two height divided by two images to 200 200 200 200 - 200 + X 200 plus y and I'm going to have an angle equal negative 45 and then I'm going to say X x equals 100 times look heystop what's up short times cosine of that angle and y equals 100 times sine of that angle okay so it's doing exactly what I thought it should do kills a timer doesn't matter anymore okay so this is right Oh sign no no a sign should only do this for the Y I don't okay so so this is right I feel like though that this is so so maybe my positioning is wrong so let's see so if it hits so that's right let me go back to my other sketch this is the last cattle okay I got something wrong here it's the mapping that's probably wrong right so this should be 45 so this should be 135 right I had it right the first time because the difference if it's at the top Y minus the paddle of Y - oh hello it's not it's Y minus the paddle of Y - that right that's the actual top location that's the difference that needs to be in parentheses that was a big mistake right because that's the difference and it's kind of counterintuitive to me but right and this is the same issue okay so now let's get a good here there we go yeah this looks doesn't this look right now oh I feel so happy pong oh wait why did it have a bug what was that bug I don't like that bug oh you know what the bug is I know what the bug is I think the bug it kind of like skips past it because the paddle moves kind of fast and I mean the putt moves kind of fast and this check is a bit of a problem this extra check that I put on to purr so it doesn't get stuck I think what I really want is let's check the as long as it's greater than let's look at the right the right edge so it because sometimes it's going past its it's able to skip past that middle because it's only ten so I can make a wider paddle and then it wouldn't have this problem that's probably what I should just do because I speed is five but I could also be so let's just make a wider paddle let's take a wider paddle yeah we're not going to have this problem anymore I'm terrible with this okay hey I did it it almost took like an hour it's just watching the beginning of this videos can be so sad okay but this is this is pong my left hand which who's going to win left or right oh it did that again oh why does it do that what's that bug I think it's oh I know it's a bug in so actually what I should here's the other thing I should do if I want it to bounce off the right edge it can skip over the right edge and be told to move back but I think I should really probably to be safe I should always place it back to the correct location so I should also say x equals the paddles X plus the paddles with divided by two and here I should just shove it back x minus equals the paddles X minus the paddles with / - I think this is also going to make it feel a little bit more accurate when outwards let's do it there we go okay I stopped so that was a little bit weird I thought that was it getting stuck on it maybe I was still moving the panel is the problem oh boy oh I must have messed it up I made it worse oh oh oh oh oh I forgot about our I forgot about our X equal I wanted to go on the right this my also minus R and I want this to also be plus R this is going to be done I swear this is done if I had done this in JavaScript - totally what it taken me 15 minutes yay pong okay okay okay okay thanks for watching I hope you enjoyed this it only took apparently 61 minutes and I don't know what else I'm going to do but this video is over if you actually watch this whole video then I commend you you're amazing you are you are part of my heart and I will give you an Internet hug and send you on your way goodbye it's treatments making me anxious Hey alright everybody before I go somebody in the chat said the stream is making me anxious [Music] that's not enforced about working let's just take a deep breath everybody okay goodbye see you soon bye [Music]

Channel: The Coding Train

Views: 249,196

Keywords: live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, coding train, the coding train, countdown, countdown coding, coding challenge timer, programming timer, pong, classic video game, pong coding, pong programming, pong video game coding, pong java, pong processing, pong processing(java), Processing, game processing, challenge, programming challenge, processing tutorial, object oriented programming, pong oop, pong object oriented programming

Id: IIrC5Qcb2G4

Length: 68min 18sec (4098 seconds)

Published: Mon Mar 27 2017

Reddit Comments

[u/monkiebars]

I have an issues from a pervious video.

I have the p5 library working correctly and in my index.html file however, when I tried to do the preload for loadSound() it says the function is not found..

Any thoughts? This is the first p5 function I have had not working...