[SOUND]. [MUSIC]. Okay so we've created a slider which allows us to vary the speed of the playback, and you saw that there's immediately some quite pleasing creative effects you can achieve with that. What we want to do now is add another control which is to play and stop the sound, so we can completely switch it off... And switch it back on again. It's a little bit more complicated, you're going to do it with a button. So we'll basically make the top part of the screen into a button which can switch the play back on and off. And then we'll make the bottom part of the screen into the slider that we used earlier. Here's the sketch with the slider. So first of all I'm going to go to trigger this code. If the mouse Y position is greater than the height of 2. Okay so if we're in the bottom half of the screen, we'e in the bottom half of the screen it'll operate the speed slider. Now what I'm also going to do to make it obvious That that's, that's what we're doing there. I'm going to draw a rectangle in the bottom half of the screen, which has the color of the current speed. Let's leave grayscale for now, because I'm not working too much on the graphics in this session. So we'll just do a grayscale color. So you remember, color is in the range 0 to 255 We've got this ratio, which isn't 0 to 2. So, we can just do something like, ratio times, 128. Now approximately, give us, a gray scale based on, on the, the range of the slider. So the rectangle needs to be at position It takes up half of the, the bottom half of the screen. So we go zero zero and height over two, so it starts at the far left of the screen, halfway down, and it goes to the far right of the screen. Therefore the size of it is the width of the screen and the height is the height of the screen over two. So remember that's the x and y position. That's the width of the square, and that's the height. So let's just double check that, that's working before we carry on. Okay, so I've got, cannot find symbol. Let's see if we can debug that. So I'm referring to a variable called ratio. Where did ratio get defined? Well, it's inside the if statement. So that means that ratio, because I've declared it there with float ratio, that that variable is local to the if function. So it's not okay for me to then use it outside the if function. So what I can do is take it out like that and, so now I'm declaring it above the if statement, and I am then using it outside the if statement that's fine. Okay, so now I have a problem here, where I've forgotten to put a t there. Okay, See that, see that it's highlighting the line that has the problem. It's quite communicative about the, the errors in your code. [MUSIC] SSS Okay. So now you can see the slide is now displaying a color, which represents the speed. So I now need to quickly add a bottom and top of the screen, which deals with, which deals with the stopping and starting. First of all, I am going to draw the button. So I will do, and I'll choose whether to draw it red or green, based on the state of a boolean. So we create a boolean called buttonOn, and we start off with buttonOn equals false. So the button starts off being off. Now if button on, so we'll represent my button as having a state of being on or off. It's just a switch so I use a Boolean which can be a true or a false. and Boolean's are used quite extensively in controlling the state of programs. Way things can either be on or off. So it the button is on, I'll set the fill color to. Red. Otherwise, I'll set it to. Green. Can you guess? Okay. So, then I draw my rectangle. this one starts at 0. This one starts at 0,0 and goes to, and the size is the same size as the other one so it's width, height over 2. Okay, then I need to manage it. If they press mouse, if the mouse is pressed, I need to now update this data that button. So I need to check where it is if Mouse Y is less than the height over 2. In other words if they're in the top half of the screen, which is where about I'm going to be, then I set, I toggle value to bottom button on equals. And this is how to toggle a Boolean [SOUND], I'll use this operator here, the exclamation mark. That'll switch button on to whatever the opposite state is. So if it's true it'll switch it to false. If it's false it'll switch it to true. And then, I'm going to change the state of the player. So if the button is on I want the player to play. Remove that line. Otherwise, I want the player to stop. Okay, let's just clean that up a bit. Remember, you can always do the Also format. Ctrl+T, Apple+T, depending on what you're using. Okay? So, basically, if they are in the region of the button, which is the top half of the screen, then we switch the state of the button, and then we look at what the current state of the button is now, and update the player to either stop or, or play, based on that. And then we draw the button with either red or green depending on the states in the draw function. So let's roll that. Okay, I can't spell button. It's bu. So again it highlighted the line a little examination of that line showed that I mistyped the name of the variable. [MUSIC] There's my button, switching it on and off. [MUSIC] So even a DJ could operate this interface. [MUSIC] [MUSIC] I'm not a DJ, as you can tell. There you go. So there's a simple interface which allows you to control the speed and the playback state of an audio player. [MUSIC] [MUSIC]
