 So far in our digital scale model of the solar system We've created two views a view where we can show the relative sizes of the planets and a view where we can show the relative Distances of the planets we've kind of got two modes And if we keep creating modes our application is going to get a little bit hard to navigate and code So in this tutorial we're going to clean things up a little bit by using what's called a state machine It might seem a little bit complicated at first But trust me if you get familiar with this it's a really robust and strong way to build your applications And if you're a teacher educator or homeschooling parent out there searching for some solar system printable worksheets Then go check the description for a link to some resources that you can use with your group of learners Let's go stateify our planetary application in just a sec Hello world, it's the surfing scratchy here teacher server programmer and on this channel I help curious learners just like you along on your learning journeys This video is part of a series on building a solar system digital model in scratch Go check the card in the top right hand corner right now for previous videos and a link to the starter project down in the description Okay, so what's this tutorial all about state machine seems a little bit funky. Well, we've got a little application here Where we've got some planets in a line that are scaled relative to each other We've also got down here in a previous video where we created Google map to visualize the distances between the objects Now if you look at this, it's looking a little bit messy And what would be really nice is to have this turned off so we can look at the scaled version and then have it turned on But then organize all of our planets down here and the way I'd like to share with you How I'm going to do that is called a state machine because the car in the top right hand corner That will give you an explanation of the state machine I'm not going to go over it in depth in this video because we need to power through it The benefit of using a state machine is that it organizes your web applications Not only that it makes them a little bit more robust and bug-free eventually having said that I haven't actually coded this project just yet. So I'm expecting a few little kinks along the way That's going to be a great opportunity to record a debugging video. As always I make some comments of what I'm going to try and do first and then we'll execute them So we're going to be using a state machine to clean it up I'm going to be making a state variable and variables of different states These will be our states and then we need some events to respond to them So let's dive in and execute some of our instructions I'm going to do most of the work in the stage bright for this one So first thing we're going to do is create a new variable and we're going to call this state Nice and simple now that we've got a state variable selected. I'm going to create two different states We're going to have a distance state for the Google Maps and we're going to have a scaled state And I'm going to name it like this I'm going to have a state and underscore just so we know what's going on there We go and I'm just going to set some values So I'm going to call this state distance as a text value I'll duplicate that and just call it scaled Then I will just attach it to our initiation here of when the green flag is clicked Then I'm going to create a my block custom block here We're going to call it set state Actually, I might call it set state two We'll put a colon there We'll add an input and this will be the state that we're setting it to Okay, let's drag it down the bottom here and give ourselves some space And all this is going to do is grab another set block We're going to get that state variable that we created And we're going to set it to state Fairly simple, right? And I'm going to grab an event and we're going to broadcast a message Now the idea with this is I'm going to send one message and each of our sprites here are going to receive this event And it will read whatever state we've set it to And that's how we can change the behavior of each individual sprite So we need to create a new event name And you want to name it something that reflects what it actually does So it might be something like app state changed State has changed whatever it is But you just basically want all the sprites to know that state has changed So let's just leave it at that The last thing we want to do here is just call our my block When we initiate our application So we can initiate application and set an immediate state And the state I'd like to set it to is scaled And now to test that this is actually working I'm going to go down here to mercury Jump into the events When I receive state has changed And I like to test what's going on And I'm going to say in mercury the state is state And the reason I'm saying in mercury is because that's the sprite I'm working in So I'm actually just testing this out I'm going to click the green flag And what I expect is to see a little say block here Saying in mercury the state is So let's check it out And there we are Mercury is telling us that we're in the scaled state And we can see that up here with the variables on the screen The state is scaled And there is the scaled state Now it doesn't look like we've done much at the moment But this is quite powerful And now what we can do that is we can set a relative size of mercury Depending on the state that it's in So when we're in the scaled state we want mercury to be this tiny little dot But when we're in the distance state We want to blow it up a little bit bigger Because we want mercury to be a button that we can press along here You can see that it already is a button If I click it now We've got the selected planet as mercury So what I reckon we should do is Instead of setting our size when the green flag is clicked We're just going to set our size after the state has changed Because remember in our stage we immediately set the state So this is basically the initialization Then in our set size block We can put an if then else statement And we can say that if the state is equal to scaled Then we can set the size to what we currently have But if it's not scaled Well we don't want to set the size to that anymore That's too small We don't want it relative Let's just go Let's go 10 times I think we're getting there We'll go 20 times Cool Let's just see how we go with that for now You can also see that I've moved the planet down here So we actually want to reset the x and y positions So we're just going to go simply to this current x and y Then what I'll do And I'm just going to set mercury back to that tiny little dot So we can put it back in our sequence here And then if the state is equal to scaled We'll go to that x and y position And that's our code And we can apply this to every other sprite And before we copy it across to other sprites I suggest that we make this scaled value a constant Because 20 might be too small or too big And I don't have to go into all these sprites And change that manually So that's going to be best living in a variable Let's create a variable It's going to be a constant So I'm going to make it all caps Because it's not going to change And I'm going to call it default planet size And I'm going to stick default planet size in here Back in the stage I'm just going to set that constant to 20 Because that's what it was when we were inside mercury Awesome Now we need to test this out And to test it out We're going to jump back over to the stage sprite And switch between the states And to change between our states We're going to use some keyboard user input We'll use the numbers We're going to use the numbers 1 and 2 So we're going to use the presses 1 on the keyboard Let's set the state to the scaled state And when the user presses the number 2 on the keyboard Let's set the state to distance I'm going to click the green flag Now I've pressed 1 on the keyboard And now I'm going to press 2 And I expect mercury to jump down here And blow up in size And look, there it does I'm going to press number 1 now And boom, it's gone back to the spot where we want it to be Later down the track We're going to be adding some more states So we can continue to use our number system here And we can also leave some on-screen feedback To let the user know which state we're currently in Okay, I'm back over here in the mercury sprite And we've reached that pain point of Where having these individual sprites Is a little bit annoying Over using clone Because we're going to have to copy this code Across to the other sprites Let's just test it out with venus first Because we don't want to dump it all On the other sprites and figure out That something's wrong So we know that every sprite Is just going to need this one The house state change and set size So I'm going to drag that on top of venus And then I'm going to grab the if block Of the set size and drag that onto venus Then I'm going to jump inside the venus sprite And I'm just going to delete the when the green flag is clicked Because we don't need that anymore And in the set size I'm just going to replace it with that code block Now the thing that we have to be mindful of here Is I'll still have mercury selected So I just need to change that back to venus And the other thing I want to do here Is just set the x and y of venus In this particular state So we're currently in the scaled state And we want to go to this x and y Let's click the green flag I'm going to press number two And you can see that venus has jumped over the top of mercury But I can actually just move it across there Like that And then we can switch out the x and y's I'm going to go back to number one now Pressing one on the keyboard And boom, it's jumped back into line And this looks like it's working I'm going to go through and repeat that For all the sprites now Because that looks good I'm going to save you time and just magic it And just before I do that I'm going to create another constant here For the default planet size Because I'm not sure if this y position Is going to be the one that we want Because if we adjust the default planet size Then we may want to change and tweak the y values We want to make them all consistent So they look like they're in a nice straight line So I'm just going to create a new constant I'm going to call it default planet y And then I'm going to set the default planet y To negative 145 And I just got that value from one of the sprites I'm going to jump back over to mercury now And I'll drag that into the y position And I'll do the same for venus So now if I want to tweak that value I just need to do it in one place As opposed to doing it nine times for each of these planets Okay, so I've just gone ahead and magic that And I'm going to press two on the keyboard now And watch our state change to distance And I've got all the planets here lined up beautifully And then we will press number one on the keyboard And they're back to their scaled state Some things to consider Just make sure when you drag that when I receive block And the if block across You change the variable You bring out and you go to x and y And you increment the x value I know that got me a couple of times As I was creating this And the last thing that we're going to do in this video Is when we're in this distance state We want to show the distance sprite Because it's currently hidden So let's jump over to that sprite We'll drag out that block That says when I receive Not selected planet has changed But the state has changed Grab out an if then else block Find that comparison operator again And you guessed it When the state is equal to distance We're just going to keep things nice and simple We're just going to show it And you can hide it You can create animations here But I'm not going to do that in this video With any luck this should work So I'm going to press one on the keyboard And we're back to our scaled state I'm going to press two And there you have it There's our planet distance sprite showing Now if I click on any of these sprites We should transition to Pluto And you can see everything is updated As it should be I might just move these variables across Because we don't necessarily need them at the moment And now I can click on all these planets I can... I noticed that Mercury is a little bit tricky to Click sometimes But there we go There's Venus There's Earth And there's Pluto Now if I press one on the keyboard It's hidden and we're back to our scaled state And there you have it That's how you can create a state machine To control the view of your application The real great benefit about adding this Is now that we've got the underlying architecture there We can go across later and create other states Because we're going to be creating an orbit mode Where our planets are orbiting And we're also going to be creating a gravity mode What it would be like if you're on this planet Simulating some gravity So we'll address those in future videos And we're going to use this state machine To create those states So we can get the planets where we want them Even if you didn't follow along with me This is going to be really powerful to use In your own projects when you build them out And for those of you with the real keen eye out there You will notice that we've sort of got two states happening We've got an application state And we've also got like this selected planet state When we click on the different planets You can see that we're changing the state of the selected planet And that's the cool thing about the state machine as well You can have multiple states But hey, this can also become a little bit unwieldy So with great power Comes great responsibility All right, that's it for this video I'll catch you in the next one