 Hi everyone, it's Elise. We're going to be going through a short tutorial on how I would go about making a rhythm game such as guitar hero in processing. And this video might be a bit long but I'm going to go through every step and hopefully explain everything as best as possible in order for you guys to understand compound data a bit more. And this will rely on knowledge such from before with functions and loops so if you understand that stuff then probably go back and do that first so you can get the most out of this video. Okay so I'm just gonna start with setup and draw and the first thing I want my scene so obviously let's set a screen size first so it's gonna be quite tall and skinny so I'm gonna say 250 600. Alright the first thing I want in my scene is the strings so it's kind of like the paths that the beat is going to travel along if you know the rhythm games then you'd be familiar with this but if not then sit tight and you'll see. So I'm going to determine the positions of those I'm actually like predetermining them and I'm gonna put them in an array so it's just gonna be an integer array so interay I'm gonna call that strings maybe like string X so it's going to store the X position of where along this window I'm gonna position each string and I'm going to have an array that contains the values 50 100 150 and 200 now the reason I'm putting it in an array instead of initializing them and set up with like a loop or something is that maybe I want to change these after and have the outside ones bit closer together but so I might at the moment they evenly spaced out here splitting the whole thing into fifths but in one case maybe I wanted to bunch them all up over here in that case I could just change the values of this to equal something else like 70 but for now it's a good start so what this means is that we now have this array that is split up into four blocks the first one's gonna have 50 in it the next one's going to have 100 and so on and these will have indexes of 0 1 2 3 etc so we'll come back to that just keep that in mind okay let's give it a background color as well so it's start off with a black background and I'm gonna copy and paste that and put that at the start of the draw as well now to draw the strings let's create a loop that's gonna loop through our X values of the strings and just right lines that position so start off with our basic loop in I equals 0 remember you can use any name here but I is just standard I is less than string X dot length so we're taking what is the length of this array at the moment is one two three four but we don't want to ever reach four because the highest index is three so that's why we have less than or not less than or equal to and then we have I plus plus because we want to go through every one of the time and for those of you who are struggling with iterating through an entire array I would really recommend just memorize this formula for now and then spend time understanding it later basically we want to start at zero starting at the very first index we want to keep going till we reach the end of it and then we want to go through one at a time okay so we're gonna write line what's the X value we want well we actually have an array very handy array that contains our X values for us so string X I so the first time it's going to be zero then one then two then three and it's going to go through all the values the Y value will be zero because I want to start at the top of the screen the next X value of the second part of the line is identical to this sorry I'm out of breath I've been talking too fast what a workout and then the last part of the line is height because I want that line to go from the top to the bottom and I actually need to give this a white color because it's on a black background or we won't be able to see it two five six and I cannot see it two five five there we go my bad okay so now we can see our lines actually let's make the lines a little bit thicker so in here I'm going to say stroke stroke weight three just to make sure they're a little bit a little bit easier to see okay cool so we definitely got our lines now and they are positioned according to these positions in the array so I can actually just change this one so if I wanted this one to be 70 instead this one moves over and we might use that a bit later just to change it up a bit but let me keep that at 50 for now okay so what do I want to do next let's put some buttons in so for the buttons I'm also going to have an array I'm going to say button oh sorry it's going to be a boolean array that's because we want to store just true or false values that are going to store if the button is being pressed or not if the button is down or not so boolean array called buttons I feel like buttons is fine maybe like I'm not sure to do plural or not because if I say like button one then you'll know it's the second index but if I say buttons at index one also not I but you know what I mean um then I think I think buttons is the right terminology here but you guys can do whatever you feel is best so let's make that equal an array of all false values okay um and again I could have a loop inside setup that just initializes this for me but because I know all the values and there's only four of them I just feel like it's easier for you guys to see here at the moment okay um and what I want to do is I want to draw all the buttons as well and I'm going to have them centered at each of these points so not something I would usually do or encourage really but I'm going to say rect mode center just to make the coding a bit faster so what rect mode center does I'm pretty sure you've used it a bit earlier but you can instead of drawing the rectangle from its usual spot 00 here you actually end up drawing the rectangle um from the middle where 00 is the center and what that's going to allow me to do is that if my string position is 50 here then it's going to be exactly at 50 so let's do that um so I will have a full loop that's going to go through all the buttons although again it's going to be the exposition of the strings because I'm going to have one button per string so that's why I'm going to iterate through um the string again and the reason I'm not doing it in the same loop is because I might like ordering of positions in the screen I might want to have our beats go above the line but below the button so I might have like you know code for the beats in here then after I want to draw the buttons that's the reason I'm doing it in a separate loop okay so for int i equals zero string I guess I'll just guess I'll do buttons buttons um I'm sorry i is less than buttons dot length now string x and buttons dot length through exactly the same length which is convenient and you'll see why I'm going to do some shortcuts um i plus plus and in here I want to say I want to draw a rectangle um at position so remember with rect mode center with a position that zero zero is in the center of the rectangle so I'm going to say position string x i so we're taking the index of this one to determine the x position um the y position oh let's let's create an integer for that so int button y buttons y equals uh let's let's let's make that one like four fifths of the screen so buttons y equals high times four over five um then we can use that in here buttons y um and then how wide do I want it how tall let's do 40 40 for now just to test it out um yeah so the reason that I can use strings x here with the index i even though i'm using buttons dot length to loop through is because I know for a fact they exactly the same now if they weren't exactly the same you're going to get an out of an index out of bounds error um if string x is smaller than buttons so be careful when you use this kind of tactic I'm only doing this because I know that string x and button x are exactly the same length um or the buttons arrays I know these are the same length okay so let's test that out and see if we can see rectangles perfect I can see rectangles um I want to be able to press some buttons to see them move so let's let's add in some input so we're going to need void mouse so not mouse key pressed could help if I could spell key right void key pressed I think that's supposed to be lowercase it is okay void key pressed and I'm going to need a void key released because not only do I want to check if my key is being pressed down but I also need to check when it's being released so the button knows when it's no longer being pressed down so I'm probably going to do something like if key now key is a keyword means the last key that's been pressed on the keyboard so if the last key that I've pressed is equivalent to the character q what I want what do I want to happen I want I want buttons false on that index if this is q this is w this is e this is r on your keyboard um then if that one's pressed I want buttons at index zero to now equal true um and we need something to see if you know how do we know if this has worked or not let's let's just change the color of our button so for that button um if buttons I I could say is equivalent to true but this will evaluate to true or false anyway because it's either true or false so if it's being pressed I want to fill up the color with black okay oh it's filling up all of them because I didn't set another color else let's fill with white okay cool so I can press down q and it's now going to change color now we're going to need a released so if the key that was released is q then we want the button to now equal false and that way we can get something where we can click like this or hold it down cool let's do that for all the buttons I'm just going to copy and paste this so for the next one we want it to be one and w not two w next one we want it to be the letter e and the second one so q w e r and the last one we want it to be r with the third and final index and I'm just going to copy and paste this again and change all of these to now equal false so now if we test it out we should get buttons we're able to press hey that's pretty satisfying probably hear my clicky keyboard in the background um and again because we're drawing this at string x if we decided that we wanted to change this to now 20 you know one of those strings will move over so this is quite like um flexible if we wanted to change anything so this is a good start all righty what is next um I suppose we should start drawing some b oh I should should make a note before we get on to the next thing that this actually won't work for capital letters because only checking is the lowercase q being pressed so if we did want to make it capital as well we have to say key is equivalent to capital q as well using the or but just for now save time um I'm just going to do lowercase okay so let's create some dots to be our beat so this time instead of using an integer to represent like the x and the y I'm actually going to create a p vector p vector is another type of compound data that just contains if I just move this over here p vectors just have two values in it an x and a y this is the x and this is a y and that's quite convenient to us because if we can store some coordinates like this style say 10 20 then when I want to draw something if I want to say I want to draw my p vector I can just use p vector dot x p dot p vector dot y and it will give me that exact position um obviously not with that exact wording but it will be helpful for what we need so that's why I will be using it okay so p vector array let me catch my breath again obviously not exercised since the start of quarantine p vector array dots is going to equal a new p vector array of how many um actually don't know how many dots we need so I'm going to say 20 for now and this can always be changed in fact I might want some kind of um you know thing to count how big this is so I can say num dots int num dots how many dots do I have let's make that 20 I'm just throwing in another variable for the sake of it I think but you get the idea okay so basically what this gives us well that's over yes what this gives us is a an array of 20 so I'm just going to say dot dot dot zero oops one two where at each of these spots we have the ability to hold an x and a y value so it's kind of like we got an array within an array compound data within compound data so we're saying that one of these dots at index say index one this one here we can say um get that x or get that y and I'll give us one of these okay um so first let's give them a position um actually we can what should we do first yeah let's do that okay so um we have to go through we have to loop through and basically give each of these dots an x and a y position so for int i equals zero i is less than and I could say num dots here num dots or I could use dots dot length that pretty much the same thing here um i plus plus and the reason I have to do it in setup is because I'm going to be using it and draw and I don't want to initialize it every single time so it's just a good idea to do it up here um and at uh sorry then we have to say um so this is our array dots um dots i so at the index that I'm up to in this p vector so the first one I want you to make this a new p vector capital p um that has the x value oh let's just say 10 y value of 20 I don't know what they're going to be but what this means is that every single dot now again bringing up OBS um every single dot now will have the exact same value of 10 20 10 20 something like that right um obviously this is not what I want to do I'm just using that as stand in values so what do we want to do um let's have a think about that because what's going to happen is we have our strings um that's not a straight we have our buttons down here and then we've got dots that are going to travel down the screen down this way but if this is the top of the screen we can't really keep spawning them um so instead I'm going to make the illusion of spawning them and actually just randomly generate them above the screen where you can't see and so as they travel down it's going to look like they're appearing out of nowhere but really we have all our dots stored up at the top above our screen so to do that um we'll leave the x position for now but the y one we're going to say it's going to be some random value um between zero and or maybe not zero let's make it some random value between negative 400 like 400 pixels up um and uh negative 20 so so it's just going to be somewhere above okay um and for the x position yeah we'll come back to that okay so uh now that we have our dots starting somewhere let's create the code for moving them down the screen so remember before we have the code for the strings then we have the code for the buttons and I want the dots to be between that because of the order that processing draw things I want them to be above the strings but below the buttons so let's iterate through all the dots for int i equals zero i is less than dots dot length i plus plus you guys should be used to this format by now all these things are exactly the same this is getting us from the start of the array to the end of the array one at a time so again if you're struggling with the idea of iterating through an array I'd recommend just memorizing this and then understanding it later okay so we want to draw a circle um I will say a lips a lips at the position um it's a p vector so dots at index i dot x dots at index i dot y um and then what's the size of this dot uh probably 30 30 I don't know if this is going to be good or not we can always change it and then we want to make it move down the screen so I can see it and for that I'm going to make a speed variable so int let's make it a float float speed equals let's make it an int I don't really have any reason to make it a float or an int um I'm just trying to keep it consistent so int um speed equals two two is good okay um and then this is where I'm drawing my dots after I've drawn the circle I want to move it down the screen so we're going to get dots i so the same one we're accessing dot y um plus equals speed and it's just going to move down so let's let's play this so remember what we've done what we have made some dots we have given them positions so they're all going to be a 10 x um just to start with and they're randomly going to appear above the screen this is a screen they're appearing above so we won't see them and then we're drawing them and making them travel down so let's watch that in action hope it works which it does okay that's cool so they're all a bit bunched up together but that's okay um and they're all at the 10 so let's fix that x now so I'm going to do some sneaky maths we're going to create just just so I can space it out and you guys can see we're creating a new variable that's going to determine which of these it's going to pick so we're going to have like a random generator that's going to pick one of these values so let's make it int brand index it's a random index and it's going to equal um random somewhere between zero and the length of this so let's say um string x dot length in fact just to make it easier for you guys the length of this is four so I'm just going to put four and we'll go through why this works in a minute so what does random four give us so um if you put in random four it's going to give you any number and that includes floats as well so it's going to be decimals between zero and three point nine nine nine nine etc forever um and then because this is an integer and this will give us a float I will use a function floor now you can also cast integer but because floor is inbuilt um it's just going to make it easier for me to use um or just easier to explain floor basically turns and a float into an integer so if it's three point nine nine nine something is just going to cut off that decimal part and make it equal three so in the end what this is going to give us is zero one two or three at a random point so we don't know what it's going to be but it's basically just going to randomize pick one of these okay so now we've got random index let's say the x value for our dot um is going to be a string x at a random index cool so now if we press play we should be able to see the dots falling along the strings which is awesome that's what we wanted and we can space them out a bit more by saying negative six hundred and they're going to appear a bit more spaced out we can add more dots because we've got num dots here let's make it 50 yep definitely more dots there um let's set that back and it might be nice just to add a color to them to be honest so when it gets to drawing the dots here let's add a color so fill let's make it like a pink or something color selector yeah that'll do so let's just copy that hey there we go we could also um space them out a bit more so if we wanted to have them evenly spaced we could do something like this where we have um where we're initializing it instead of having random between negative six hundred and twenty we could use our trick before where we use floor and pick a random integer so i'd have floor a random number between um one and let's say 40 and then multiply that by negative 40 um so or maybe maybe negative 40 is too much negative 20 let's say and then that way oh that's not right let's make it negative 60 and that way they should appear evenly spaced out uh it's a bit not obvious enough there 30 this is why it's good to have variables to see the numbers 40 let's make it um 30 here okay so you get the more like inline like this and it looks more like a rhythm game but obviously if you're just following this tutorial using random is just fine to determine where it's going to start okay um now what should we do we should have a way to reset the dots when they hit the bottom of the screen because at the moment when they hit the bottom they don't reset that's it that's the end of the game so we want to have a way to put them back at the top um so for that every time we draw a dot we increase it by speed and if dot i dot y so if the y value of that particular dot is more than the height of the screen um and i do want to say height plus you know a bit a bit more because um i don't i don't want it like cutting off when we got just half the circle in the screen and because these are 30 in in uh diameter i'm just going to say plus 15 to make sure it's completely off the screen so if if it's completely off the screen i want to reset the dot um and to reset the dot let's create a function that resets the dot we can either do that or we can just say dots i dot y equals actually which might be easier dots i dot y equals uh or minus equals they're all like negative um let's make it divisible by 40 so that it looks all even and the screen actually i would like a reset dot function because i do have to i want to randomize the x so it gives us some variety so reset dot um and let's create a function that does that so um what's this uh what's this function going to return us nothing so we can put void all it's going to do is move the dot back up to the top for us void reset dot um and i want to make this it takes in a dot so it needs to take in an i um what i'm just going to say int index because dots is accessible from everywhere so as long as it has that index it's knows which dot you're talking about that you want to reset um and we want to take that y value also both the x and the y so let's say dots um i equals and then we're just going to give it this again that actually might be the easiest thing so we're just it's just like resetting it like new it's exactly the same thing as it started with um and i think that's a that's a good thing maybe instead of resetting all the way back up to 30 times 40 um maybe we just do 10 space it out or five um and this is now called index it doesn't know what that is and random index it doesn't know what it is because we used it up here so i'm just going to copy and copy and paste this random floor code is it happy now no um can't do floor it doesn't know what it's doing okay instead or what have i done wrong oh it needs to know which string x to go into yeah so we give it a floor of a random five okay that's fine can't invoke floor float on primitive type n so think that something else is an integer okay the x equals um some random value here the string x array dots at index y is going to equal um something that's at the top so i'm just going to say minus equals our our height of our program is 600 maybe let's make it like minus 640 or something keep a consistent minus equals 640 um and then our reset dot needs an i so let's just give it the i because it's asking which dot are you talking about and i'm saying this one here so if it's more than the height then we reset the dot okay let's just watch and see if this worked out the beauty of uh not editing the video is that you create is you're saving a lot of time and you get to see my mistakes so maybe you guys can learn with me okay so it appears that we have a continuous stream of dots now which is very cool um i'm very pleased with this and our buttons still work you let's just make him work now so um i have to think about what is the best way to make sure the buttons work hmm or we could make a function to test if something's been hit so um if you think about like game development or even games in general if you hit something you hit something called the hitbox so we're going to kind of create this illusion of a hitbox using ifs saying if it's more than this value and less than this value then it's been hit so um set up draw let's have the buttons um um when you guys are doing this at home obviously feel free to try and optimize what i do but i'm going to do a horribly inefficient way but a way that works just so i can get through this video um so what we're going to do is when we are maybe maybe the end when we want to update at some point um not we're going to do it inside draw so here's draw we're going to have a nested loop to check if a button is hitting a dot so we're going to have for int i um equals zero i is less than um dots length so it's going to basically first loop is going to go through all the dots then the second loop is going to go through all the buttons for int j equals zero we have to do j because it already knows what i is and we can't use it again if uh j we're going to keep going while j is less than um buttons um dot length and then we're going to say j plus plus okay and inside this loop we want to check if um if the dots have hit so what does that mean um or let's check if the button's down or not so if um button button's j so if the if the button we're looking at is true so we can just have that and um we want to check the dot is in that column so um dot oh sorry string x j so if the button we're up to position the x position of that button is equivalent to the dots x position that's the next thing to check and um the y position of that dot is within reach so um dot i think this is sorry it's supposed to be dots dots i dot y plus sorry um not plus is more than the button y um i think that was our yep buttons y and the y position is more than the buttons of the y minus the width of the buttons give or take some so let's just say 30 for now um um and let's make it also have to be let uh less than the end of the button so it has to be between sorry if this is our button here it's a very crude drawing of a button um and the dot is here it's not going to get hit if it's here it will get hit if it's here it will get hit and if it's here it will not get here it will count as a miss that's what we're doing here so we got this is why we have all these ifs to check so we're saying um if the i position sorry if the dot we're up to dots i y position is has to be less than the buttons y position plus give or take 30 so plus the half of the width of the rectangle plus a little bit to make it look easy okay so if it satisfies all these conditions then the dots being hit dot is hit and what do we want to happen we want to reset that and luckily we have a void reset dot i'm sorry a function called reset dot so reset dot um and we want to give it dot i that's what we're up to reset dot i okay let's give this ago uh we got missing a bracket somewhere there you go um we are using something it doesn't like oh sorry it doesn't like that we're trying to add 30 to an array um we are trying to say buttons y buttons y is that integer and we can add 30 to an integer okay let's try that again okay so here come the dots i can press things and let's just check do they disappear if we hit yes we do so let's only hit this one here the the e key and everything else should stay and only the e column will disappear in fact we can just hold down everything and they all disappear right or if we let them go a little bit further we still count as a hit so that's really cool that we got that um and if you're trying to improve this at home you can either make a more efficient way of doing the loop um or maybe make it you can't hold down everything at all you have to press them one by one or maybe they could change color if you miss them or maybe if you hit them it says good work you got it the last thing i do just as a small bonus is maybe let's add a score so int score and it starts at zero and every single frame when we draw the background let's also print out the score to the console just to see how we're doing and if we if we have to reset the dot because it's gone past the the whole screen we've missed it so score minus equals 50 we lost 50 points that we missed the dot but if we hit the dot dot is hit let's say um score plus equals 100 okay um and now we're seeing our score down here it says zero we hit one it goes up to 100 you hit a couple our score goes up we're really good and we keep missing some the score goes down um and that's the end of the tutorial so let's talk about some things that we could add to make this better um you could have different colors you can add music music requires an import and it's a bit outside the scope of this course i'm not going to worry about that um you could add letters to the keys so you can see qwer again text a bit outside the scope of the course not going to worry about teaching it but i would encourage you to explore it on your own um for those of you a bit more advanced um doing some preparation for comp 1010 you can look into turning these into objects instead of having a raise for all the dots but for the scope of the comp 1000s course ignore that um you could have it say words of encouragement or flash if you do something great or maybe when you hit a high score it tells you you're fantastic you can have the score displayed on the screen um yeah there's lots of things you can add here and i really encourage you if you are following along with this try and make it better try and make it unique and your own um and i really hope you guys enjoyed this because i enjoyed making it so thanks