Introduction
SNAP, which used to be called BYOB, is a visual, drag-and-drop programming language. It is an extended reimplementation of Scratch. In this version you can
Build Your Own Blocks. It also features first class lists, first class procedures, and continuations.
SNAP! runs in your browser. It is implemented using Javascript, which is designed to limit the ability of browser-based software to affect your computer, so it's safe to run even other people's projects, even if you don't trust their competence or good intentions. It also means that you can run SNAP on an iPad.
SNAP! is presented by the University of California at Berkeley. It was developed by Jens Mönig at MioSoft Corporation, with design input and documentation by Brian Harvey at Berkeley, and contributions by students at Berkeley and elsewhere.
You can either run
SNAP from your browser or
download BYOB
By constructing your own blocks, you can learn about programming concepts, such as
- defining procedures and functions
- passing parameters
- procedure/function specific variables
- recursion
- "atomicity"
Types of Blocks
- command
Not a function, but rather a do something block
- reporter (function)
this function can return an type of output.
- predicate (function)
this function returns a boolean
-
Make a simple command block
- Open SNAP
- Create an account
- Check your email, enter the password
- Change your password to something more memorable:
- Navigate to the
Variables palette.
- In the bottom of the palette you will find a Make a block block. Click on it.
- The make a block dialog box will open. Now, you get to choose which tab the block should go into. Because your block will be building a square, choose Motion.
- When you selected Motion, the command block became blue. You now have the option of making blocks of different shapes. Right now, however, you are just going to make a (regular) command block.Name the block
- When you click OK, you should see the block editor below:
-
Use the blocks from the regular menus to create a script that draws a square:
- Test it out.
- Go back and edit the block. Right-click on the new block and select edit to go back to the block editor.
-
In the Block Editor, notice the plus signs (+). When you click on these plus signs, you can add more text or arguments. When you click on the text between the plus signs, you can delete or modify that text. Click on the plus sign at the far right as shown below:
- Drag the variable size down into the move block. Whenever we need a new copy of a variable, we just grab the copy from that variable in the top row.
-
Press OK and test by adding a value:
- If everything is working, add a clear block, CTRL+click on the custom block and edit it so that now you are drawing a polygon of sides with size
- Save your file in the cloud
Make a reporter block
Your reporter block will take two integers and return the max of the two inputs:
- Click Make a block
- Select the Operators tab. You want a reporter block, so click on that option as well. As the name implies, reporter blocks can report a value.
- Name the function. Use the % shortcut for making input variables
- Press OK. You should see this:
- To keep track of the value to be reported, you are going to make another variable.
Use a Script Variables block. You can click on the name of the variable (a) and change it to bigger value.
- Use an if/else block to set the variable bigger value to either x or y.
Drag a set block into the Block Editor from the regular variables menu.
You can click on the down arrow on the set block to select bigger value.
Then, drag the bigger value variable into the box next to report:
- Press OK. Drag out to test:
- Click to test:
- Try adding strings to the max function. What happens?
Maybe this is true or maybe it isn't. I don't think Clark would agree
- CTRL+click on the block to edit it:
- Click on the x, then click on the right arrow
- Select Number
- Set a default value:
- Click OK and repeat for y
- Drag a new block out to test
Create a min function
Go back to the draw block and make sure that it only accepts numbers
Create a new block using the max block that finds the largest of three numbers. This is called Composition. hint:Use two max blocks in the report block.
Make a three-argument addition operator that only accepts numbers:
Make three-argument join operator that has the default values hacking, is, awesome!, and only accepts text:
Make a predicate block
This block reports either true or false. You have a "greater than" operator (>), an "equal" operator (=), and a "less than" operator (<), but now you get to create
a new "greater than or equal to" (>=) operator.
- Click Make a block
- Select the Operators tab. You want a predicate block, so click on that option as well:
- Name the block
- Press OK
- Make sure the inputs are numbers
- Build:
- Click OK and test the block.
Create a new predicate block that determines if a number is between two other numbers. The block should return true if the first number is between the two numbers or if it is equal to either of the numbers:
Variables
- Normal/Global variables can be used by every sprite throughout your program.
- Sprite Specific Variables: are variables that will show up as variables listed below the line in the variables tab. The recommendation is to not use these variables in blocks.
Sprite specific:
- Arguments to a function: A variable set by the person calling the function, also referred to as "input". This can ONLY be used within the block editor.
- Script Variables: The "script variable" block gives you a variable that can be used inside of a script. These can only be used in that particular script. The script could be a block script (shown below) or a regular script.
If you name block variables the same as global variables, you will not be able to use the global variables in your blocks. The block variables "block" access to regular variables with the same name.
When you use a variable named x inside the block editor, Scratch has to figure out which variable you are referring to. It starts by looking at the block variables. If there is one there, it assumes you mean that variable. If there is no variable in the block that has that name, it assumes you mean the regular variable.
Assignment
Below is some code to draw a tic-tac-toe board. Your goal is to create functions that make this code simpler. One important thing to keep in mind is to give your new functions really intuitive names, so that it is easy to read the code and understand what it does.
Here is a possible solution:
More Abstraction
This assignment is not just about drawing; it is also about practicing abstraction. You will draw the following brick wall by implementing the blocks listed below.
You must implement these blocks and adhere to the abstraction described below.
There are two kinds of rows in this brick wall:
- Row A:
- Row B:
The big idea is that there are three levels of abstraction.
At the lowest level of abstraction (Level 3):
- You need to figure out how to draw individual bricks, small bricks and spaces.
- This level of abstraction contains the following blocks:
- The Draw Brick block, which draws a single brick. (Hint: a brick is drawn by setting the pen size to about 10)
- The Draw Small Brick block, which draws the small brick for the edges of row B. Note that this brick will not be exactly half as long as the full brick. Part of this homework is figuring out how long the "small brick" should be.
- The Draw Space block, which draws a space between each brick or small brick.
At the middle level of abstraction (Level 2):
- You can use the functionality provided by the bottom level of abstraction to make entire rows of bricks.
- The rows referred to as "Row A" and "Row B" should look like the rows shown above.
- This level of abstraction contains the following blocks:
- The Initialize Pen block, which should initialize the pen color and size.
- The Initialize Character Position and Direction block, which should initialize the position and direction of the character.
- The Draw Row A block, which should draw a single copy of Row A.
- The Draw Row B block, which should draw a single copy of Row B.
- The Transition between Row A and B with __ space block, which should transition between the end of Row A and the beginning of Row B, leaving a space as wide as the number of pixels specified by the input argument.
- The Transition between Row B and A with __ space block, which should transition between the end of Row B and the beginning of Row A, leaving a space as wide as the number of pixels specified by the input argument.
At the highest level of abstraction (level 1)
- You will put together the full brick wall using only the functionality provided by the middle level of abstraction.
- This level of abstraction contains only the Draw a Brick Wall with __ rows block, which draws a brick wall with the specified number of rows.
In summary, you should implement the following blocks:
Whenever you need to refer to a number in the program, use a variable. This is generally considered good style, because you can use the same variable in multiple places in your program, and you only need to change the value of the variable to change it in multiple places at once.
Recursion
A recursive function calls itself.
It is essential that the recursion have a base case, that is, some small(est) case that the block can handle without using recursion.Without a base case, the recursion would run forever, calling itself over and over.
Don’t try to trace the exact sequence of steps that the computer follows in a recursive program. Instead, imagine that inside the computer there are many small people, and if Theresa is drawing a tree of size 100, depth 6, she hires Tom to make a tree of size 70, depth 5, and later hires Theo to make another tree of size 70, depth 5. Tom in turn hires Tammy and Tallulah, and so on. Each little person has his or her own local variables size and depth, each with different values.
To save a file locally, choose the XML Export option.
This process requires two steps. Projects saved in this second way are normal files on your computer and can be shared, opened in any browser, and have no size limitation.
From the file menu, choose
Export project... The entire Snap! window will disappear, replaced by a screenful of code. Don’t panic! This is what's supposed to happen. You are looking at your project, in a notation called
XML. The main reason it looks like gibberish is that it includes an encoding of the pictures and other media in the project. If you look through the XML, the actual scripts of the project are pretty readable, although they don't look like blocks. Snap! has opened a new browser tab for this XML text; the actual Snap! window is still there, hiding in its original tab.
Once you're looking at that tab, use your browser's Save command (in its File menu, or usually with a shortcut of command-S (Mac) or control-S (everything else). You can choose a filename for it, and it'll be saved in your usual Downloads folder. You can then close that tab and return to the Snap!.
Another way to save your file is using Cloud Storage.
Click on the Cloud button (  ) in the Tool Bar and sign in.
Once you’ve saved a project, you will probably want to load it at some point. There are two ways to do this:
- If you saved the project in your online Snap! account, choose the Open... option from the File menu. Choose the Cloud button, then select your project from the list in the big text box and click OK.
- If you saved the project as an XML file on your computer, choose Import... from the File menu. This will give you an ordinary browser file-open window, in which you can navigate to the file as you would in other software. Alternatively, find the XML file on your desktop, and just drag it onto the Snap! window.
The second technique above also allows you to import media (costumes and sounds) into a project. Just choose Import... and then select a picture or sound file instead of an XML file.
