Skip to Content
Technical Articles

Snap! – Build Your Own Blocks

snap.berkeley.edu

 

“Snap! takes the best ideas, then freshly and coherently synthesizes them into a visual programming language that kids can use, but is also satisfying to professional programmers.”

 Don Hopkins (The Sims)

Creativity as well as computational and media literacy are considered important skills in the ongoing digital revolution. Snap! is a tool that supports people of any age or background to get in touch with computer science (CS) and actively shape the current developments.

 

What is Snap!? 

Snap! -Build your own Blocks is a visual, blocks-based programming language. It invites learners to bring their ideas to life while getting to know computer science in a playful and experimenting way. Fascinating about Snap! is its keen aspiration to provide a low entry level while not reducing its expressivity. In Snap!, blocks are not only important in the editor but in the language itself. Snap! allows beginners and experienced programmers to immerse into advanced CS concepts like arbitrary data structures, higher order functions and even custom control structures in a visually appealing and understandable way.

Snap! is developed at SAP together with researchers of UC Berkeley. It is available in over 40 languages and used for CS education in just as many countries. Snap! is open-source and runs in all modern web-browsers.

 

Did you know that Snap!…

  • is one of the top 100 programming languages in the TIOBE Index?
  • is used for teaching artificial intelligence by researchers at the University of Oxford and FU Berlin?
  • is used by the maker scene for 3D-printing, embroidery and robotics?
  • has lots of learning material e.g. from openSAP and SAP Young Thinkers?

 

Want to get started?

Check out our openSAP courses for an introduction to the programming language and CS in general, for engaging project ideas and additional material.

 

What’s more to know?

 

“I had heard good things about SNAP but never tried it out myself. . . it was a GREAT experience.”

Susan Klimczak (Boston South End Technology Center)

 

Who uses Snap!?

Colleges and high schools use Snap! to teach computer science. Students use Snap! to create games, interactive stories, artwork and simulations, to analyze data, drill down on media, control robots and to invent new forms of expressing themselves.

Students

Are you a student looking to get started with coding? Or maybe you’re an advanced coder but looking for something different? Then Snap! is ideal for you. Snap! has a low entry point, which means it’s easy to get started and create projects. But Snap! also includes advanced features, such as functioning. To get started, take a look at the resources available for self-learning – or, you can just jump in and start playing around with Snap!

Educators

Are you looking for an intuitive, easy-to-use programming language to teach your students? Snap! is an ideal offering for you. Snap! has a low-entry point for completely new coders but also includes advanced features if you’ve got experienced learners in your class. Take a look around and check out the resources we have available for teachers to get you started.

Because Snap! doesn’t present the definition of a custom block unless the user manually opens it, educators can teach how to use individual custom blocks – especially control structures and functional techniques like map and reduce – in a gradual way. Initially, let users get experienced with the block as though it were any primitive. Once familiar, share the block’s definition and foster discussion on how it works. This helps to prompt ideas of creative ways to use the block, as well as of totally new custom blocks one might like to create.

Parents

So, you’d like your kids to start learning about the world of coding? Snap! is the ideal place to start. We don’t collect any data about your kids – all they need to sign up is an email address to create their account. Yes, we ask for their date of birth but we do not store this information – it’s just to clarify they’re over 13 to create the account. Why not create your own account and share your projects with your kids?

 

What makes Snap! special?

Over the past years, visual programming languages especially blocks-based ones have become somewhat bon ton for beginner’s programming education. In these blocks-based environments, you have a selection of programming chunks – the blocks – from which you can choose. Programs are generated by dragging and dropping these blocks together to more complex sequences of instruction.

script%20pic%20showing%20do%20this%2C%20then%20do%20that%2C%20if%20this%20is%20true%20%28also%20do%20that%29

This comes with multiple benefits. Blocks-based programming eliminates syntax errors, perhaps the main obstacle for novices. Instead of spending much time looking for missing semicolons, you can cut straight ahead to the interesting ideas. Additionally, studies suggest that the visual representation leads to a better understanding of many computer science concepts. This is why Snap! tries to take blocks-based programming as far as possible.

On the outside Snap! looks and feels just like Scratch. But inside it provides expressive concepts for abstraction otherwise only found in the most advanced and sophisticated programming languages from AI research. Snap! supports multiple programming paradigms such as imperative, structured programming, functional programming and object-oriented programming. These make Snap! suitable for an intellectually rigorous introduction to computer science at the college and high school level.

 

“Snap! is Scheme
disguised as Scratch”

Brian Harvey, PhD,
teaching professor emeritus, UC Berkeley

 

 

User Defined Procedures and Functions

Snap!’s tagline is “Build Your Own Blocks”. Defining custom functions is at the heart of extending any programming language. It gives you the power to add anything you want to the system. Miss a construct that you like in another programming language? Go ahead and build it in Snap!.

Block%20editor%20showing%20a%20custom%20Square%20block

Block editor showing a custom “square of size” block

Any kind of block that you see in Snap! you can also define yourself: Procedures (commands), functions (reporters), predicates (“Boolean inputs”) and event listeners (hat blocks). Custom blocks can be defined globally (“for every sprite”) or as methods of a single actor (“for this sprite only”).

Custom%20max%20block

Custom max” block

 

Proper Tail Recursion

Recursion is a powerful idea in computing because it lets you accomplish huge tasks with only little code. Snap! encourages recursion by making it safe to use even for beginners. Technologies such as tail call optimization (TCO) and a dynamic stack ensure that you don’t run out of memory in cases of deep recursion levels, and Snap!’s scaffolded scheduler lets you halt infinite recursion when you forget a base case.

Recursive%20spiral%20block

Recursive “spiral” block

Mastering recursion sets apart the computer scientists from the mere coders. With stack overflows out of the way there’s nothing to stop you from inventing beautiful fractals or recursing over large data sets.

Recursive%20sum%20block

Recursive “sum” block

 

Lexically Scoped Variables

In addition to global and sprite-local variables Snap! also offers script-local variables, letting you factor code into reusable modules. As in most modern programming languages Snap!’s variables are lexically scoped and support nested functions and closures. Function parameters are mutable, and their value can be exposed to the caller. Snap!’s variables are dynamically typed and support heterogeneous lists.

 

Lambda – First-Class Blocks

Procedures as data is another powerful idea in computing. It allows you to go meta on ideas. In addition to blocks Snap! also features “rings” around blocks transforming expressions into anonymous functions that capture their environment of origin. This lets you build your own blocks that accept other blocks and scripts as inputs, such as C-shaped control structures. You can also store blocks in lists or variables, and even make a block that returns a function (another block).

Block%20definition%20and%20example%20for%20the%20pipe%20block%20%28Think%20of%20a%20one-digit%20number%2C%20add%20it%20to%20itself%2C%20add%2010%20to%20the%20result%2C%20divide%20it%20by%202%20and%20add%20the%20initial%20number%20-%20is%20the%20result%205%3F%29

Block definition and example for the “pipe” block (Think of a one-digit number, add it to itself, add 10 to the result, divide it by 2 and finally add the initial number – is the result 5?)

 

Higher Order Functions

Snap! comes with built-in blocks that let you map, filter, enumerate and reduce data. Rather than looping over arrays these blocks take other function blocks as arguments enabling highly expressive and declarative constructs.

Higher order functions are the superpowers of computing. Snap! provides the ingredients you need to define your own uber-functions. While our pedagogy is that using higher order functions should be easy, we also believe that there should be no ceiling to what you can express in a programming language.

 

Full Closures

Snap!’s lexical scope supports an inner function to access the local variables of an outer function even after the outer function has terminated. This lets you create abstract data structures from reified dispatch procedures.

The idea that temporary local data becomes persistent for a surviving inner function lets us demystify object-oriented programming.

User Defined Control Structures

Control structures are typically what you memorize when you learn a new programming language. Snap! lets you build your own C-shaped blocks to make your own control structures. Being able to define program control in your own functions lets you discover how to make a new programming language yourself.

 

First-Class Continuations

Continuations are an advanced construct giving you access to a part of the evaluator state. Capturing a continuation is like keeping your thumb on a certain page of a book as you close it, so later you can reopen it and continue reading where you left off. Snap!’s continuations let you build certain fancy control structures in Snap! itself, rather than having to write them in another programming language.

 

Heterogeneous Data

Data structures are what matters most in a programming language. Data is at the heart of modelling a simulation or a digital twin. Data becomes information by adding structure and context. Snap!’s basic data structures, lists, are first-class citizens. You can assemble complex data structures out of atomic data types (numbers, text, Booleans) and combine them with other lists (lists of lists) and objects. Snap!’s lists are untyped allowing for easy heterogeneous collections of data. This lets you express any data structure you desire.

 

Media Computation

Remixing pictures and sounds into interactive animations and video games through programming is hugely fun. But with Snap! we go further, letting you drill down to the bare metal of pixel and sample data to examine, manipulate and transform bits of information into new computational artefacts. Snap! not only lets you perform higher-order functions on low-level media components, it even lets you do so live on the video-feed of your webcam or the audio stream of your microphone.

 

Concurrency

Snap!’s virtual machine can run many scripts for many actors (sprites) at the same time in parallel. Individual programs can be triggered by events, and if several scripts react to the same event, they all run concurrently. This lets you model agent-based systems in a decentralized modular way rather than cramming everything into a single main “game loop”. Snap! also lets you explicitly launch new threads programmatically, so your procedures can take advantage of parallelism to achieve complex behavior in a logical and expressive way.

Custom%20play%20chord%20block.%20Several%20notes%20can%20be%20played%20at%20the%20same%20time%20by%20creating%20a%20new%20thread%20for%20each%20note%20with%20the%20launch%20block.

Custom “play chord” block. Several notes can be played at the same time by creating a new thread for each note with the “launch” block.

 

Object Oriented Programming

Bundling data structures with behavior is a powerful method to model simulations and design user interfaces. Snap!’s sprites are first-class objects. They can be directly referenced, assigned to variables and passed into functions. Sprites can have local fields (“instance variables”) and custom blocks (“methods”). Objects communicate with each other either through public “broadcasts” or through direct polymorphic messages.

Sprites can inherit local state and behavior from another. Rather than through classical inheritance Snap! supports a concrete prototypical, Lieberman-style inheritance mechanism through delegation, similar to JavaScript and SELF.

Sprite%20that%20inherits%20the%20y-position%20of%20its%20parent%20draws%20a%20sinusoid%20curve%20when%20the%20parent%20is%20moving%20in%20circles%20and%20the%20sprite%20is%20moving%20forward.

Sprite that inherits the y-position of its parent draws a sinusoid curve if the parent is moving in circles and the sprite is moving forward in x-direction.

 

Objects can be composed into aggregations by nesting sprites into part-whole relationships. This lets you easily create virtual puppets and robots.

 

Debugging

Snap! supports debugging through a variety of data monitoring widgets, and by allowing visible “slow-mo” and single stepping. Because Snap’s programs are always “live” debugging is achieved by inspecting the actual programming as it is running instead of a post-mortem stack trace.

Visible%20stepping%20allows%20live%20debugging%20of%20running%20programs

Visible stepping allows live debugging of running programs.
Currently executed blocks highlighted in teal.

 

Extensions

Write your own JavaScript extensions.

Web APIs, Frequency Distribution Analysis, Infinite Precision Numbers, Text-to-Speech, World Map, JSON, CSV, etc. etc.

Snap%21%20offers%20extensions%20like%20a%20World%20Map%20feature%20in%20its%20libraries.

Snap! offers extensions like a World Map feature in its libraries.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.