Stage 11: Functions with Artist 3

A flower made up of multiple square functions

A flower made up of multiple Square Functions. The Function is the green block.


Click here to see the above program run.




So, we’re now moving along to Stage 11 of the 20 Hour of Code.  We have a lot of different blocks now and so they’ve sorted them into the categories show above.

The focus of Stage 11 is Functions.  We’ve been talking about Functions since Stage 8 when we made our backpack charms in an unplugged activity.  Now, we get a chance to code with Functions.

  • Function:  A piece of code that can be called over and over

I’m going to describe “Function” the way I see it.  It doesn’t mean it’s correct and if I find out differently later, I’ll edit this post.  A Function is a bunch of code (puzzle pieces) bundled up in a single code (single puzzle piece).  So, instead of a bunch of directions to make a “square”, we can call it Square.  Then, each time we want a square, we just use the piece that says Square.  It’s like short-hand.  I have screen shot images below that will clarify. The first image shows the coding to draw a square. There are lots of different pieces.  The second image has the “Square” as a Function and you can see that it is only 1 piece (the green piece).

Both sets of code draw the exact same thing.

Draw a Square (no function)

Image 1: Draw a Square (no function there)



Draw a Square (Square is a function.)

Image 2: Draw a Square (That single green block is a function.)


Click here to see this program run.

Now, we can get into some more complex vocabulary:

  • Function Call:  The piece of a program that sends the computer to a function.  In this case, it is the green puzzle piece that says Draw a Square (image 2)
  • Function Definition:  The piece of a program that tells the computer what to do when the code calls a Function. In this case, it’s all the bits and pieces that we can see in image 1.

In these examples, the Function Call and the Function Definition were not on the same workspace together.  In “proper coding”, the Function Definition would have to be there on the page somewhere.  Then, the Function can be called over and over again as many times as you want (Function Call).  In other words, both the Function Definition and the Function Call need to be in the same program as they work together.

Now that we can easily draw a square, we can go on and make more complex designs because we’re not all bogged down with coding all the little bits to make a square.   We can now code a design that looks like this:

Three Function Squares

Three Function Squares


We use the Function called Square and the program would go something like this: Square, Turn 120 degrees, Square, Turn 120 degrees, Square.

The next thing that we learn in Stage 11 is Counter Loops:

  • Counter Loop: This code is in the category of Loops.  It’s increasing or decreasing the numbers each time it is referred to.  (You set the number that it starts with and the number it ends with and the increment or decrement for each time.  It is called a Loop because it happens over and over until it’s done.
  • Counter : This is under the category of Variables.  When Counter appears, it points to the Counter Loop.  (It tells the computer to go to the Counter Loop.)


This is easier shown than explained.  See the image below:

Counter Loops

Counter Loop


Click here to see the above example of a Counter Loop run: Nested Squares

The Counter Loop is the pink piece.  The Counter is the purple piece.

The Purple Counter is functioning as the Function Call (calls forth the Function).  The Pink Counter Loop defines what the Function is.  In other words, what is happening is that the Purple piece points back to the Pink piece.  Every time we go back to the Pink piece, it changes to the next number as defined.  In this example, we start with the number 50 (pixels)  and we increase it by 10 each time until we get to 90 pixels and then we stop.  This effectively draws a square that gets bigger and bigger each time until it’s a 90 pixel length square and then we stop.

Wheew.  That was pretty hard to explain in words.  It’s better just to play with it and then you’ll get it.

 I finish this blogpost with this pretty snail that I coded.  Click here to see the program run.

Stage 11 Snail
Stage 11 Snail using a Counter Loop (pink) and the Counter Variable (purple)


I am slowly but surely getting through all the Stages:

My progress

My progress


I am happy to report that I will be running a Coding ASA (After School Activity) at my children’s school after Easter.  I plan on taking the children (Years 6 & 7) through the 20 stages of this program.  It’s been scoped and sequenced very well.  If I can do it, THEY can do it!


About Vivian

Vivian @ChezVivian is a Canadian-born Chinese, currently living in Switzerland. She has also lived in Hong Kong and Indonesia. She holds a M.S. (focus: Educational Technology Integration), B.Ed and a B.A. and graduate studies in Kodály and Orff music pedagogy. She is an elementary school classroom generalist, but has also taught as a music specialist, ESL/EAL and also in Learning Support. Most of her teaching career was in International Schools in Hong Kong. She is excited about the IBPYP and the possibilities of using technology to Inquire. Recently, she has been looking at the opportunities that computer programming gives to put #TECHXture back into the hands of children. In other words, technology need not be just about looking at screens. It can be about building things with our hands; and computer programming levels-up what children can do with the things they build---encouraging higher thinking skills. She is a Coetail Post-graduate Certificate grad ('13-'14), a former Coetail Coach and one of the co-founders of #CoetailChat. Her blog home curates her assignments for Coetail and her M.S. graduate studies about Educational Technology integration and anything else educationally-related that she feels inspired to write about. Her twitter tagline sums it up: "Mom to 4, Mentor, Educator, Musician (in that order)".
This entry was posted in 20 Hours of Code, Coding, Practical Ideas and tagged , , , , . Bookmark the permalink.

Comments are closed.