Drawing patterns in code.org

When we first learn coding using sites like code.org we encounter puzzles that require common patterns to solve.

These are some of those common coding patterns that all students should understand thoroughly:


Move along a line

Repeat 1 or more actions a certain number of times to move along a straight line. For example – move forward 5 times to solve a puzzle or draw 5 line segments to form a longer line. In the example below, the artists draws 10 alien stickers with a 40 pixel gap between each one. Notice the use of the ‘jump’ block instead of ‘move’. Jump does not draw a line. Try the code yourself and change things like the starting position, the number of repeats, the sticker and size of the sticker and the gap between each one.


Move around a square

To draw or move around a square you must repeat 2 actions at least 4 times. There are several options here – the length of the square and the direction in which you move around it (i.e. left or right). In the example below, the artist draws a 100 pixel square using the wavy line pattern and turns 90 degrees right at each corner. Try the code yourself and change things like the pattern, the length of the lines and the direction. What happens if you change the angle of the turn? What happens if you change the number of repeats AND the angle of the turns? You’ll find out in another pattern below if you don’t want to try it now.


Move up/down a staircase

Repeat several actions to move up or down a staircase. This is a little more complicated as you need to turn one way, move and then turn the other way and move again. The direction you move first will determine whether you go up or down. In the example below, the artist is facing right and the first turn is right so he draws a downward staircase. Notice that the 2nd turn is the opposite direction. If they were the same the artist would draw a square. If you switch the direction of both turns guess what happens? Try the code yourself and change things like the length of the step and the angle of the turns. Weird things happen.


Move around a closed shape

This includes any shape with 3 or more sides of even length. For example: triangle, square, pentagon, hexagon, octagon etc. This is almost identical to the square pattern except that the number of repeats changes (e.g. 5 repeats for a pentagon) and the angle of the turn changes (e.g. 72 degrees for a pentagon). Why 72 degrees? When you turn in a full circle you turn 360 degrees. A pentagon has 5 turns – when you add them all together 72 x 5 you get 360.

The artist starts and ends in the same position and facing the same direction. This means he has done a full 360 degree turn. Using this concept you can now draw any number of shapes. You simply have to do a bit of maths. Want to draw an octagon? 360 / 8 = 45. Want to draw a 10 sided polygon? Easy – 360 / 10 = 36. Don’t forget to change the number of repeats to match the number of sides as well as the angle. Try the code yourself and to see what weird and wonderful shapes you can make the artist draw.


Move outwards and back around a circle

This is a pattern you can really have fun with – especially if you combine it with the pattern above that draws shapes. The idea is similar except that rather than moving around a shape this pattern makes the artist move outwards from the starting point and back again. He then turns slightly and repeats. In the example below the artist draws 10 lines (repeat = 10) and turns 36 degrees (10 x 36 = 360) to make nice pattern. Try the code yourself and to see what weird and wonderful things you can make the artist draw. I’ve added some more things to try below.

If you look under the Functions code block menu you will find blocks like ‘draw a house’, ‘draw a star’. When you use these you need to attach a number to each of the empty slots. For example:

You will find the number blocks under the ‘Math’ menu. You can even remove both the move blocks and just turn the artist around whilst standing still. You might make him draw something like this:

Or this:

Or these:

1 Comment

Leave a Reply to Xavier Cancel reply

Your email address will not be published. Required fields are marked *