A row that leans

Challenge 14 of 16

Two calls to the same row, and the second one is handed a different down. Between them they read as a slab rather than two rows, which is the first time a loop has drawn something you could not easily draw by hand.

Set the gap and the two heights.

Your code JavaScript

Set the gap and the two heights.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson The Counter is a Position

Last topic finished with five rings stacked on one spot. The loop ran five times, the drawing was the same every time, and no size in the world was going to separate them.

The counter fixes that, because i is an ordinary number and a position is an ordinary number:

for (var i = 0; i < 5; i = i + 1) {
circle(60 + i * 70, 200, 50);
}

The first time round i is 0, so that is 60. Then 130, 200, 270, 340. One line, five circles, evenly spread.

Two numbers decide a row and it is worth naming them. 60 is where it starts, because i is 0 on the first turn and nought lots of anything is nothing. 70 is the gap between one shape and the next. Change the start and the whole row slides; change the gap and it spreads out or bunches up.

Everything else in this topic is that idea somewhere else.

Put i into the down instead and you get a column. Put it into both and each shape moves along and down at once, which draws a diagonal — and notice that neither sum mentions a diagonal. It is just two rows of arithmetic that happen to be running at the same time.

Take the gap away instead of adding it and the row runs the other way, even though the counter still only counts up. A gap smaller than the shape makes them overlap, which is how you draw scales or a stack of coins.

And the loop does not care what its lines draw, so it can call one of your own functions. A row of trees is one call to drawTree with i in the across, and a whole street of houses is the same line with a different name in it.

One more move worth having. The loop can live inside a function of yours, and then the row takes its height as an input:

function drawRow(y) {
for (var i = 0; i < 5; i = i + 1) {
circle(60 + i * 70, y, 44);
}
}

Now drawRow(80) and drawRow(320) are two rows, and you wrote the loop once.

Next topic all three parts of the loop header are yours to change: where the counter starts, where it stops, and how big a step it takes.