Project: Run, Scratch Cat, Run!

Hello! Hope you have had some fun with last week's project, also our very first project to have user interaction via the microphone. You may also have read the tutorial on programming falling objects. This week, we will explore interaction with the keyboard. We will see how to program a character to run and jump. The final program is below. Use the left and right arrow keys to control Scratch Cat. Hitting the spacebar will make it jump.

Download the project
Learn more about this project

Once you have downloaded the project file you will notice that the script is short! There are really just two main behaviours we want to program and they are: Running and Jumping. Let's begin:

Step 1: Program Scratch Cat to run left and right

Let's start with a new program. We have the default Scratch Cat and a blank Stage. We paint a black strip on Stage with the Paint Editor. That's our floor.

Click the Scratch Cat sprite and put in these blocks of code:

Code to move Scratch Cat left and right with the arrow keys

The go to x.. and y.. block merely places Scratch Cat at coordinates (0, -80) at the very start. The more interesting bits lie in the forever loop block. What it says is "forever (or always) look out for the left and right arrow key presses". If the right arrow key is pressed, then "make Scratch Cat face right and move it Cat 10 steps forward". Similarly, if the left arrow key is pressed, then Scratch Cat should face left and move 10 steps to the left.

Run the script now and you should be able to move the cat left and right with the arrow keys, as if it is skating. That is not what we want. We want it to look like it is running. We will fix this later after we have programmed it to jump.

Currently, notice that Scratch Cat stops as soon as it reaches the left or right edge of the stage. We will add in a script to "roll up" the screen such that when Scratch cat reaches the right edge it continues to the left edge and vice versa:

Makes sure that Scratch Cats "rolls over" from edge to edge

Run the script, move Scratch Cat to an edge and watch the difference.

Now, on to the next step:

Step 2: Program Scratch Cat to Jump

Jumping essentially involves falling. Think about it. As soon as our feet leave the ground, we are already acted upon by gravity. The reason we are able to leave the ground is because the force we muster in our jump is greater than that of gravity. Nevertheless, due to gravity, our velocity decreases all the time as soon as we jump. Here is how we will translate this in Scratch: We add in the code for falling first. Refer to the tutorial on programming a falling object in Scratch for a better understanding of this script.

Blocks added into the script above to simulate fall

The blocks above says that if Scratch Cat is on the ground, we set its falling velocity to 0.5 to cancel out the work by gravity. this makes sure that it lands on the ground, and not through it. Now we slip in a couple of blocks to make it jump:

Blocks for jumping

With these blocks, when we hit the spacebar the cat jumps as its y position is changed by the jump velocity of 10.

The only thing missing now are the running legs. We will do this by alternating the costumes. Note that we only want Scratch to move its legs while running on the ground and not while its jumping in the air, so we slip in controls for this in the if y position < -80 block (i.e. if it is on the ground):

Blocks to change costumes, giving the impressing of running

And we are done. This is the final script for keyboard interaction, after adding in all the code that we have discussed:

Final script to make Scratch Cat run and jump with the keyboard

There you go! You have just programmed Scratch Cat to run and jump with keyboard controls. Congrats!
Note: if you have downloaded my project you will notice that I have used variables to store my values. If "variables" sound alien, you may go without them for now. We will have a tutorial about them soon.

Programming falling objects in Scratch

How can we write Scratch scripts to simulate falls? In a recent project we programmed a falling ball. Here, I am going to explain it from a different angle (see and download this project at scratch.mit.edu),

Let's do a little thought experiment. What is the simplest way to make an object fall? We could start by constantly changing its y position, like so:

Change y position of the object at each loop iteration

We could put the value of this change in a variable (we will just call this variable v) and our code would be like this:

Using a variable to contain the downward displacement

If we run this script, the first thing we'd notice is that the fall is very unnatural. This is because the object is falling at a constant rate. It moves downwards by the same distance at every loop iteration. A fall in the real world is not like that - a falling object in the physical world moves faster and faster downwards all the time. To simulate this we simply add a statement block to increase v by a small amount at every loop:

Increase downward displacement at every loop iteration

At this point, you may be confused as to why we are changing v by negative 0.5 when previously we had mentioned we wanted to increase v. The negative sign denotes that the direction of the change is downwards. We increase the magnitude of v by 0.5 downwards, and that is equivalent to changing v by -0.5.

That was actually all the code we need to simulate a falling object.

Making the Scratch sprite land

Most of the time, we would want the object to be able to land on the ground (or something else, anything). How can we program landing with Scratch? Let's think about this again.. When we jump off a chair in the physical world, why are we able to land on the ground and not sink further in? After all, we are always acted upon by gravity, meaning that we are always pulled towards the centre of the Earth. So why not sink further in?

The scientific explanation for this is that the ground exerts a force equal to the gravitational force on us. The two forces cancel leaving us stationary, since there can be no further movement without a force.

We can use the same concept in our script. We insert statement blocks to cancel out the falling distance (i.e. the v variable) when the object is on the ground.

I will suppose that when our object touches the ground, its y position is -80.  So I will use the condition if y position < -80 to determine whether the object is on the ground. We could of course use other means, like the sensor blocks for example.

Here is the complete script:

Final script

What simply happens now is that when the object lands, we set v to a positive value of the falling displacement i.e. set v to 0.5. In the very next statement block, v is decreased by the same amount (i.e. change v by -0.5) leaving it to result to zero. When the program later executes change y by v it is effectively changing the object's y position by zero, and so the object stays stationary.

Project: Keep Afloat

It has been almost a week already! Hope you have fiddled more with the project from last week and the week before. Our new project has only one sprite and a very short script. Yet it illustrates interesting ideas on simulating falling objects and using the audio input to control a sprite. We will need a microphone for this project.

This is what we will create:

Download the project
Learn more about this project

Just a few simple steps:

Step 1: Setup stage, sprite and variables

The Stage is really simple for this one. We will just whip up the Paint Editor and put in a few strokes of blue for our "water".

Painting "water" on the Stage

In this project we will use two variables to help program the movement of the ball. To create a variable, first click on the ball sprite (you would have to add it first, of course). Then go to the Block Palette and click on the "Variables" block group. Under the group, you will see the "Make a variable" button.

The "Make a variable" button under the "Variables" block group

Click on the "Make a variable" button and a you see a small popup. That's for us to name the variable. Select "For this sprite only" option, and name the variable old y:

Creating a variable for the ball sprite

Once we hit "OK", we will get a variable named old y whose value can be read by the ball sprite only. Create one more variable and call it y velocity. This is what you should see once done:

Our two variables

What is left of the setup now is for us to set (or in programmer speak, "initialize" our ball position and the value of the y velocity variable. This ensures that every time we start the program by clicking the green flag, the ball is positioned at the right place and y velocity is reset to 0.

Initializing ball position and  the "y velocity" variable

Step 2: Program ball movement

How are we going to program the ball movement? Before we get our hands dirty, let's talk about how a ball really moves in the real world. If we hold a ball still in the air, it has zero velocity because it does not move. The ball has a certain position - it could be say, 100m off the ground.

Now what happens when we release our grip on the ball? At the very instant we release it, the only force working on the ball is gravity. The ball now picks up velocity, and moves faster and faster towards the ground.

Let's rewind this scene and play it very, very slowing in our heads. Imagine the movement of the ball at every second while it falls. Suppose the ball falls 0.1m after one second. Its position after that one second is now 99.9m off the ground. Since it fell 0.1m in one second, its velocity after one second is 0.1ms^-1.

The ball's velocity is not going to stay at 0.1ms^-1 throughout the fall. It will pick up because of gravity. Let's say that gravity increases its velocity by 0.1ms^-1 at every second. Now imagine what happens after two seconds. Since gravity has increased the ball's velocity by 0.1ms^-1, it would have travelled at 0.2ms^-1. This means that from the first second to the second second, the ball has fallen 0.2m. Its position is now 99.9m - 0.2m = 99.7m.

In the third second, its velocity would increase again by 0.1ms^-1 to 0.3ms^-1. So its position is now 99.7m - 0.3m = 99.4m

This is exactly how we are going to program it. We will move the ball at very small time slices by changing its position and velocity at every iteration of a forever block. Think of one iteration on the forever block as a small time slice.

Changing and keeping track of the position and velocity of the ball at every time slice

Remember that we also need to increase its velocity (due to gravity) at each time slice. We separate the script for this to a different stack:

Increasing velocity at each time slice

And there we have it - a falling ball.

Step 3: Keep the ball afloat by blowing

The last thing we need to do is to make the ball float up as we blow into the microphone. The harder the blow, the louder is our puff and the faster the ball will float upwards. To do this, we will use the loudness sensor. The loudness sensor is found in the "Sensing" block group:

loudness sensor

The loudness sensor has a Stage Monitor (or Watcher) that we can enable by ticking the checkbox next to it. We should be able to see the loudness value on Stage once it's ticked:

loudness Stage Monitor

Connect a microphone and blow into it. The loudness value is larger the stronger, or louder, you blow. So how shall we "blow the ball higher"? This is how:

Script to move the higher the louder we blow

All we do is change the velocity of the ball by a value factored by the loudness. We could merely change the y velocity by the loudness value, but the change would be too drastic - you could test it and see. So we pick a value, in this case 0.005, to multiply it by to adjust its effect.

Finally, we add a block to constantly turn the ball just so that it looks more natural and nice.

And that is all. Have fun!

Coming up: next week, we will learn how control a sprite with the keyboard. Til then!