Turtle Flowers

Cymraeg

Turtle Flowers

The aim of this workshop is to design your own flowers using a block-based programming language.

Example flower drawn using 'Turtle Blocks' Example flower drawn using 'Turtle Blocks' Example flower drawn using 'Turtle Blocks' Example flower drawn using 'Turtle Blocks' Example flower drawn using 'Turtle Blocks' Example flower drawn using 'Turtle Blocks'

We have designed this workshop to provide challenges for all ages who wish to learn more about programming.

To help reach this goal we shall look at the mathematics and coding required to draw various different shapes, leading up to the knowledge needed to create petals.

You can do as many (or as few) of the exercises below as you need to reach the goal of flower design.

If you do get stuck on a section, have a look at the next - it might help you figure it out.

We have also included a number of extension activities in various sections to challenge more experienced programmers too.

For this workshop we shall use an in-browser based software called Turtle Blocks. This is free and does not require a download, installation or log-in.

What is Turtle Blocks?

Turtle Blocks is a software that uses basic coding blocks to drive a 'turtle' around the screen. Using a pen function, the turtle can draw its path to create shapes and patterns.

Here, we have provided a screenshot of the start-screen with a key.

The interface for Turtle Blocks with numbers to identify the areas mentioned in the key. Numbers 1,2 and 3 are associated with the block menu on the left of the screen (1. points at the pen tab, 2. at the movement tab and 3. is referring to the resultant options list). Number 4 refers to the script on the screen, whilst number 5 is the turtle the script will move. Number 6 is in the top right of the screen with the play and stop controls. 7 is alongside the stage menu icons for clear screen, zoom and add grids. Number 8 is in the bottom right corner with the block appearance controls. Finally, number 9 is in the top right alongside the main menu options for producing new projects, saving, loading and sharing.


Key

  1. This selects the menu for programming blocks related to the pen function
  2. Changes the programming blocks menu to those for movement
  3. Shows the currently selected programming blocks menu
  4. The default starting program
  5. This is the 'Turtle' that the program controls
  6. These are the play and stop controls for the program
  7. The stage controls - the main one for this workshop is the middle icon which clears the stage area
  8. Block display controls
  9. Main menu including options to create a new project, save a project and explore already existing programs.

If you are unsure about an icon's usage or the purpose of any of the blocks you can hover the mouse over them to obtain more details

Drawing different shapes

To draw something as complex as a flower using this program, we first need to look at how to draw different shapes.

What is a square? - A square is a shape with four equal length sides and four right-angled (90°) corners.

When you load up a new project on Turtle Blocks it comes with a small code block. Have a look at this and see if you can figure out what shape this will draw before pressing play.

Let us take a closer look at this program:

So the complete program is telling the turtle to travel forward 100 units, turn 90° and repeat the action 3 more times - this makes a square.

Challenges for Squares:

1. Change the program to make the square different sizes

2. Change the program so as the turtle is starting in the bottom right corner of the square (rather than the bottom left as with the above example)

3. Add the necessary blocks to make the turtle draw both of the squares in challenges 1 and 2 in a single program

Extension Challenges for Squares:

Try to recreate the below images:

four identically sized squares connected to form a larger square six different sizes of square, all sharing the same bottom left corner five different sizes of square, all sharing the same centre point

For at least one of these; you will need to use the 'pen up' block to allow movement without drawing, and the 'pen down' block to start drawing again.

For an extra challenge, try to recreate the colours too (these all used colour values that are factors of 10)

Making flowers using squares

It is possible to produce patterns of squares in Turtle Blocks that form a flower-like appearance, as demonstrated below:

five squares rotated around the same point to produce a flower-like design ten squares rotated around the same point to produce a flower-like design twenty squares rotated around the same point to produce a flower-like design fifty squares rotated around the same point to produce a flower-like design

Squares are nice simple shapes to produce, but it is rather difficult to design flowers with them. Therefore, let's start building up our ability to make other shapes.

Let us now look at how we can change the program to draw regular pentagons instead. These shall have five equal length sides and five matching corners.

What is the angle needed for a pentagon? Let us share a method we can use to work out the angles that make up any shape.

To complete a shape the turtle must travel a total of 360°

This means that the angle needed to draw a regular pentagon is:

\[360 ÷ 5 = 72°\] which can also be written as \[{360 \over 5} = 72°\]

You will need to start a new project to return to the default square drawing program. Which numbers do we need to change to make it draw a pentagon?

Challenges for Pentagons:

1. Produce a pentagon half the size of the one produced in the above solution.

2. How would we change what we've done to make a hexagon (six sided shape) or an octagon (eight sided shape)?

Extension Challenges for Pentagons:

Try to reproduce these pentagon designs:

four pentagons arranged to touch corner to corner with a square 'hole' in the middle
six pentagons arranged with one in the centre whilst the other five each share one side of it.
five pentagons overlapping and rotated around a single corner

We have provided examples of both squares and pentagons drawn in a manner where they rotate on one corner to produce a flower-like design in the previous sections. This can be repeated with any shape:

five squares rotated around the same point to produce a flower-like design five pentagons overlapping and rotated around a single corner five hexagons overlapping and rotated around a single corner five septagons overlapping and rotated around a single corner fiveoctagons overlapping and rotated around a single corner

How do we make these rotational patterns?

Let us show you. First, here is the program for making one with squares:

The block program used to produce five squares connected to a single rotational point by one corner. Inside the start block there is a repeat five times block which contains a set colour to random (min value of 0, max value of 100) followed by a repeat 4 times command of forward 100 units and turn right 90°, then a turn right 72° command.

Challenges for Rotational Patterns:

Can you identify the section of the above program that draws a square?

Which block instructs the program to create five squares?

Why is the value of the second turn right block set to 72?

When does the colour change during the pattern?

Using this code, make the necessary changes to recreate the same pattern with pentagons, heaxons and octagons.

Now, produce the same rotational pattern with 10 hexagons

Extension Challenges for Rotational Patterns:

Look for the division number block and use it to accurately produce five septagons (7-sided shapes) in this rotational pattern

Investigate creating variables for number of sides and number of shapes to make inputting changes easier

Try to recreate the below:

The five squares connected by a corner to a rotational point as given above, overlaid with a larger version The five squares connected by a corner to a rotational point as given above, overlaid with a larger version made up of hexagons Five hexagons connected to the rotational point overlaid by five larger octagons in the same arrangement

Now we have explored shapes with straight edges, let us look at creating cirlces.

Challenges for Circles:

Using what we've learnt so far, make a regular 360-sided shape (known as a 360-gon or a triacosiahexecontagon) with each side 2 units in length?

What does it look like?

Why did we need to reduce the length of the sides?

Does the same optical illusion occur for a 300, 250 or 200 sided-shape? You may need to increase the length of the sides again to investigate

Produce this design in whichever colours you like:

five 360-gons evenly spaced around a single point - using the same rotational pattern as shown in the previous section

Extension Challenges for Circles 1

Recreate the following design of twelve 360-gons:

twelve 360-gons evenly spaced around a single point of rotation. Each circle is made up of a rainbow of colours - each side done with the a +1 to the colour value, resetting to zero everytime it exceeds 100.

Using variables and maths blocks, try to also recreate the colour scheme.


Turtle Blocks provides us with a simpler way to draw a circle using a single code block:

A program that consists of a programming block with arc written on. The angle value is set to 360 and the radius to 100 units.

This program is telling the turtle to draw an arc that travels 360° around a circle with a radius of 100 units.

If we increase the radius, the circle we get is larger. If we decrease the angle, less of the circle's circumference is drawn.

Challenges for Circles 2:

Why do you think the program runs faster than drawing 360-gons?

Recreate the below pattern (there are five red circles, ten green and fifteen blue):

Five small circles, ten medium circles and fifteen large circles equally spaced around a single contact point that marks the start and end of each.

Extension Challenges for Circles 2:

Try to recreate the following:

five small circles, ten hexagons and fifteen large squares all in evenly spaced rotation around their contact point (the start and end point of each shape) five circles forming a ring around the turtle An emoji like design, a circular face with a round left eye, an arc for the right eye to denote winking and a semi-circle for a grin

The first of these is just an evolution on last exercise above, where the green circles have been replaced by hexagons, whilst the blue have been replaced with squares.

The second involves the use of 'pen up' and 'pen down' to change the starting point for each circle.

The third is a combination of shapes, movements and pen usage - all arcs used are either 360° or 180°.


The arc block we were using in Circles 2, can be used to draw curves of any type.

This allows us to form a petal shape using this basic program:

The program for drawing a simple petal. This involves a repeat twice block containing an arc command with and 90° angle and 100 unit radius and a turn right command set to 90°

You can change either of the arc values to adjust the curve and size of the petal. However, whenever you change the angle you will also need to change the turn right command value. The turn right value is calculated using 180 − the arc angle

So, if you change the arc angle to 45°, the turn right value change to 180 − 45 = 135°.

Challenges for Petals:

Try drawing a petal shape with an arch angle of 67°.

Create the below pattern with a petal shape of your choosing:

six petals evenly arranged in a rotation from the starting point for each one.

Practise layering petals as demonstrated here:

a rotational arrangement of five of one style of petal overlaid onto the same pattern made up of eleven petals of a different size

Extension Challenges for Petals

Using the 'store in' block, create a variable for the arc angle of your petal that will allow you to change this value and have the right turn angle correctly adjusted at the same time.

Can you make the petal shapes used vary randomly? For this you will need to consider the value ranges for the arc angle and the radius.

Try and see if you can create a flower generator that produces a random flower everytime.

Producing a flower

We hope you have taken the opportunity in the above sections to explore the software to a point where you can combine all your knowledge to produce a variety of flowers.

Now it is your turn to experiment with what flowers you can produce and the method you prefer

Consider adding extra finishing touches such as stems, leaves or even putting multiple flowers in a bouquet.

We would really like to see your finished designs and share them here to help inspire others. Please send your Turtle Blocks file to nar25@aber.ac.uk