Week 3 — Loops and Repetition · naturalfreakuency

Loops — how to draw hundreds of shapes without writing hundreds of lines. Covers while and for, nested loops, Moire patterns, and beginShape/endShape for custom geometry.

Loops

While loop - Anatomy

while(true condition){
    Do this each loop iteration
}

For loop - Anatomy

for (start condition; exit condition; iterator){
    Do this each loop iteration
}

exit condition can be until a certain value or until and including a certain value i.e., i < value; or i <= value;
iterator can move one value each loop or more than one. i.e., i++ or i+=x;

Nested Loops - Looping in 2-Dimensions

Nested while loop - Anatomy

while(x is true condition){
    while (y is true condition){
        Do this each loop iteration
        increment y;
    }
    increment x;
}

Nested for loop - Anatomy

for (x start condition; exit condition; x-iterator){
    for (y start condition; exit condition; y-iterator){
        Do this each loop iteration;
    }
}

Moire Patterns

A moire pattern is an interference pattern that is sometimes produced in digital images, particularly when a printed image is scanned. Two patterns of circles or lines overlap along with sketchy alignments, and light and dim lines are produced. More on this in wiki

Overlapping similar patterns would be simple start.

beginShape() and endShape()

Anatomy

beginShape()
    vertex(x-coordinate, y-coordinate);
endShape()

Parameters available for beginShape() are

POINT
LINES
TRIANGLES
TRIANGLE_FAN
TRIANGLE_STRIP
QUADS
QUAD_STRIP
TESS (WebGL)

The only parameter available for endShape() is CLOSE (Creates a closed curve)

Additional Resources: Arrays

Repetition, Rhythm and Pattern
The Patternbase Digital Archive
Arrays are covered later sections. Some simple examples for using arrays

Examples

Example sketches

The p5 sketches for this week, from the course repo.

3.2 — Loopsrepo ↗

function setup() {
  createCanvas(400, 400);
}

function draw() {
  var x = 0;

  // while loop
  while (x < width) { // Loop stops when this condition is false
    fill(0, 255, 0);
    noStroke();
    ellipse(x, height / 3, 20, 20);
    x += 20; //Controls the number itertions
  }

  // for loop
  for (var i = 0; i < 20; i++) {
    noFill();
    stroke(0);
    rect(i * 20, 2 * height / 3, 15, 15);
  }
}

3.3 — Looping in 2Drepo ↗

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(255);

  // Nested while loop
  /*var x = 0;
  beginShape(LINES);
  while (x < width) {
    var y = 0;
    while (y < height) {
      vertex(x, y);
      y += 10;
    }
    x += 10;
  }
  endShape();*/

  // Nested for loop
  for (var x = 10; x < width; x += 20) {
    for (var y = 10; y < height; y += 20) {
      ellipse(x, y, 20, 20);
    }
  }
}

3.4 — Moire Patternsrepo ↗

var theta = 0.0;
var rectWidthMultiplier = 10;
var rectHeightMultiplier = 20;
var rotationSpeed = 0.01;

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
}

function draw() {
  background(255);
  noFill();

  //stationary rect
  push();
  translate(width / 2, height / 2);
  for (var i = 0; i < 25; i++) {
    rect(0, 0,
      i * rectWidthMultiplier,
      i * rectHeightMultiplier);
  }
  pop();

  //rotating rect
  push();
  translate(width / 2, height / 2);
  rotate(theta);
  for (var i = 0; i < 25; i++) {
    ellipse(0, 0,
      i * rectWidthMultiplier,
      i * rectHeightMultiplier);
  }
  pop();
  theta += rotationSpeed;
}

3.5 — beginShape and endShaperepo ↗

function setup() {
  createCanvas(500, 500);
  frameRate(10); //Defines the framerate for the sketch render
}

function draw() {
  background(255);
  fill(120, 40, 180);
  beginShape()
  for (var i = 0; i < 24; i++) {
    vertex(i * random(100), random(height));
  }
  endShape(CLOSE)
}

Homework — Moire Patterns

Some solutions. More in the repo.