1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
\documentclass{report}
\input{../common/defs.tex}
\begin{document}
\title{\Snap{} Reference Manual}
\author{Brian Harvey \and Jens M\"{o}nig}
\date{}
\maketitle
\tableofcontents
\chapter*{}
\section*{Acknowledgements}
We have been extremely lucky in our mentors. Jens cut his teeth in the company of the Smalltalk pioneers: Alan Kay, Dan Ingalls, and the rest of the gang who invented personal computing and object oriented programming in the great days of Xerox PARC. He worked with John Maloney, of the MIT Scratch Team, who developed the Morphic graphics framework that's still at the heart of \Snap{}. The brilliant design of Scratch, from the Lifelong Kindergarten Group at the MIT Media Lab, is crucial to \Snap{}.
\textbf{\emph{Our earlier version, BYOB, was a direct modification of the Scratch source code. \Snap{} is a complete rewrite, but its code structure and its user interface remain deeply indebted to Scratch. And the Scratch Team, who could have seen us as rivals, have been entirely supportive and welcoming to us.}}
Brian grew up at the MIT and Stanford Artificial Intelligence Labs, learning from Lisp inventor John McCarthy, Scheme inventors Gerald~J. Sussman and Guy Steele, and the authors of the world's best computer science book, \textit{Structure and Interpretation of Computer Programs}, Hal Abelson and Gerald~J. Sussman with Julie Sussman, among many other heroes of computer science.
\textbf{\emph{In the glory days of the MIT Logo Lab, we used to say, ``Logo is Lisp disguised as BASIC.'' Now, with its first class procedures, lexical scope, and first class continuations, \Snap{} is Scheme disguised as Scratch.}}
We have been fortunate to get to know an amazing group of brilliant middle school (!\@) and high school students through the Scratch Advanced Topics forum, several of whom have contributed code to \Snap{}: Kartik Chandra, Nathan Dinsmore, Connor Hudson, and Ian Reynolds. Many more have contributed ideas and alpha-testing bug reports. UC Berkeley students who've contributed code include Michael Ball, Achal Dave, Kyle Hotchkiss, Ivan Motyashov, and Yuan Yuan. Contributors of translations are too numerous to list here, but they're in the ``About...'' box in \Snap{} itself. This work was supported in part by the National Science Foundation grant 1143566, and in part by MioSoft.
\begin{titlepage}
\begin{center}
\bf \Huge \Snap{} Reference Manual \\
\huge Version 4.0
\vspace{40pt}
\end{center}
\Snap{} (formerly BYOB) is an extended reimplementation of Scratch (\url{http://scratch.mit.edu}) that allows you to Build Your Own Blocks. It also features first class lists, first class procedures, and continuations. These added capabilities make it suitable for a serious introduction to computer science for high school or college students. To run \Snap{}, open a browser window and connect to either \url{http://snap.berkeley.edu/run} to start with a minimal set of blocks or \url{http://snap.berkeley.edu/init} to load a small set of additional blocks (a little slower startup, but recommended for convenience and assumed in this manual).
\end{titlepage}
\chapter{Blocks, Scripts, and Sprites}
This chapter describes the \Snap{} features inherited from Scratch; experienced Scratch users can skip to section~\ref{sec:nesting-sprites}.
\Snap{} is a programming language---a notation in which you can tell a computer what you want it to do. Unlike most programming languages, though, \Snap{} is a visual language; instead of writing a program using the keyboard, the \Snap{} programmer uses the same drag-and-drop interface familiar to computer users.
Start \Snap{}. You should see the following arrangement of regions in the window:
\begin{center}
\includegraphics[width=\textwidth]{window-regions}
\end{center}
(The proportions of these areas may be different, depending on the size and shape of your browser window.)
A \Snap{} program consists of one or more \emph{scripts}, each of which is made of \emph{blocks}. Here's a typical script:
\label{fig:typical-script}
\bigpic{typical-script}
The five blocks that make up this script have three different colors, corresponding to three of the eight \emph{palettes} in which blocks can be found. The palette area at the left edge of the window shows one palette at a time, chosen with the eight buttons just above the palette area. In this script, the gold blocks are from the Control palette; the green block is from the Pen palette; and the blue blocks are from the Motion palette. A script is assembled by dragging blocks from a palette into the \emph{scripting area} in the middle part of the window. Blocks snap together (hence the name \Snap{} for the language) when you drag a block so that its indentation is near the tab of the one above it:
\bigpic{snapping-blocks}
The white horizontal line is a signal that if you let go of the green block it will snap into the tab of the gold one.
\subsection{Hat Blocks and Command Blocks}
At the top of the script is a \emph{hat} block, which indicates when the script should be carried out. Hat block names typically start with the word ``\code{when}''; in this example, the script should be run when the green flag near the right end of the \Snap{} tool bar is clicked. (The \Snap{} tool bar is part of the \Snap{} window, not the same as the browser's or operating system's menu bar.) A script isn't required to have a hat block, but if not, then the script will be run only if the user clicks on the script itself. A script can't have more than one hat block, and the hat block can be used only at the top of the script; its distinctive shape is meant to remind you of that.
The other blocks in this script are \emph{command} blocks. Each command block corresponds to an action that \Snap{} already knows how to carry out. For example, the block \inlinepic{move-10-steps} tells the sprite (the arrowhead shape on the \emph{stage} at the right end of the window) to move ten steps (a step is a very small unit of distance) in the direction in which the arrowhead is pointing. We'll see shortly that there can be more than one sprite, and that each sprite has its own scripts. Also, a sprite doesn't have to look like an arrowhead, but can have any picture as a costume. The shape of the \code{move} block is meant to remind you of a Lego\texttrademark{} brick; a script is a stack of blocks. (The word ``block'' denotes both the graphical shape on the screen and the procedure, the action, that the block carries out.)
The number~10 in the \code{move} block above is called an \emph{input} to the block. By clicking on the white oval, you can type any number in place of the 10. The sample script on page~\pageref{fig:typical-script} uses 100 as the input value. We'll see later that inputs can have non-oval shapes that accept values other than numbers. We'll also see that you can compute input values, instead of typing a particular value into the oval. A block can have more than one input slot. For example, the \code{glide} block located about halfway down the Motion palette has three inputs.
Most command blocks have that brick shape, but some, like the \code{repeat} block in the sample script, are \emph{C-shaped}. Most C-shaped blocks are found in the Control palette. The slot inside the C shape is a special kind of input slot that accepts a \emph{script} as the input. In the sample script, the \code{repeat} block has two inputs: the number 4 and the script
\bigpic{typical-script-inner}
\section{Sprites and Parallelism}
\subsection{Costumes and Sounds}
\subsection{Inter-Sprite Communication with Broadcast}
\section{Nesting Sprites: Anchors and Parts}
\label{sec:nesting-sprites}
\section{Reporter Blocks and Expressions}
\section{Predicates and Conditional Evaluation}
\section{Variables}
\subsection{Global Variables}
\subsection{Script Variables}
\section{Etcetera}
\chapter{Saving and Loading Projects and Media}
\section{Local Storage}
\subsection{Localstore}
\subsection{XML Export}
\section{Cloud Storage}
\section{Loading Saved Projects}
\chapter{Building a Block}
\section{Simple Blocks}
\subsection{Custom Blocks with Inputs}
\section{Recursion}
\section{Block Libraries}
\chapter{First Class Lists}
\section{The list Block}
\section{Lists of Lists}
\section{Functional and Imperative List Programming}
\section{Higher Order List Operations and Rings}
\chapter{Typed Inputs}
\section{Scratch's Type Notation}
\section{The \Snap{} Input Type Dialog}
\subsection{Procedure Types}
\subsection{Pulldown inputs}
\subsection{Input variants}
\subsection{Prototype Hints}
\subsection{Title Text and Symbols}
\chapter{Procedures as Data}
\section{Call and Run}
\subsection{Call/Run with inputs}
\subsection{Variables in Ring Slots}
\section{Writing Higher Order Procedures}
\subsection{Recursive Calls to Multiple-Input Blocks}
\section{Formal Parameters}
\section{Procedures as Data}
\section{Special Forms}
\subsection{Special Forms in Scratch}
\chapter{Object Oriented Programming}
\section{Local State with Script Variables}
\section{Messages and Dispatch Procedures}
\section{Inheritance via Delegation}
\section{An Implementation of Prototyping OOP}
\chapter{The Outside World}
\section{The World Wide Web}
\section{Hardware Devices}
\section{Date and Time}
\chapter{Continuations}
\section{Continuation Passing Style}
\section{Call/Run w/Continuation}
\subsection{Nonlocal exit}
\chapter{User Interface Elements}
\section{Tool Bar Features}
\subsection{The \Snap{} Logo Menu}
\subsection{The File Menu}
\subsection{The Cloud Menu}
\subsection{The Settings Menu}
\subsection{Stage Resizing Buttons}
\subsection{Project Control Buttons}
\section{The Palette Area}
\subsection{Context Menus for Palette Blocks}
\subsection{Context Menu for the Palette Background}
\section{The Scripting Area}
\subsection{Sprite Appearance and Behavior Controls}
\subsection{Scripting Area Tabs}
\subsection{Scripts and Blocks Within Scripts}
\subsection{Scripting Area Background Context Menu}
\subsection{Controls in the Costumes Tab}
\subsection{The Paint Editor}
\subsection{Controls in the Sounds Tab}
\section{Controls on the Stage}
\section{The Sprite Corral and Sprite Creation Buttons}
\end{document}
|
