UK Bebras


OUCC Tutorials: blockly picture

Tutorials index

Blockly Picture Tasks

The Blockly picture tasks provide an alternative way of programming and drawing images to the turtle tasks. This method of drawing shapes and graphics on a canvas is more like the way graphics are created in traditional text-based programming languages.

In this module images are created by placing shapes and lines on the canvas using x,y coordinates that start from (0,0) in the top left hand corner of the canvas. This module requires you to think about precedence and also naming of objects: Shapes at the top of your block stack are implemented first. Those afterwards are placed on top of what is already on the canvas.

Watch out:
If you just duplicate a block and do not change its name, then the shape gets evaluated once and then re-evaluated a second time removing the first instance. Don't forget to name your shapes individually!

Naming shapes gives you the opportunity to use code that then refers to individual shapes by name.

Open the shape category below and look at what blocks are available. Notice how we have an Add shape block and then a number of getter blocks (blocks that get information about a shape) and setter blocks (blocks that can change a parameter for a named shape). Most of these blocks and parameters are self explanatory except perhaps the number of sides:

0, 1, 2 and 10 produce circles
3, 4, 5, 6, 7, 8 and 9 produce regular polygons with this many sides.

This module usually presents you with an image to try and produce (shown as a shadow). Try and produce the one below so that you can get used to the Picture module blocks.


  • All variable values end in a 5 or 0.
  • If you need to see below a shape that you have created, try right-clicking on its code block, select Disable Block and then re-run your program.

The Picture tasks are relatively simple once you get used to two things:

  • how to manipulate the shapes using Blockly's enable and disable feature (right-click)
  • how to name shapes and stack them in the correct order.

The Shape blocks are taken to a new level when used in the Movie module. That might be where to go next.

Blockly Movie Task Tutorial >>

Tutorials index