Snap!

Programming for Beginners

An Introductory Project for Computer Programming

Written by:
Breanna Kern
Bryan Balaj
Olivia Scott
Annie Cunningham
Brenna Buckwald

Introduction
Snap! is a program that helps novice users learn how to write code without actually
writing any code. The instructions objective is to ease college students unfamiliar with
programming into a teaching tool that will instruct them on how to use Snap! to draw a
GV symbol. It will take approximately 15-20 minutes to complete the programming
sequence. No prior experience with coding or programming is required to effectively use
Snap!. Are you ready to learn the basics of computer programming with Snap!?

Materials Needed
- Computer/ Laptop
- Access to Internet or WIFI
Snap! is a free online program that requires no downloading.

1
 Drawing the GV Symbol in Snap!
LOCATING THE SNAP! WEBSITE
1. Open a web browser. Google Chrome, Internet Explorer, or Mozilla Firefox will work
fine.
2. Go to snap.berkeley.edu
3. Click on the Run Snap! Now button, located at the top of the web page (Figure 1).

2
The Snap! Program should appear as shown below (Figure 2).

INTRODUCING: SNAP!

Figure 2

Quick definitions (Figure 2):

Sprite: The arrow. You program actions for this arrow to perform.
Stage: The area of space surrounding the Sprite what the Sprite exists in.
Control box: Contains colored controls.
Control: the category of actions you want the Sprite to perform on the Stage
Control blocks: Once a Control is selected, these are the lists of same-color blocks that
perform that category of action. They act as commands. Blocks that work together snap.
together like puzzle pieces and create a script of instructions.
Scripts: The gray space with the tab title Scripts. This is where you drag and snap Control
Blocks together to make consecutive instructions.

3
 Creating the GV symbol
* Drag each button below the previous button so that it attaches like a chain.
* Do not click on the list of commands until all commands have been placed on script.
1. Locate the control box.

2. Click on the Control tab.

a. Select the when clicked command.
b. Drag the command onto the script.
c. Select and drag the wait ___ secs command, then type .5 in.
i. Place this new command below the previous command.

3. Click on the Pen tab.

i. This is what will allow you to start drawing with the sprite (pen down button) but
first we are going to choose a color for the symbol.
a. Select and drag the green set pen color to ____ command onto the script.
b. Change pen color to a dark blue similar to the GV symbols blue.
c. Select the set pen size to ____ command and type 12 into the space on the
button.
d. Drag that command over so that it sits just below the set pen color to ___
button.
i. It should automatically attach itself.
e. Drag the pen down command over to the script so
that it attaches below the Set pen size to ___ button.

4. Click on the Motion tab..

a. Select the turn clockwise ___degrees command
with the arrow pointed to the right.
b. Type 120 in.
c. Drag the command under the pen down button on
the script.

5. Click on the Control tab.

a. Repeat Step 2C.

6. Click on the Motion tab.

a. Select move _ steps command.
b. Drag the command onto the script.
c. Type in 30.

7. Click on the Control tab.

a. Repeat Step 2C.

8. Click on the Motion tab.

4
 a. Select the turn clockwise _ degrees command.
b. Drag the command onto the script.
c. Type 120 in.

9. Click on the Control tab.

a. Repeat Step 2C.

10. Click on the Motion tab.

a. Select the move _ steps command.
b. Drag the command onto the script.
c. Type 45 in.

11. Click on the Control tab.

a. Repeat Step 2C.

12. Click on the Motion tab.

a. Select the turn clockwise___degrees button with the arrow pointed to the
right.
b. Drag the command onto the script.
c. Type 120 in.

13. Click on the Control tab.

a. Repeat Step 2C.

14. Click on the Motion tab.

a. Select move _ steps command.
b. Drag the command onto the script.
c. Type 64 into the blank.

15. Click on the Control tab.

a. Repeat Step 2C.

16. Click on the Motion tab.

a. Select point in direction _ command.
b. Drag the command onto the script.
c. Type 180 into blank.
d. Select move _ steps command.
e. Drag the command onto the script.
f. Type 20 into the blank.

17. Click on the Control tab.

a. Select repeat _ command.
b. Drag the command onto the script.
c. Type 17.5 into the blank.

5
18. Click on the Motion tab.
a. Select turn clockwise _ degrees command.
b. Drag and hover the turn_degrees command inside the bars of the repeat block.
A bar will appear.
c. Drop the command inside the repeat block.
d. Select move _ steps command.
e. Type 14 in the blank.
f. Drag and connect command into the open space under the repeat command
on the script.

19. Click on the Pen tab.

a. Select pen up command.
b. Drag the command onto the script.

20. Click on the Motion tab.

a. Select move _ steps command.
b. Drag the command onto the script.
c. Type 80 into the blank.

21. Click on the Looks tab.

a. Select say _ command.
b. Type Go Lakers! into the blank. The space will appear as a bullet.
c. Drag the command onto the script.
i. Your script should look like Figure 5.

22. Click on the list of commands you entered on the script and watch the Grand Valley logo
come to life.

6
If your GV logo appears distorted
If you happened to click your list early, the Grand Valley logo will appear distorted. To clear the
stage, drag the commands pictured below onto the stage into a separate list than the steps
already there.
1. Click on the blue Motion tab.
a. Select go to x:0 y:0.
b. Drag the command onto the script.
c. Select point in direction 90.
d. Drag the command onto the script.

2. Click on the Looks tab.

a. Select say Hello! command.
b. Drag the command onto the script.
c. Clear the Hello! in the box so that the box is blank.

3. Click on the Pen tab.

a. Select clear command.
b. Drag the command onto the script.

4. Click on the list of commands to see the GV logo come to life.

7
Conclusion
Congratulations! You have successfully made the GV logo using the Snap!
program. Now that you have taken the first step in learning computer
programming, you can continue your education to learn more complex coding.
Figure 6 will show the final design achieved in this program.

Final Design

Figure 6