Creative Coding for Creative Teachers

🔁 for Loops

Do Now (in Google Classroom)

Create this (or as close as you can) using ONE ellipse() and a while loop.

Let’s go back to NYU.

for loops

How many ellipses will draw?

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  strokeWeight(4);
  stroke(255);

  // nested loop:
  y = 50;
  for (var x = 25; x < 100; x = x + 50) {

    ellipse(x, y, 50, 50);
  }

}

How about now?

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  strokeWeight(4);
  stroke(255);

  // nested loop:
  y = 50;
  for (var x = 25; x < 100; x = x + 50) {
    for (var y = 25; y < 100; y = y + 50) {
      ellipse(x, y, 50, 50);
    }

  }
}

Nested Loops

A loop in a loop.

In other words…