Heartbreakers and The Pixies - Selection Statements

Recently we have seen how nested loops – a loop inside of another loop – can be used to create a grid of shapes.

For example, consider this poster for The Heartbreakers:

The exact code for how that grid is created is not important right now.

The key question at hand:

How are some squares made to be white, and others blue?

The answer is that this comes down to selection.

When a certain condition is true, we draw white squares.

Otherwise, we draw blue squares.

Syntax

There are multiple types of programming language structures that allow for selection to occur.

In this discussion, we will look at if statements.

The general syntax is:

In that example, only when the condition evaluates to true does the block of code inside the { } brackets get selected to be run. Otherwise, the block of code is skipped.

Here is another example:

In this example, when the condition is true the first block of code runs. Otherwise, else, the second block of code runs.

Application in Heartbreakers poster

It is the second example that is being used in this poster:

The precise code is:

Let's dig into that a bit further. How did we come up with the condition to check for?

Adding some code inside the loops that draw the squares is helpful:

It is not strictly necessary that you understand that code, only that you are aware of what it produces – please examine the following output:

What we are seeing, for each square, is:

1. The co-ordinates of the anchor of the square.
2. The sum of the $x$ and $y$ co-ordinates for each square.

Looking carefully at the sum of the co-ordinates for the squares that exist along the diagonal where we want the colour to change, we may notice something of interest:

The sums on all the squares along that diagonal of interest is $-290.0$.

Having looked carefully, we now have our condition.

We write this if statement:

... and we are selecting a portion of the squares to be drawn with a white fill:

Any squares where the sum of the co-ordinates is greater than $-290$ will be drawn in white.

All other squares are drawn in blue.

Arithmetic operators

The co-ordinates for the anchor position of each square were added using the + operator inside the if statement's condition:

Here is the complete list of arithmetic operators that can be used in an expression:

Note that the usual order of operations will be respected when brackets are used.

Comparison operators

We compared the sum of the co-ordinates for each square's anchor position to the value -290, using the > operator:

Here is the complete list of comparison operators that can be used in an expression:

Checking multiple conditions

In certain circumstances it is useful to check multiple conditions with an if statement.

Logical AND

Should we want to select a block of code to be run only when both conditions are true, we use the && operator, which is read as "and".

For example:

Logical OR

Should we want to select a block of code to be run when either conditions are true, we use the || operator, which is read as "or".

For example:

Exercise: Pixies

Apply the principles you have been introduced to above to build the following poster:

Here is the poster with a grid:

// Draw the co-ordinates of the anchor point
turtle.drawText(message: "(\(i), \(j))",
				at: Point(x: i - 30,
					  y: j),
				size: 12)

// Draw the sum of the anchor point co-ordinates
turtle.drawText(message: "Sum: \(i + j)",
				at: Point(x: i - 30,
					  y: j - 10),
				size: 12)