2
Rainbow Lines . . . in Space!

Alphabet-i n this chapter, you’ll create a cool-looking animation: a rainbow V that flies through space and leaves colorful trails behind. This program was inspired by the demoscene, a subculture of elite programmers who made amazing graphical programs starting in the 1980s.

Demosceners made beautiful, elaborate programs called demos that showed off their artistic, musical, and programming skills. But most amazing of all, these programs were tiny—just a few kilobytes! The program we’ll write isn’t quite as small, but it’s dramatic and colorful, and it uses only a few lines of Scratch code.

Before you start coding, look at the following figure to see what the final program will look like. Then, go to https://www.nostarch.com/scratch3playground/ to play the animation.

Just like demosceners, you can make beautiful programs. Let’s create our own graphics demo in Scratch.

Sketch Out the Design

The first step of turning an idea into a Scratch program is to sketch out what you want it to look like. Planning your program helps you figure out the sprites you want and how they’ll behave. I recommend drawing your ideas on paper so you can cross them out if you don’t like them and write down notes and reminders. It’s also best to keep the project simple.

When you’ve completed your simple game, you can then build on it to add complexity, which is the idea behind iterative development. First, you make the program work. Then, you make the program better. You can always add cool things to the basic program after you finish it.

Don’t worry about making the sketch look nice. It’s more important to have a solid plan for the main parts of the program. In my sketch, I have three parts: A, B, and C. We will work on these parts one at a time until we’ve built the full program.

After you’ve completed a sketch of what you want your program to do, you can start programming. Go to https://scratch.mit.edu/, sign up for an account on the site if you haven’t already, and log in (having an account lets you save your programs on the Scratch website). After you’ve logged in, click the Create button at the top of your screen to start making your own Scratch project. Then, click the text field at the top to change the name of the project from Untitled to Rainbow Lines. Let’s begin by tackling Part A of the sketch.

Create the Space Backdrop

First, let’s clean up sprites we won’t use and set a background.

1. Clean Up and Set the Stage

Every time you create a new Scratch project, you’ll see an orange cat sprite on a blank, white Stage. We don’t need the cat sprite for our program, so right-click the Sprite1 cat in the Sprite List and either select delete to remove the cat from the Stage and the Sprite List or click the trash can icon next to the sprite.

Click the Choose a Backdrop button (which looks like a landscape painting) under New backdrop.

The Backdrop Library window will open and display all the backdrops in alphabetical order. Click the Stars backdrop.

Now the Stage’s backdrop looks like outer space.

Create Three Bouncing Dots

Next, we’ll add three new sprites that represent the three points of the flying V.

2. Paint the Dot

Click the Paint button (which looks like a paintbrush).

A new sprite named Sprite1 is created in the Sprite List. Clicking this button also switches the editor to the Costumes tab, which contains the Paint Editor. Use the Brush tool to draw a small red dot near the crosshairs in the Paint Editor. It might help to zoom in by clicking the Zoom button (which looks like a magnifying glass) in the Paint Editor.

In the Sprite Pane above the Sprite List, change the sprite’s name from Sprite1 to Dot 1.

3. Add Code for the Dot 1 Sprite

Now we can start programming. Click the Scripts tab to make the Code Area visible. Add the following code to the Code Area. You can find these blocks in the Events (yellow), Motion (dark blue), Operators (green), and Control (light orange) categories. If you have trouble understanding how to drag these blocks, view the animation at https://www.nostarch.com/scratch3playground/.

When you click the green flag, the Dot 1 sprite points in a random direction between –180 and 180 degrees. Then, the forever loop moves the sprite forward 10 steps and makes the sprite bounce when it hits the edge of the Stage. The sprite will continue to do this forever.

Notice that the Dot 1 sprite isn’t drawing any rainbow lines yet. We’ll do that later when we’ve created more sprites.

Explore: Direction and Degrees

Words like up or right are perfectly understood as directions by humans like you and me. But the computer needs a number to indicate an exact direction. All sprites in Scratch have their own direction number. The direction numbers are between −180 and 180 degrees. Pointing at 0 degrees is facing up. Pointing at 90 degrees is facing to the right. The following figure shows several directions and their degrees. Notice that the degrees increase in the clockwise direction and decrease in the counterclockwise direction. Also, notice that −180 and 180 degrees point in the same direction: down.

The pick random -180 to 180 block chooses a random number to use as the direction. Then, the point in direction block points the sprite in that direction. This means that the sprite could be pointed in any possible direction.

Let’s write a new script that demonstrates how degrees work. Open a new tab by pressing ctrl-T in your web browser and go to https://scratch.mit.edu/ to open a new Scratch editor. You can edit multiple Scratch programs at the same time.

In the Code Area for the cat sprite named Sprite1, add the following code using blocks from the Events (yellow), Control (light orange), Motion (dark blue), and Looks (purple) categories. Keep in mind that we’re writing a totally separate program from the Rainbow Lines program.

When you run this program, the cat sprite points toward the mouse. The cat will say the direction in which it’s pointing.

Notice that the direction number changes as the cat’s direction changes..

4. Duplicate the Dot 1 Sprite

Right-click the Dot 1 sprite in the Sprite List and select duplicate. Do this twice so that you make two duplicates: Dot 2 and Dot 3. (Scratch automatically names the sprites with increasing numbers.)

Draw the Rainbow Lines

Now that we’ve created all the bouncing dots, we can create a fourth dot sprite to draw the rainbow lines. We’ll write a program that makes this drawing dot move quickly between the three bouncing dot sprites, drawing a line as it moves. This process will repeat three times, and then after 10 seconds, the screen will clear.

5. Add the Code for the Drawing Dot Sprite

This project uses Pen code blocks, which are not included in the Block Palette by default. You must click the Add Extension button in the lower-left corner of the editor and select Pen from the window that appears.

Right-click one of the bouncing dot sprites and select duplicate. Because this is a duplicate of the bouncing dots, it has some code we need to delete. In its Code Area, delete all the code blocks by dragging the when green flag clicked block (and all the blocks underneath it) to the Block Palette in the middle of the editor, where they’ll disappear.

In the Sprite Pane, rename this sprite Drawing Dot.

Add the following two scripts to the Drawing Dot sprite. You can find these blocks in the Events (yellow), Pen (clear), Control (light orange), and Motion (dark blue) categories. Remember, the Pen code blocks appear only if you clicked the Add Extension button and selected Pen.

In script 1, make sure you use the go to block, not the go to x y block. Also, be sure to change the go to blocks so they aren’t going to the mouse pointer. To do so, click the white triangle on the block and select a sprite from the menu.

Before you run the code, let’s talk through how it works. When you click the green flag in script 1, the Drawing Dot sprite runs the erase all block to clear away any pen drawing already on the Stage. Then, the script runs the pen down block: as the sprite moves around, it draws a line on the Stage.

To better understand what the pen down block does, imagine holding down a giant marker on the floor while you walked around it: the marker would draw a line on the floor following you! The drawing dot goes to Dot 1, puts its pen down, goes to Dot 2, and then goes to Dot 3. Next, the change pen color by 10 block changes the color of the pen slightly. (You can increase this number to make the colors change faster.) At the same time, the Dot 1, Dot 2, and Dot 3 sprites continue to move around on their own. So the V line that the Drawing Dot sprite draws also moves around.

Script 2 is a lot simpler to understand. This code waits 10 seconds and then clears the screen of any marks made by the Pen blocks. Now the Stage won’t become overcrowded with rainbow lines.

The Complete Program

The final code for the entire program is shown here. Notice that the code for the Dot 1, Dot 2, and Dot 3 sprites is identical. If your program isn’t working correctly, check your code against this code:

Turbo Mode

If you hold shift while clicking the green flag, you can start the program in Turbo Mode. The computer is usually able to run code blocks quickly, but a program that draws sprites to the screen slows down the computer. In Turbo Mode, instead of drawing the screen after each code block, Scratch draws to the screen only after several code blocks. Human eyes won’t notice the skipped drawings, and the program will look like it’s running faster.

shift-click the green flag to run the Rainbow Lines program in Turbo Mode. Almost instantly, the screen fills up. To end Turbo Mode, shift-click the green flag again.

Summary

In this chapter, you built a project that

Has custom sprites you created (even if they are just dots)
Uses the pick random block to point a sprite in a random direction
Makes sprites move and bounce off the edges of the Stage
Duplicates sprites and their code
Uses the Pen blocks to draw rainbow lines

This project is a demo that users can watch but can’t control. In Chapter 3, you’ll make a maze game that lets players interact with the program by using the keyboard. This will be the first real game project in the book.

Review Questions

Try to answer the following practice questions to test what you’ve learned. You probably won’t know all the answers off the top of your head, but you can explore the Scratch editor to figure out the answers. (The answers are also online at http://www.nostarch.com/scratch3playground/.)

What happens when a sprite moves after it has run the pen down block?
If some code moves a sprite but no line is drawn behind it, what might cause this problem?
Which block causes the lines in the Rainbow Lines program to look like a rainbow?
Which code block do you use to make the rainbow lines thicker?
How do you turn on Turbo Mode? How do you turn it off?
How do you duplicate a sprite and its code blocks?
Where does a sprite point when its direction is 90 degrees?
What is the degree direction for pointing up?
You want a sprite to point down and move in that direction. In which color of blocks category would you find code blocks to do this?
How do you select a new backdrop from Scratch’s Backdrop Library?
You see a sprite named Sprite1 in the Sprite List. How do you rename this sprite?