• Parametric Design
• 2D
• Loops

Loops

After the first few experiments, you have probably realized, that when you want to build more complex layouts, you have to write a lot of code. While some code will always need to be written, some repetetive layouts can be easily accomplished with a loop. Similar to our draw-cycle, a loop repeats the same code several times:

While loop

For using the while-loop, we need to define a condition, as long as this condition is met, the loop continues running. In the example below, the while-loop keeps iterating until the variable x is equal or bigger than 10:

/lectures/2d/loops/while/sketch.jsView on GitHub

Be careful with while loops, they can potentially crash your code if they never reach their end condition.

Nested loops

We can nest as many loops as we want. If we want to build a grid of circles, we could use two nested loops:

/lectures/2d/loops/whilenested/sketch.jsView on GitHub

For-Loop

The for-loop is very similar to the while-loop:

let i = 0;
while (i < 10) {
  i += 1;
}
// the same as:
for (let i = 0; i < 10; i += 1) {
}

To initiate a for-loop, we need to define 3 things:

1. The start value: let i = 0;
2. Under what condition should our loop continue: i < 5;
3. What should happen at the end of each loop interval: i += 1

In many cases, the for-loop is the quicker way of defining a loop, as we can define the start value of our loop variable, the condition, as well, as what happens at the end of each loop, in one simple line:

/lectures/2d/loops/for/sketch.jsView on GitHub

In the case above, we set the variable x to be 1 when we start our loop. And the loop should be continued as long as x < 20, if x is bigger than 20 the loop will stop. At each interval we than add 1 to x. The result of this loop, is that our loop runs 19 (!) times. Inside the loop (curly brackets > another nested scope), we can use the variable x. In the example above, we increase the x-value of our circle.

Examples

Following two of examples for loops.

Generating a grid, that fills the whole canvas area:

/lectures/2d/loops/forfilling/sketch.jsView on GitHub

We can also modify the loop-variable inside the loop (try re-running the code):

/lectures/2d/loops/forrandom/sketch.jsView on GitHub

The while loop can be interesting if we want to generate a number that is different to an existing number (this becomes more interesting in the next chapter when we introduce arrays):

const num1 = Math.round(Math.random() * 10);
let num2 = num1;
while (num2 === num1) {
  num2 = Math.round(Math.random() * 10);
}

In the above example we create two numbers. If the numbers are the same. The loop will try to find a new number that is different, running another iteration.

Inspiration: Color variations II

Try changing the size or the fill command (and re-run the code) to see how it affects the outcome.

/lectures/2d/loops/randomcolors/sketch.jsView on GitHub

Back to top