Introduction to Scratch

The easiest way to learn how to program is to use Scratch. This is not really coding since no code has to be written. Instead it provides a totally visual way of writing programs in which prewritten code blocks are selected and dragged into position in a script, or program. This makes Scratch a very easy language with which to start coding.

Scratch is offered by MIT originally for children but now widely used by beginners to programming of all ages. You can use Scratch on their website and develop your programs online. This gets you into their global network of Scratch programmers and allows you to publish your work on their site. Or you can download the Scratch 2 software which lets you program offline, without an internet connection. You can publish on their website later if you wish.

The weakness of Scratch is that you can’t use it to produce distributable apps. With JavaScript, for example, you can publish your work immediately on the internet. With Android Java you can publish your apps on the Google Play Store. With Scratch you can only run your applications on the Scratch website or in the package you use to develop Scratch applications. This is actually a development environment which also serves as a runtime module. You can distribute your apps to others who have the Scratch software installed in their computer or, of course, allow friends and family to run the software on your computer.

All the Scratch tutorials on this site are written for the offline Scratch 2 but are easily adapted to the website version.

One other option is to convert the Scratch file to something more usable. Scratch 2 produces a .sb2 file that can be converted to a Flash .swf file. Then it can be embedded in an object tag on a web page and should work in computer browsers with the Flash plugin. However, the result, in my experience, is disappointing since it does not work for some animations.

But Scratch remains the easiest way to learn how to code, by a long shot, and can lead to a more confident approach to learning JavaScript or Java.

 

The Scratch Environment

When you run Scratch the development environment opens as shown in Figure 1. This is a very detailed figure that will not be very clear on a mobile screen so you should run your own copy of Scratch while reading this tutorial. The figures are only useful as indicators.

This window is divided into panes. The top left pane is the Stage on which the apps are run. Initially it displays a single Scratch Cat object. The Stage can be expanded to fill the entire screen when your app is finally tested, by clicking on the screen button in the top left corner. This is the presentation mode.

Below the Stage there is an area where programmable objects are displayed. Initially there are only two. One is the Stage itself and the other is the Cat. The latter is described as a Sprite object and here is given the generic name of Sprite1. We usually write programs by creating Sprite objects and coding their behaviour.

On the right side of the Scratch window there is a scripting pane. This is where you write your programs. In fact you don’t really write anything. Instead you assemble a program usually in the form of several scripts, by dragging code blocks from the center pane. This avoids the extreme frustration generated by text input errors in other programming languages.

The center pane is actually two panes. At the top is a set of 10 code palettes and below that is an expansion of one of them to display all the code block in that particular palette. In Figure 1, the Motion palette has been selected and the palette pane displays 17 code blocks related to displaying Sprites on the Stage. You may have to scroll down to see them all.

Another feature of the code pane is the set of three tabs at the top. Currently the Scripts tab is selected and shows the script code blocks. The Costumes tab can be selected to open a new pane in which the appearance of a Sprite can be edited or created. The Sounds tab allows you to create sounds to go with your Sprite. These features describe operations that would be very difficult to accomplish with JavaScript or Java, so Scratch is a very rapid development environment and can even be used to prototype apps before implementing them in these other languages.

Start Programming with Scratch

First we have to select the Stage or one of the Sprites. If we don’t have a suitable Sprite we will use the Costumes tab to create one. Or we can use the extensive library of Sprites supplied with Scratch. These programs are called scripts and they work with each other to produce a complete program which is then deployed as an application, sometimes called an app.

We can write scripts for the Stage, which apply to the whole program or we can write scripts for individual Sprites which determine how they should behave on the Stage. Normally we would want to program all of these objects. In this introduction to Scratch we will just program the existing Sprite1, which is the Scratch Cat icon. So make sure the Sprite1 object is selected and is outlined in blue.

We can start a program running in a number of ways but the simplest is to use the code block called “when green flag clicked”. This is the first code block listed in the Events palette so click on Events, then select the green flag block with your mouse and drag it into the scripting pane. If you look at the Stage you will see two buttons in the top right corner. One is the green flag and the other a red button. You run your app by clicking in the green flag and you stop it by clicking the red button. If you expand the Stage to fill the screen these buttons are still present. So we can already run our program by clicking the green flag.

However, nothing will happen, since our script contains no code. We can rectify that by adding some more code blocks. At this point you can explore all the code palettes and see what they offer and maybe try a few. You can’t do any harm to Scratch or your computer and when you get in a mess you simply close the Scratch window. It will ask if you want to save your work and unless you just got very lucky the answer will be no. Then run Scratch again and try some more coding.

However, you will probably learn more quickly at this stage with an example app so we will write a script that causes the Sprite to behave in some interesting way when the green flag is clicked.

 

Moving the Sprite

With the Sprite1 object still selected we can build a script for it. First we select the Motion palette and from that we drag the “go to x1: y1: “ code block and drag it into the script pane. If we push it up below the green flag block it will click into place below that and connect to it like a jigsaw puzzle. This block causes the sprite to move to some x and y position on the screen. You do this by entering the coordinates in the x: and y: position boxes.

A Scratch screen consists of 480 pixels across by 360 pixels vertically. This is a 480 by 360 coordinate system. The center of this system is in the center of the screen which therefore extends up to 180 and down to -180 y values and from -240 left to 240 right for the x values. If we move our Sprite to x:0 and y:0 by typing the zeros into the boxes, the Cat sprite will move to the center of the screen when the green flag is clicked to run the program.

However, there is a problem in knowing which part of the sprite we are referring to. It could be the very middle or it could be the top left corner as is usually the case in computer graphics. If it is the middle then the Cat will be moved to the middle of the screen. If it is the top left corner it will be moved to the right and below the center point. It depends on how the sprite has been drawn. When we run the program the sprite is shown exactly in the middle of the screen so it has been drawn about its center point.

Since the Cat is already drawn in the middle of the screen before you run your program nothing will seem to happen. You can drag the Cat off center before running the program and see it revert to its central position – or try sending it somewhere else by changing the x: and y: values.

You can break up your program by using the mouse to drag the move block away from the green flag block. You can even lose the blockcompletely by dragging it into the palette pane (whatever palette is showing). Or we can also just leave it in the scripts pane and reuse it later. So you can edit your programs by collecting code blocks like jigsaw pieces and when you run the program only those connected to the green flag or some other starting block will be executed.

 

Program Loops

We can extend the program by adding more blocks. One interesting possibility is a loop bock from the Control palette. You can open that palette and drag the third block down, that is, the “forever” block into the script. This block has two prongs with a gap between. It will repeat any code contained in this space forever. This is called a loop and in this case is an infinite loop that will never end unless you add some code to make that happen or click the red button to stop the program.

The next addition is to go back to the Motion palette and select a “move 10 steps” block, which is usually the very first one in the list. You should carefully drag this into the gap in the “forever” block. It should click into place quite easily. So now we have a program that will move the Cat to the middle of the screen if it is not already there then forever move it 10 steps in the direction it is facing – which is probably to the right. When the green flag is click the Cat will move off to the right and disappear off the edge of the screen.

If you edit the 10 in the move block to say, 5 what will happen? Yes, it will move only 5 steps in each loop and simply take longer to reach the edge.

 

Program Decisions

There is one other control block that is very often used in programs and that is a decision. There are several decision blocks in the Control palette and the simplest is the “if space then” block. Like the loop it has two prongs with a gap between which can hold other code blocks. These will be executed if a certain condition is true at that point in the script. The condition is whatever is added to the space between the “if” and “then”. So this block means “if this condition is true then” execute the code contained in the decision block. If the condition is not true, this code is just ignored.

You have to drag this “if” block into the script and insert it inside the loop just below the “move” block. So now in the infinite loop the program will move the Cat then test to see if the condition is met.

So we have to add a condition in the space which you will notice has sharp angled sides. The condition must be a block of code with similar angled edges that fits into this space. You can find these in the operators palette. They include “less than”, “equals” and “greater than” operators represented by two boxes with <, = and > operators between. The boxes may contain numbers that you type in or any other values that can be compared. In this case, you should drag the “greater than” block into the script and insert it in the angled space provided.

Finally we have to add values to the “greater than” condition. In this case we want to test to see if the Cat has reached the edge of the screen so we go to the Motion palette and near the bottom of the list we find an "x position" block. This has rounded edges and fits easily into the first space in the condition so we can drag it there. Then in the second space we can type in the value 200.

So the condition is that the Cat x position should be greater than 200, in which case it is nearly at the right edge of the screen. Then we have to do something and the simplest action is to return the Cat to the center of the screen again. We can do that by adding another “go to x:0 y:0” block to the space inside the “if” container block. Now when we run the program by clicking the green flag the Cat will move to the center of the screen then move towards the edge and when it gets there it will immediately return to the center and repeat this movement indefinitely or until you click the red button to stop the program.

 

The The Sprite Script

The Program in Action

Finally

An example of running the introductory app is shown above..This is a video clip so it is not interactive like a program. You can expand the size of the clip on a pc by using the control icon on the right or on a mobile by using the two finger gesture to expand the display.

You can learn how to use Scratch by experimenting. Try some of the other code blocks and see what happens. Or you can just move on to some of the other Scratch tutorials on this website.

You will also find that there are some flaws in the program that might be corrected. We call these “bugs”. For example, the sprite may not always start pointing in the default direction when the program starts. If this happens you will have to find a code block that points the Cat in the required direction.

When you close the Scratch window you will be invited to save your project so you might like to do that in some convenient folder. In this case the project is just the program you have written. Then you can run Scratch again and reopen that file to do some more work on it. Or, in Windows, you can double click on the file itself to open Scratch with the file already there.