Two rows, two rules

Challenge 15 of 16

Two loops one after the other, each with a question of its own, so the two rows are picked apart in different ways. The top row keeps its front and the bottom row keeps its back.

Choose the sign each row needs.

Your code JavaScript

Choose the sign each row needs.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Choices in a Loop

Last topic ended with four drawBadge lines saying very nearly the same thing. A loop already knows how to repeat a line like that. Put the question inside it and one decision covers the lot.

for (var i = 0; i < 6; i = i + 1) {
if (i > 2) {
shapeColour(RED);
} else {
shapeColour(CYAN);
}
circle(40 + i * 64, 170, 54);
}

The if is asked again on every single turn, with whatever the counter is holding at that moment. Six turns, six answers, and the row comes out split.

The counter starts at 0. That matters more here than anywhere else, because a question about the counter is really a question about position in the row. i > 2 leaves the first three alone and catches the last three. i == 3 picks out the fourth circle, not the third.

The question does not have to be about the counter. Work something out first and ask about that instead:

var howTall = 40 + i * 44;
if (howTall > 160) {

and the row becomes a chart with its tall bars called out.

A chain fits inside a loop exactly as a single if does, so every turn can walk a queue of bands.

Then there are two counters. A grid is a loop inside a loop, and with both counters in hand you can ask a question that compares them with each other:

if (row == col) {

That is true only where a square is as far across as it is down — a diagonal, drawn without ever naming a single one of its squares. Ask it with a bigger or smaller sign instead and it cuts the grid in half along that same line.

One thing to watch when you are working out a picture. In a loop it is the SIGN that changes everything and the number that changes very little. Get the number wrong by one and a single shape moves; get the sign the wrong way round and the whole row swaps over.

And one thing a single if still cannot do: colour the middle of a row. That is far enough along AND not too far, which is two questions at once. Next topic.