Introduction to

Snap! Programming Language

In this week
➢ Introduction to programming
➢ Programming languages
➢ Snap! programming language
➢ Example programs in Snap!
➢ Computational thinking
➢ Algorithms
1
 Introduction to Programming
• Programming is a process of writing clearly stated
instructions to be fed to a computer so that the
computer can read and understand the
instructions and execute them
• In other words, programming is the process of
communicating with a computer with the aim of
instructing a computer do something
• In order to communicate with a computer
therefore we need a language that the computer
can understand
2
 Programming Languages
• Programming languages are clearly stated set
of instructions that convert human readable
languages to computer instructions that the
computer processor can understand and
execute
• Typical programming languages include
– Text based languages: C, C++, Java, Python,…
– Graphical based languages: Snap!, Scratch,…

3
 Snap! Programming Language
• A graphical based programming language
developed and used in Berkeley, University of
California
• Block based programming where a block is a
command to do a task
• Several blocks are dragged and snapped
together to create a Snap! Program
• Can be used online or offline

4
 Snap! Programming Language
• In order to use Snap! online with Internet connectivity,
open the following webpage on your browser
[Link]
• Then click on the Run Snap! Now button
• In order to use Snap! offline without Internet
connectivity, do the following
– Download the latest Snap! Release from
[Link] and
unpack the contents of the archive to your local disk
– Open the file [Link] in your browser
– Click on the Run Snap! Now button

5
 Snap! Programming Language
• Once we start the Snap! Programming
webpage (either online or offline) then the
following window will open

6
 Snap! Programming Language
• The Snap! window has a drawing area shown below

• This area is called the stage containing an arrow shaped

object called a sprite which is like a drawing pen used to
draw some graphics on the stage area

7
 Snap! Programming Language
• Another important region is the palette area
that contains eight palettes as shown below

8
 Snap! Programming Language
• Briefly these eight palettes are
– Motion: A palette containing blocks (or commands) that
control the sprite movements
– Looks: for manipulating the sprite looks
– Sound: for working with sounds
– Pen: for manipulating the sprite (drawing pen) such as put
it up or down or change its color or size, etc
– Control: for controlling Snap! Programs
– Sensing: for sensing user interaction with a Snap! program
using mouse or keyboard
– Operators: for performing some operations such as
addition, multiplication, etc
– Variables: for working with variables (discussed later)
9
 Snap! Programming Language
• Each palette contains several blocks that are
used to do the actions particular to the palette
• For example, the Motion palette contains the
blocks
– move: to move the sprite certain steps
– turn: to turn the sprite some angle clockwise or
counter clockwise
– goto: to move the sprite to a specified location
– etc

10
 Snap! Programming Language
• The Snap! window also has the region shown below

• This is the region where we put the building blocks of

our Snap! program
11
 Snap! Programming Language
• The output of a Snap! program is displayed on
the stage region
• When Snap! starts, the sprite is placed at the
center of the stage and is directed to the right
• Moving the sprite therefore moves it to the
right direction
• We can change its direction using the turn
command so that to move it up, down, or left
12
 Snap! Programming Language
First Example
• The following is a very simple Snap! program
to display graphically a horizontal line
• The program is described below

13
 Snap! Programming Language
First Example
• Every Snap! program is made up of blocks that
are dragged from the palette area and then
snapped together to form a program
• A program starts by specifying how the program
will be executed once it is completed
• The block to specify how a program will be
executed is found under the control palette
• In our example, we’ve selected the when clicked
block so that our program will be executed by
clicking on any of the blocks of the program
14
 Snap! Programming Language
First Example
• Next, we select a block that commands the
pen to be down
– When we start Snap!, the pen is up
– When the sprite is up, the pen doesn’t draw on
the stage even if it is moved from one position to
another
– Thus whenever we need to draw something on
the stage, we first need to put the pen down and
then move it

15
 Snap! Programming Language
First Example
• Next, we have selected the move 100 steps
command
• This moves the pen from its current position
100 steps in the direction it is facing which is
towards right
• Thus it will draw a line 100 steps long
• Click on the blocks to execute the program
• The output of the program (which is simply a
drawing of a line) is shown below
16
 Snap! Programming Language
First Example

• After drawing the output, the sprite will stay on its new
position
• Thus clicking on the blocks again will execute the
program again and will keep on moving further right
extending the line

17
 Snap! Programming Language
First Example
• It is customary to clear the stage area every
time a program starts execution so that the
output of a program will not extend on
previous drawings
• In order to clear the stage, use clear command
from the pen palette as shown below

18
 Snap! Programming Language
First Example
• Unfortunately the clear command will not re-
position the sprite to the center of the stage
• In order to re-center the sprite we need to notice
that
– The stage is an XY plane
– The center of the stage is the coordinate (0,0)
– As in mathematics, X-axis is positive on the right and
negative on the left
– Similarly, Y-axis is positive above the X-axis and
negative below the X-axis

19
 Snap! Programming Language
First Example
• Thus in order to take the sprite to the center
of the stage, we use the go to command under
motion palette and provide the values of x
and y coordinates as 0 and 0 as shown below

20
 Snap! Programming Language
First Example
• When we take the sprite to a specified position when the
pen is down using the go to command, it will leave a trail
(draw a line) on the path it moves along
• To avoid leaving a trail, we use pen up command as shown
below

• This completes our first Snap! Program example

21
 Saving Your Snap! Program
• After building a Snap! program, you may wish to save
your program in your computer hard drive so that you
may re-open the program later and work on it
• To do so,
– Click on the icon on the menu bar of Snap! window
– Select export project
– Enter a file name and select folder where to save
– Your program will be saved as xml file
– In order to re-open the project again
• Start Snap!
• Select the icon, select import, and select the saved xml file

22
 More Examples
Drawing a rectangle
• Let’s build a program to draw a rectangle whose
length is 200 steps and width is 100 steps
• Here all we need is to turn the sprite 90 degrees
after drawing each side
• In order to see the same output every time we
execute the program, we will first take the sprite
to the (0,0) position and set its direction to the
right
• In order to set direction, use the point in
direction command under the motion palette
• The program and its output is shown below
23
 More Examples
Drawing a rectangle

24
 More Examples
Drawing a hexagon
• In order to draw a regular hexagon (all sides equal length) whose side is
100 steps long, all we need is to draw a line (i.e. move the sprite) six times
and turn 360/6 = 60 degrees after drawing each line as shown below

25
 More Examples
Drawing a hexagon: Extension 1
• Let us modify the hexagon drawing program so that the hexagon is
drawn towards the top left side of the stage area
• In order to do so, we need to first move the sprite towards the top
left side of the stage area
• Use the go to command with a negative value of x-coordinate (to
take the sprite left side) and positive value of y-coordinate (to take
the sprite upwards)
• The exact values of x and y coordinates for the go to command
depend on the stage area size; so for now let us just use some
reasonable values say (-150, 150)
• The stage area default size is 480 x 360 steps
• The following program also demonstrates the fact that it is better to
first take the sprite to a required position and point it to a desired
direction before clearing. This avoids putting the pen up or down
several times (see example below)

26
 More Examples
Drawing a hexagon

27
 More Examples
Fancy Graphics
• Build a Snap! program to draw a square whose
side is 200 steps long at the center of the
stage area as shown below.

28
 More Examples
Fancy Graphics
• Build a Snap! program to draw the following
square whose side is 200 steps long at the
center of the stage area

29
 More Examples
Fancy Graphics
• Build a Snap! program to draw the following
square whose side is 200 steps long at the
center of the stage area

30
 More Examples
Drawing a hexagon: Extension 2
• Build a Snap! program to draw the following
regular hexagon whose side is 100 steps long
at the center of the stage area

31
 More Examples
Drawing a hexagon: Extension 2
• Build a Snap! program to draw the following
regular hexagon whose side is 100 steps long
at the center of the stage area

32
 Computational Thinking
• Computational thinking is a way of thinking in
order to formulate the steps needed to solve a
given problem and expressing these steps in such
a way that a computer (or human) can perform
these steps one by one and one step at a time
and at the end will be able to solve the given
problem
• Thus we need computational thinking say for
example to build a Snap! program that draws
some graphics

33
 Computational Thinking
• The computational thinking required to solve a
problem might be very easy and very few steps
(for example to draw a line or a rectangle in
Snap!)
• Equally a computational thinking might be very
complicated and with a lot of steps (for example
drawing a hexagon with lines intersecting the
vertices of the hexagon as described earlier)
• In any case, computational thinking requires us to
use pen and paper to carefully lay out the steps
needed to solve a problem

34
 Algorithms
• An algorithm is a result of a computational
thinking that specifies clearly the steps
needed to solve a problem such that
– There are finite number of steps
– Each step is unambiguous and error free
– After performing all the steps, it must give a
correct output (result) for any valid input data
– Execution of the steps should take finite amount
of time (both for computer or human)
35