CSCI 107 Scratch lab

Why Scratch?

Scratch is a programming environment created by the Lifelong Kindergarten program of the MIT Media Lab. The goal of the Lifelong Kindergarten program, as stated on their web page, is to "develop new technologies that, in the spirit of the blocks and fingerpaint of kindergarten, expand the range of what people can design, create, and learn."

Originally, Scratch was developed to allow kids (2nd graders and up) to write programs. Many have and, at this time, almost 600,000 projects have been downloaded to the Scratch project page. However, Scratch is also being used to in higher education. For example, Scratch is used in Harvard's first programming course Introduction to Computer Science I.

An introduction to the language

We suggest you get started by watching a video introduction to Scratch with the rest of the class. If you prefer reading to watching, check out the Getting Started with Scratch introduction. It's 14 pages with very little text.

There may be times during this lab or during your future use of Scratch when you'd like to consult the Scratch Reference Guide 1.4. We suggest you take a quick peek out in now. Don't try to read it. Just scan it to get some idea of what Scratch can do.

Karel vs. Scratch

Both Karel and Scratch were designed to be educational programming languages targeted largely for children. Karel was created in 1981, while Scratch was created in 2007. For most of you, Karel was created when your parents were in high school and Scratch was created when you were in high school. Karel appeared in the era of the IBM PC. Scratch appeared in the era of the Nintendo Wii. In 1981, the top hits included Dolly Parton's 9 to 5 and Sheena Easton's Morning Train (Nine to Five). By 2007, the music world was introduced to Miley Cyrus. Both Karel and Scratch represent their times, in both technology and culture.

The goal of the lab

The suggested goal for the lab is to produce a little game in which you use your mouse to click on a moving feline. However, you really don't have to follow the lab step by step. Scratch is supposed to be a programming language where you learn by experimenting. If you want to play, go ahead.

Downloading Scratch

Scratch isn't loaded on the computers on KH 037. You'll need to download it from the Scratch 1.4 download page.

Getting started

You really did pay attention to that video. Right?

Making the cat move

Let's start with a new project a make the cat do something when the green flag is pressed.

Start by making the cat move to the left side of the screen when the flag is pressed.
Moving to the left

You'll need to drag a couple of blocks into the Scripts window to make this happen. Notice that blocks are organized in classes such as Motion, Looks, and Control. The color of the classes and blocks match. When you see an orange block in our example, go to the Control class to find it.

You'll need to type that -200 and 0 into the go to block. This is a good time for you to think about how the co-ordinate system of x and y values is used on the Scratch stage

Now add in a forever block with an inner move block to get the cat moving across the stage.
Moving across the stage

By the way, this is probably a good time to click on the Stage icon in the lower right corner of Scratch's window and choose a more interesting background that the white sheet.

Making the cat move back and forth

I'm sure you've noticed that that cat just gets to the right side of the stage and stays there. Let's make him continually pass from left to right on the stage, just like in those carnival games where you try to shoot ducks.

To do this we have to add an if else block to your program. You want to make the cat go back to the right side when it reaches the left side. Mathematically, we do this by allowing the cat to move right as long as its x position is less than 200. Otherwise, we send it stage left.

It's the "less than 200" part that's hard. Go into the Operators class and drag in a < (less than sign) block into the if slot. Then get an x position block for your test and put it into the < block. When you are done, your program should resemble the one shown below:
Moving back and forth
Please don't go on until you understand this collection of blocks!

If you'd prefer the cat to move up-and-down or corner-to-corner, you're welcome to try that out.

Provoking a response

Let's make the cat do something when you "hit" it with the mouse. Do this my adding a when sprite clicked block. I suggest you make it play a sound (which might not be very interesting in the lab) and change costume.

First, you have to choose some costumes. Don't worry there are many. Just go into the Costumes tab and Import. You can also Paint a costume, but you may not have time for that.
Costumes

You should probably also import some sounds. You might not be able to hear it today, but it would be good practice for future Scratching.
Sounds

Finally it's time for some event driven programming. Drag in an when sprite clicked block and add some actions, like changing costumes.
When sprite clicked block
Try this out to make sure your cat is mutating properly when you click on it. If the cat is moving too fast, you might want to reduce the number of steps moved or you might want to add a wait control block.

Provoking an external response

Presently clicking on the moving sprite, only changes the moving sprite. Suppose we wanted these clicks to have an outside effect, like raising a score, moving to a higher level, or adding money to your bank account. In Scratch this is done by having one sprite broadcast a message to others. Start by adding a broadcast block to your program.
Broadcast event
You can name the broadcast whatever you want.

We're going to make the background of the stage, change when the message is broadcast. Click on the Stage icon in the lower right and then go to the Stage tab to choose a few more backgrounds.
Selecting stages

Like sprites, stages can have scripts. Add a simple program to change background when the message is received.
Block to change background
You may also want to reset the background when the flag is clicked.
Block to reset background

Provoking a reasonable external response

That constant flashing of the background is annoying. Let's try something a bit more challenging, like making the background change every tenth "hit".

To do this we have to introduce a variable. A variable is similar to a spreadsheet cell. It holds a value that can change, that is, that varies. To create a variable, first click on the Variables control in the upper left of the Scratch window while you are still have Stage selected for the middle pane.

Next mash the Make a variable button. Call your variable something useful, such as NumHits. Once you've done this you'll see a collection of new block choices for your variable.
Blocks for new variable

We're going to use your variable to reset the background every tenth hit of the sprite. First, make sure your variable is initialized to zero whenever the green flag is pressed.
Block to initialized variable

Now the hard part. Whenever the sprite is "hit", the stage received the "hit" message. Have the stage increment the "hit" count on each receipt of the "hit" message. If the "hit" count reaches ten, reset the count to zero and change the background.
Block to handle hits

Being unpredictable

Having the sprite move in a straight line at a constant speed results in a pretty boring game. Go to the Operators block group and use the pick random block to vary the number of steps the sprite takes on each move. You'll need to play with the numbers until it looks right. If you haven't placed a wait block inside your forever, it's time.

You can also add use a turn block to make the cat move in different directions. This might also be a good place for another pick random.

Program with turns and varying speed

Being unreasonable

If you still have time, you might want to try something obnoxious. Suppose that whenever the mouse "touched" the sprite, the sprite immediately jumped away, hopefully, before the mouse button could actually be clicked.

To achieve this irritating behavior, you have to add a new if block to your program which is triggered by a touching block. Then you must make sure the sprite jumps away from the mouse. This is done with another if which test is the mouse if approaching from above or below. Use the mouse y block, which returns the present position of the mouse, and the y position block, which returns the present position of the center of the sprite. Then use change y blocks to jump over the mouse.

It's hard, but try it.
Jumping the mouse