Here is a direct link to Snap!

To play with Snap! you can just click on the play button on some of the images, like the one above. If you have any problems with it loading, visit Snap! directly in a new browser tab (On that page, click "Run Snap! now"). Another possible solution, if your browser is not Chrome, is to give Chrome a try.

Brainstorming Exercise: Cars and a Traffic Light

Let's imagine we want simulate a simple racing track ring like the one above, with one traffic light and some number of identical cars driving around it. The cars can speed up or slow down, or fully stop. But these cars never pass each other. The order of cars on the track will always stay the same, for simplicity. We like to experiment with the effects of one car moving too fast, or too slow, and so on.

How do we model and program such a simulation?

Before reading any further, try to think how you can do this exercise!

Guess what! You already know enough about programming in Snap! to get going with this! Let us walk through the thinking process...

Sprites

First, think of the kinds of sprites (also known as objects in programming) you would need.

Right, we'll make a Car sprite and clone it for all the cars that will be on the track. Then, we can make a Traffic Light to do the traffic control.

But the cars need a way to know their own position and speed, as well as those of the surrounding cars (for simplicity, say only the car in front). Which sprite can give us that knowledge?

As part of the Stage script, as we are creating new clones of the We can also add a variable for each one which tells them which is the car in front of them. That way, they can look up the position of that car.

States

Next, let's think of the traffic light. What does it do? It should be turning red, green, and yellow, in a loop, with some determined time interval between each signal. How can we represent which light the traffic light is currently showing?

Yes, we already know what we use in programming to store information: variables!

So for the traffic light we can make a signal variable that can have a value of green, yellow, or red. In Snap! you could assign three different costumes for your traffic light, one for each signal.

But sometimes we may need to store more than one data related to an object, and so we will create multiple variables for it. The set of current values for all of the variables for each object, or sprite, is called its state.

So we need to think of what variables we are going to need to represent the state of the Car as well as the Stage.

Car objects probably need to have as part of their state variables to represent their current position, speed, and acceleration. It can use those the calculate what its position should be in each next second.

The Stage script will probably have big responsibilities! It needs to know for each car, which car is the one in front of it, so it can report to it their positions and speeds. It also needs to compute the distance between cars, based on their current position on the X and Y coordinates.

Messages

It is not much use for objects to have state, if they cannot communicate with one another about their state, that is, their current value for each of their variables. As we have already seen in Snap!, we can use message broadcasts to send and receive information.

So now think of the kinds of messages our objects need to be sending around and receiving.

For example, the traffic light can broadcast its state changes to the world: green, yellow, etc.

Simulating Time Ticking

So far so good, but what makes our whole simulation to tick? That is, we have't yet simulated the time passing! Everything is frozen at some moment the way we have things. So we can have the Stage itself to send a tick message every second, so that the cars and the traffic lights can listen to it and know to move their states appropriately. Remember you can use the control tile to keep looping over some program!

In the next class, we will implement this simulation together.

Implementation Exercise: ATM

Before moving on to implementing the traffic light simulation, which is a big project, let us do a simpler task. We want to make a simple ATM, where you can do one of the following:

• Ask for current Balance
• Deposit some amount
• Withdraw some amount

First draw something that looks like an ATM. You can add three button sprites which we can click to perform each of the 3 actions above.

Now let us implement it... But how?

You guessed it! We'll need to make a variable to store what is the current balance of the account. Use the tile to let the user type in an amount value. Once they enter the amount, you can access the value they entered using the pre-existing variable .

Question: what could happen with withdraw if we are not careful? That's right! Someone might get naughty and try to get more money from the ATM than the balance amount! Make sure you have the code in a way so that ATM doesn't give any money if more than the balance is requested.

Home Exercise: Implement Inserting Card and Entering PIN

The ATM is no good if anybody can come along and withdraw money from your account! Implement a simple way to insert your card into the ATM and enter the PIN, before you can use the balance, deposit, or withdraw buttons.

Hint: Use a variable called logged-in which starts as false, but is set to true once you drag a Card sprite on top of the ATM sprite, and click on the ATM which prompts you to enter a PIN. Only if the entered PIN matches the value of a correct-pin variable, then set the logged-in variable to true. The three buttons for balance, deposit, or withdraw should only do their actions if this variable is set to true.