Introduction to Programming

Starting from Scratch

Scratch: a simple language for learning programming

Includes several fundamental constructs, including:

Sequential flow of control

Iteration (looping)

Selection/decision making

Data storage (variables & arrays)

Randomness & event handling

Scratch environment

Setting up the scene

A Scratch program is a series of instructions that controls the movement, appearance and behavior of characters (sprites) on a background (the stage)

Before we write the code, we can establish our cast of characters and their environment

Choosing a Sprite

Scratch always starts with the “kitty” sprite

You can choose to change this (or add additional Sprites) using the buttons shown highlighted in red to the left

Choosing a Sprite

You can create a Sprite using a built-in paint program

Or bring in an image from a file

Or allow Scratch to choose a random Sprite from its library of images

Here, kitty kitty ...

Right-click on the kitty (or any other sprite) to bring up a menu of options

To remove the kitty from the stage, click delete

Surprise, surprise

Picture on the left was the result of clicking the “get surprise sprite” button twice

The program almost writes itself!

Creating your own

The built-in paint editor is pictured below

The import button (highlighted) allows you to bring in a picture from a file and edit it to make a sprite

Creating your own: before

Picture at right was imported from My Pictures folder ...

Creating your own: after

And here it is again, after a few subtle alterations ...

Sprites & their costumes

In creating a sprite, you are establishing its appearance

You can have several different ways to view the same sprite – besides movement and rotation (described a bit later), you can change the look of a sprite by providing it with costumes

Costumes tab

In the center of the Scratch window is an area previously identified as the Script area, where we create our code

The tabs across the top of the area provide us with other options; clicking costume allows us to set up new looks for the current sprite

Extreme makeover, sprite edition

The costume tab at right shows the result of creating a few new looks for the original sprite

Setting up the background

The stage area itself can take on new looks

Clicking on the stage button turns the area into its own kind of sprite

Setting up the background

As with the sprites, you can paint or import one or more “costumes” for the stage

Writing a program

A program consists of a series of instructions

In Scratch, instructions come in 8 varieties, symbolized by colored blocks

Writing a program

Choose an instruction type by clicking on one of the colored blocks

The area below the blocks displays the instructions, which look like puzzle pieces

The illustration at right shows the motion instructions for a sprite

Writing a program

Choose the object (sprite or stage) you want to write instructions for by clicking its thumbnail

Click the scripts tab in the middle window

Writing a program

Choose an instruction from the left window by dragging and dropping it into the script area (middle window)

Illustration at right shows an “after” view

Running a program

You can see what your instructions do at any time by double-clicking; the program will run the current (and all subsequent) instructions, and the results will show up in the stage pane

Your source code (like transcribed DNA) is running through a program called an interpreter (or translator, if you will), and the result is a running program

Writing a program

Continue to grab instructions from the left and place in the middle

Notice that the instructions look like puzzle pieces; you can only place a piece if it fits with the piece(s) above or below it

Writing a program

Other instructions besides movement can be used to manipulate a sprite

In the example at right, the sprite undergoes a costume change after going through some moves

Ready for the big time

One last environmental note: if you want the stage area to occupy the entire screen, click the projection screen icon in the upper right corner of the stage area

You can restore the screen to the multipane view by hitting the Esc key

Sequential Control

The program you've just seen demonstrates sequential control:

Each instruction is performed exactly once

Their placement relative to one another determines the sequence of events

In Scratch, all of the instruction types in the left column of the instructions pane can be placed sequentially

Sequential instruction types

The “motion” and “looks” buttons reference instructions to control sprite movement & costume, as we have seen

The other two buttons, “sound” and “pen” allow you to program sound effects and to have the sprite draw pictures on the screen as it moves (by leaving a trail)

Instructions & arguments

Many instructions include white boxes with values (numbers or words) in them

The white boxes contain data that each instruction uses in its execution: we call such data items arguments

Arguments & behavior

You can double-click on any argument to select and edit its value

So, for example, if you want the anteater to say “goodbye” instead of “hello”, you would edit the last argument box in the program:

Altering flow of control

By default, statements in a program are executed sequentially (in order, each exactly once)

But we may want to impose conditions on the manner in which statements execute

There are three ways we can alter flow of control; they are:

Iteration (looping)

Decision (selection)

Responding to events

Iteration

Iteration, or looping, means repeating an instruction or set of instructions

Iteration can be conditional (based on circumstances) or unconditional (always happens this way)

We will look first at an unconditional loop

A ridiculous sequence of events

The code at right describes a simple sequence; the sprite goes through a series of costume changes, accompanied by sound effects

As exciting as it is, it would be even better if the action continued ...

Eternal loops

We can make the action go on (and on, and on) using the unconditional loop instruction, a funny-looking puzzle piece labeled forever:

Eternal loops

To make the forever loop work, just drag it over the portion of the code you want to repeat (in this case, all of it):

Stopping the madness

An infinite loop can only be ended by ending the program

In Scratch, you can end a running program by clicking on the stop sign in the stage window:

Starting the madness

You can make the program start by double-clicking on the instructions, but most applications wouldn't require you to do this (when was the last time you saw the program code behind MS Word?)

A better way to start a program is to have a designated starting place –Scratch has one, right next to the stop sign: the green flag

Adding the flag

The very first instruction in the control group can be used to start a program when the flag is clicked

Notice that this instruction, unlike most we've seen, can only be placed at the top of a program; it has no notches to connect it to puzzle pieces above

Code complete

The illustration at right shows the completed program