Snap! Crash Course

repeat (4) times
{
    move (100) steps
    turn ↻ (90) degrees
} Once you've learned how to program in one language (at least any language that your AP Computer Science Principles class would have used), it's much easier to learn another language. And Snap! will be especially easy to pick up quickly because it's all visual; you just snap blocks together, and you don't have to worry about any syntax (parentheses, commas, semicolons, quotation marks, etc.).

This page is designed to get you up and running in Snap! as quickly as possible. It will help you pick up Snap! quickly if you take the time to read (or at least skim) this whole page. Click the links below to learn about each topic.

Getting Started in Snap!

You may want to create a Snap! account so you can save and access all your Snap! projects in the cloud. (You don't need an account; you could save all your Snap! projects on your own computer and drag them onto a Snap! window to load them.) Instructions for creating an account and logging in to and out of your Snap! account are on the first page of the Beauty and Joy of Computing CSP curriculum:

To save a project, choose "Save" from the Snap! File menu, File menu button (or press control-s).

To load a project, choose "Open..." from the Snap! File menu (or press control-o), select the project you wish to open, and click "Open." Always remember to save the project you were working on before opening a new one.

image of the snap interface with the toolbar at the top labeled 'Tool Bar'; the palette running down the left side labeled 'Palette' and several of the blocks inside the palette labeled 'Blocks'; the central column (with a pair of blocks snapped together) labeled 'Scripting Area'; the white rectangle in the upper right but below the toolbar labeled 'Stage' and the arrowhead in the center of the stage saying 'Hello World!' labeled 'Sprite'; the gray rectangle in the lower right below the stage (which contains small copies of both the sprite and the stage) labeled 'Sprite Corral'

There are two primary ways to share your Snap! projects: sending an XML file containing a copy of your project; and creating a link to your active project file.

Code-Building Basics

In Snap!, you drag and attach blocks together to create your scripts. You can learn more about a particular block by right-clicking it (or control-clicking it on a Mac) and selecting "help..." which will bring up a little window with information about how the block works. You can also just click a block to see what it does. Click for an example of accessing the Help menu for a pen block.

right-click menu with entries 'help' and 'hide' help screen for the SET PEN block

Every script you build in Snap! belongs either to a sprite or to the stage. Identifying words in block names such as "I" or "my" refer to that sprite or to the stage (depending on which one is selected in the sprite corral):
my (costume) reporting a small picture of a white bear waving when i am (clicked)

Some blocks have little arrows that allow to you to control the inputs:

There are several different block shapes in Snap!, and they each have their own meaning and places they can be used:

Of course, you can use global variables (more about them below) to share information between sprites, but you can also send messages between your sprites or have one sprite tell another sprite what to do:

There are several kinds of variables in Snap!. Here are the most important:

Because Snap! is a visual language (not a text-based language), you can use multi-word variable names. It will be clear to you and others when reading the code that those separate words are all part of the same variable name:
set (player 1 score) to ((player 1 score) + (points from this round))

To program your own block:

  1. Create a new block. There are several ways to start: click make a block button near the end of the palette, click the + sign in the top right corner of the palette (shown below), or right-click (or control-click on a Mac) on any empty spot in the scripting area and choose "make a block..." (shown below).
    plus sign atop palette make a block option
  2. Choose the color (palette), type the title, select the shape (block type), and click OK.
    image of 'Make a block' dialog box with palette with 10 menus (Motion, Looks, Sound, Pen, Lists, Control, Sensing, Operators, Variables, Other) labeled 'Choose a color (a palette)'; a text box labeled 'Type a title for your block.'; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.'; two radio boxes ('for all sprites', which is checked, and 'for this sprite only', which is not checked) with no label; and two buttons (OK and Cancel) labeled 'Click OK.'
    • Just as you can use multi-word variable names in Snap!, you can also use multi-word names for your custom blocks (procedures).
  3. Program your block. Drag in blocks from the palette, snap them in after the hat block, and click OK.
    • Note that if you create a reporter or predicate block, the block editor will open with a report block already attached to the hat block. All of your block code will go between these two blocks or inside the report block; whatever input you give to report will be the value reported (returned) by your new block.

  1. Create a new block, choose the color and shape, type the block name and a label for your input, and click OK.
    image of the 'Make a Block' window with the Motion palette selected and 'draw square, size:' typed into the title input space
  2. Click a plus sign (+) between (or before or after) the words in your hat block where you want the input slot to appear. Then, type the name of the input, and click OK.
    hat block labeled 'draw square, size:' with a dark circle with a plus sign in it just after 'size:' Create Input Name dialog box with 'size' typed into the text space and 'Input name' selected
    • You can also add text to the name of the block by clicking a plus sign: Just change the option in the "Create input name" menu from "Input name" to "Title text."
    • If you can't see the plus signs, hover your mouse pointer over where they would be and they will appear one at a time, or just turn off "Plain prototype labels" in the Snap! Settings menu:
      image of the Snap! Settings menu showing the 'Plain prototype labels' option highlighted and checked; there is a hover-over bubble that says 'uncheck to always show (+) symbols in block prototype labels'
  3. Program your block, dragging in the input variable(s) wherever you need it (them).

There are several kinds of input slots that tell the programmer what kind of data is expected:

  • Number: move 'rounded number input slot' steps( ) 'rounded number input slot' ( )
  • List: length of 'list input slot'is 'list input slot' empty?
  • Boolean: not 'predicate input slot'wait until 'predicate input slot'
  • Group of commands: forever 'c-shaped input slot'if 'predicate input slot' 'c-shaped input slot'
  • Any type: say 'rectangular text input slot'join 'rectangular text input slot' 'rectangular text input slot'

You can chose the input type for the input variables in your custom blocks by clicking the right arrow (▸) to the right of the "Input name" option in the "Create input name" window (as shown below). It's not necessary to set an input type in Snap!. If you don't select one, your input slot will accept any type of input.
Create Input Name dialog box with a read circle around the right-facing arrow just to the right of the 'Input name' option

Snap! uses lists to group a bunch of values. If you learned to program in another language, you may have used arrays. In Snap!, lists are ordered, and the first item in a list is item number 1. (Some other languages count items from 0 instead of from 1, so
myList[3]
is item (4) of (my list).)
To create a list, use the list ( ) block. Snap! provides the standard list processing functions:
map 'reporter input slot' over 'list input slot'
keep items 'predicate input slot' from 'list input slot' (called
filter
in some other languages)
combine 'list input slot' using 'reporter input slot' (called
reduce
in some other languages)
The gray rings are the equivalent of
function
or
lambda
in other languages. Instead of requiring a parameter name (the
(x)
in many function definitions), Snap! just uses an empty input slot to indicate where the argument should be plugged in:
map (join( )(s)) over (list {cat, dog, bird}) reporting {cats, dogs, birds}

You can read about several other commonly used Snap! list blocks on the Snap! Cheat Sheet page:
item () of 'list input slot' insert ( ) at (1) of 'list input slot' add ( ) to 'list input slot' delete (1) of 'list input slot' replace item (1) of 'list input slot' with ( ) for each (item) in (list)

Some other common list functions aren't built into Snap!, but are available in a library: Select "Libraries..." from the Snap! File menu, and choose "List utilities" near the top of the list.

Python users can use Snap! lists to recreate the behavior of other data aggregates:

Snap! has libraries (collections of additional procedures) for many things, including lists, accessing data on the Internet, external devices, pen colors, audio, and maps. Click for an example of opening the "Words, sentences" library in Snap!

Snap! File menu opened with cursor over 'Libraries' Snap! 'Import library' dialog box highlighting 'Words, sentences' library

You can export one or more blocks into an XML file on your computer, which you can then import into another project or share with another programmer for them to use.

To export:

  1. Open the Snap! project with the blocks you want to export, and choose "Export blocks..." from the Snap! File menu.
  2. Select only the block(s) you wish to export. You can either deselect the blocks you don't need exported, or you can right-click (control-click on a Mac) the background in the window, choose "none," and then select only the ones you want.
  3. Click "OK." An XML file will download.

To import:

  1. Open the Snap! project where you want to use the blocks from the XML file.
  2. To import, either drag the XML file into the Snap! window or choose "Import..." from the Snap! File menu and locate the file on your hard drive.
  3. Test the blocks that you imported:
    1. Find the imported block(s) at the end of the palettes that contain them.
    2. Try each one to make sure it runs properly.

even? (number#){report(Obsolete!)} If you ever see this Obsolete! block (shown right) in code you have imported, it means that a block used by the block you imported was not included in the export. You'll have to go back to the original project and export again being sure to select all of the blocks needed by the blocks you want.

Here's how to call a procedure from inside itself in Snap!:

  1. Create a new procedure, and click "Apply" in the Block Editor.
  2. Drag your new procedure out of the palette and use it in your block.

Click for an example of a recursive command that draws one triangle, and at each corner draws a smaller triangle, and at each corner of those draws another smaller triangle and so on until it reaches the last requested level.

draw triangle fractal with (levels #) levels and starting size (size #) {
        repeat (3) {
            move (size) steps
            if (levels > 1) {
                draw triangle fractal with (levels - 1) levels and starting size (size / 2)
            }
            turn right (120) degrees
        }
    }
This instruction:
draw triangle fractal with (4) levels and starting size (100)
Makes this image:
An image of a triangle fractal with 4 levels. That is, one triangle, and at each corner a smaller triangle, and at each corner of those another smaller triangle, and at each of those corners another smaller triangle. There are 40 triangles total.

Click for an example of recursive reporter that reports the number of triangles drawn by the recursive command shown above (if you clicked the link).

number of triangles in level (levels #) fractal {
        if (levels > 1) {
            report ((3 × number of triangles in level (levels  - 1) fractal) + 1)
        }
        report 1
    }
This expression reports the number of triangles in the image for the draw triangle fractal with (4) levels block shown above:
number of triangles in level (4) fractal reporting 40

Recursion also lets you traverse a list, just as for each does, but without the use of index variables. Instead, you split the list into its first item and everything else:
item (1) of (list (apple) (banana) (orange) (grape)) reporting 'apple' all but first of (list (apple) (banana) (orange) (grape)) reporting [banana, orange, grape]

You compute some function of the first item, and combine that with a call to the same procedure you're writing, but on the smaller list that remains: plurals (words ‘list input symbol’) {
        if (is (words) empty?) {
            report (list)
        } else {
            report ((join (item (1) of (words)) (s)) in front of (plurals (all but first of (words))))
        }
    } plurals (list (apple) (banana) (orange) (grape)) reporting [apples, bananas, oranges, grapes]

Debugging and Organizing Snap! Code

"Visible Stepping" allows you to control how quickly Snap! steps through the blocks of your code.

Visible stepping can be useful as you read someone else's code because you can watch it run at human speed instead of computer speed. It's also useful in debugging your own code when something goes wrong.

You can also use pause all to place breaks in your code. When your program reaches this block, every script that is running will pause until you click the yellow Run button (play button). Click for an example of using pause all.

Animation on how to use pause all block

There are several ways to see the value of variables and sprite attributes while your code is running:

You can also use the say for block to get information about the state of your program while it's running. Click for an example of using say for to debug a rectangle drawing script.

Animation on how to use say for blocks for debugging an erroneous rectangle construction.

One way to avoid having bugs in your program in the first place is to keep your code organized:

You can add comments to your Snap! code by right-clicking (or control-clicking) in the Scripts area and choosing "add comment." Click for an animation that shows how.

Animation on how to  add a comment to a block and how a comment added to a hat block becomes that custom block's help message.

You can create a help message for your block by attaching a comment to the hat block in the Block Editor. Then people using your block can find out what your block does without having to look inside. These work just like the help messages for built-in blocks.

block definition for a square-drawing block called 'square' with a comment attached to the hat block that says, 'This block draws a square. The input says how big to make the sides of the square.'
the 'square' block with the right-click menu open and the 'help...' option selected
a Help window with a picture of the 'square' block followed by the text 'This block draws a square. The input says how big to make the sides of the square.' and then an 'OK' button

Learning More

You can learn more about programming with Snap! on the Snap! Cheat Sheet, by reading some of the very thorough Snap! Reference Manual, or by connecting with other Snap! programmers on the Snap! community website.

There is also a "find blocks button" in the palette in case you are thinking of a block you can't find:
image of the magnifying glass icon at the top right of the palette just under the eight palette menus; there is a hover-over bubble that says 'find blocks...'