Computer Science concepts you can learn from block-based programming
Tags: blockbased, computerscience, mooc, opensap
Published: 2019-08-05 19:03:34

---
title: Computer Science concepts you can learn from block-based programming
published: true
tags: Block-based,Computer Science,MOOC,openSAP
canonical_url: https://www.developervoyage.com/2019/08/01/computer-science-concepts-you-can-learn-from-block-based-programming.html?utm_source=rss&utm_medium=rss&utm_campaign=computer-science-concepts-you-can-learn-from-block-based-programming
---

I have signed up to volunteer for the Swedish nonprofit organization [Kodcentrum](https://www.kodcentrum.se) this autumn. Kodcentrum introduces kids to programming and digital creation free-of-charge. We will be using [Scratch](https://scratch.mit.edu/) in the coding labs, and I've played around with Scratch previously on a couple of occasions.

##A course on Snap!
To prepare myself for the volunteering, I signed up for the MOOC [Programmieren mit Snap!](https://open.sap.com/courses/snap1-de), which was offered free-of-charge by [openSAP](https://open.sap.com/) this summer. [Snap!](https://snap.berkeley.edu/about) is an extended re-implementation of Scratch and the two languages as very similar. The user creates programs in a visual drag-and-drop environment.

The course took about ten hours to complete, and I'm impressed by how much content and how many fundamental as well as more advanced computer science concepts the instructors were able to explain and demonstrate.

##Concepts covered
Let's have a brief look at the concepts covered.

###Fundamentals
A lot of the fundamentals were illustrated by creating images and art. The first example illustrated positioning, loops, and visual effects by creating a digital wildflower meadow.

<p>The basics of color theory were explained in an exercise to create geometrical forms of different types and colors. I found it interesting that Snap! uses <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSV</a> (hue, saturation, value) instead of the <a href="https://en.wikipedia.org/wiki/RGB_color_model">RGB</a> color model, which I'm more familiar with. According to <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">Wikipedia</a>, HSV was "designed in the 1970s by computer graphics researchers to more closely align with the way human vision perceives color-making attributes."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The use of variables was introduced in the context of for-loops, and the outcome was spirals of different sizes and forms. At a later stage, lists were introduced for grouping several related values.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Advanced concepts</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The principle of <a href="https://en.wikipedia.org/wiki/Parallel_computing">parallel computing</a> was introduced by letting the student create a simple drawing program, in which the user creates two mirrored images by having two scripts executing in parallel.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Messaging between objects was introduced by creating a simple game where a character navigates through a maze. The objects communicated when something happened in the <a href="https://en.wikipedia.org/wiki/Game_programming#Game_structure">game loop</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A <a href="https://en.wikipedia.org/wiki/Sierpi%C5%84ski_triangle">Sierpiński triangle</a> was created by applying a <a href="https://en.wikipedia.org/wiki/Chaos_game">chaos game</a> method. <a href="https://en.wikipedia.org/wiki/Fractal">Fractals</a> and <a href="https://en.wikipedia.org/wiki/Emergence">emergence</a> were also introduced. There are really a lot of interesting graphical representations which can be generated by a very small amount of code.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Snap! can be used for more advanced use cases by importing libraries. A neat example was the use of a <a href="https://en.wikipedia.org/wiki/Speech_synthesis">text-to-speech</a> library for generating and reading out loud different newspaper headlines. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://en.wikipedia.org/wiki/Cloning_(programming)">Cloning</a> was used to create somewhat psychedelic graphical animations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As you see, a lot of ground was covered already, but no computer science programming introduction is complete without introducing the student to <a href="https://en.wikipedia.org/wiki/Recursion_(computer_science)">recursion</a>. I really enjoyed this part of the course, and the output was a tree image with very detailed branches.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I was familiar with most of the concepts covered in the course, but some of the graphical applications were new to me since I don't do any graphics programming in my day job. I very much enjoyed the course, and I'm impressed with the instructors as well as with what can be achieved in a block-based programming language.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you have children, and you want to introduce them to programming, I think that Snap! and Scratch are both excellent choices. They are most likely also great introductory tools for adults who want to get an initial idea of what programming is all about.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I highly recommend the course, which is available both in <a href="https://open.sap.com/courses/snap1-de">German</a> and in <a href="https://open.sap.com/courses/snap1">English</a>. I have only taken the German version of the course, so that is what this blog post is based on. You can sign up for any one of the courses free-of-charge. Happy coding!</p>
<!-- /wp:paragraph -->