String Art

The goal
Step 1. Set the stage
Step 2. Delete the cat
Step 3. Create two sprites
Step 4. Create two variables
Step 5. Create the turn slider
Step 6. Create the script for the first sprite
Step 7. Create the script for the second sprite

The goal

When you click the green flag, the project creates a piece of string art — a complex geometric shape drawn with only straight lines. (You could arrange pieces of string in the same way.) You can change the shape of the string art by moving the slider beneath the turn variable.

Here is the same project in slow motion, so that you can see how it works. What exactly is the red sprite doing? What exactly is the purple sprite doing?

Step 1. Set the stage

Make a new project. Then change the color of the stage to black and draw stars on it if you’d like. (The project is also lovely on a simple black background.) Can you figure out how to do that?

Step 2. Delete the cat

Delete the cat sprite. Hint! Use the scissors tool. Can you figure out how to do that?

Step 3. Create two sprites

Create two sprites. Each sprite should be a small black dot.

Step 4. Create two variables

In this project, you’ll need two variables. A variable is a hidden container that holds a number or other value that you can change over time.

[1]
Create a variable and name it steps. Just to the left of the new variable’s name is a checkbox. Click the checkbox to remove the check so that the variable doesn’t show on the main playing screen.

Steps will contain the number of steps that the first sprite takes each time it draws a line. Your script will increase the number in the steps variable over time. As a result, the first sprite will move further and further each time it draws a line. For example, suppose that when your script begins, the steps variable contains the number 5, and that this variable changes by 1 over and over. Then the first sprite will begin by making the first line it draws 5 steps long. The next line it draws will be 6 steps long, and then 7 steps long, and so on. Take a moment to look again at the slow-motion movie to see how each line drawn by the orange sprite is a little longer than the previous one.

[2]
Create a second variable and name it turn. This time, leave the checkmark in place. You want the turn variable to display on screen!

Turn will contain the number of degrees that the first sprite turns each time it draws a line. This number is controlled by the slider. If a player changes the slider to 120 (for example), then the turn variable will contain the number 120. Each time the player changes the slider, the number in the turn variable changes.

Step 5. Create the turn slider

On the playing screen, double-click the turn variable until it becomes a slider.

You’ll notice that the slider has a maximum value of 100, but we’d like the maximum value to be the same as the number of degrees in a circle — 360. To change the slider’s minimum and maximum values, press and hold the ctrl key and then click the slider (on Macintosh) or right-click (on Windows). Select set slider min and max. On the next screen, type 0 and 360, and then click OK.

Finally, drag the slider so that the turn variable is around 75.

Step 6. Create the script for the first sprite

Before going further, watch the movie below to see how the two sprites work together to draw the string art. In the movie, I’ve temporarily made the first sprite into a red square and the second sprite into a purple square so that you can see how they’re moving.

At the beginning of the script for the first sprite…
* clear any previous lines drawn by the pen
* pick up the pen
* make the sprite go to the center of the screen
* set the steps variable to 5
* put the pen down

Create a loop that repeats 150 times. Inside the loop:

* make the sprite go to the center of the screen
* turn by the number of degrees in the turn variable
* move by the number of steps in the steps variable
* change the pen color by a small amount
* send a message to the second sprite to tell it to draw a line (hint! use the broadcast command)
* increase the size of the steps variable by 1 so that the next line drawn by this sprite will be a little longer than the last (hint! click the Variables button at the top left and use a command you’ll find there)

Step 7. Create the script for the second sprite

At the beginning of the script for the second sprite…
* clear any previous lines drawn by the pen
* pick up the pen
* go to the center of the screen

When the second sprite receives its message…
* put the pen down
* go to the first sprite
* change the pen color by a small amount
* pick the pen up

. . .

That’s it!

A similar project was created by dombien at http://scratch.mit.edu.

Return to the Drawing Page | Return to the Home Page