The Snap! Programming Language

For the Intro to Computer Science class, we will be teaching a programming language called Snap! It is a browser-based graphical programming language that lets students create animations and games while learning how to program. The language was developed to teach “The Beauty and Joy of Computing” course at the University if California — Berkeley.

Graphical Programming Language Benefits

Initially I was skeptical about whether using a graphical programming language was a good idea. After all, we don’t drag-and-drop building blocks to create programs in the “real world”. However, after using the programming language to complete a few tutorials, I can already see a few benefits to using Snap:

  1. It is very motivating to graphically see the results of your work on the stage while you are writing your program. Much more interesting than staring at an IDE and a command line prompt.
  2. Since it is browser-based, there is nothing to install. You can get up and running on day 1 of class. I’ve been in some hands-on classes where Ruby was used, and the class was derailed by gem dependency hell, different operating systems, different Ruby versions, etc. With Snap, you don’t have to install an IDE like Eclipse or mess with configuration and environment settings. Everything you need is right there.
  3. There is less time spent dealing with syntax errors, curly braces, semicolons, typos, and other annoyances with C-like languages. While you have to deal with such things eventually, it is nice to be able to focus on the concepts of variables, flow control, and events without spending much time on typing.
  4. It is actually very powerful. One of the first projects is to build a Mario-like platform game, complete with sprites, power-ups, multiple screens, and hazards. As instructors, we are expected to be able to build a basic platform game in a couple of hours. The students are expected to be able to do this in a couple of weeks. If you asked us to do this in C++, there would just be too many low level details to cover.

My First Snap! Program

As part of teacher training, the first program I had to make was a simple Kaleidoscope. Snap made it easy for me to define a few event handlers, an event loop, and instructions for the “turtle”. To create additional sprite objects, I simple right clicked a sprite, made a duplicate, and gave it a unique name and color. Below is a screenshot of what a Snap program and its output looks like:

Cloud Storage

Another cool feature of Snap! is cloud storage. You can easily store your programs on the server and share them with a link. Someone else can then view your published project and use it, or save it to their own cloud storage and edit/improve it. Below is a link to the Kaleidoscope program. You press “spacebar” to begin. Use the mouse to move the turtle, press “d” to put the pen down, press “u” to lift the pen, and press “c” to clear the canvas.

Next Steps

Now that I have created a basic Snap program, I need to complete a couple of larger programs to become proficient: a Mario-style platform game and Pong. Next week our team will be meeting up to discuss next steps and will be checking in with TEALS to make sure everything is running smoothly.