Week 04: Loops

Topics

Writing larger programs, one feature at a time
For-loops
While-loops
Trigonometry
Drawing with trigonometry: spirals, circles, polygon and roses.

1. Resources:

2. Interactive heart demo

/*
 * Aline Normoyle
 * 9/29/2020
 * Bezier heart with interactive control points
 */
int pointRadius = 25;  // radius for visualizing control points
int cbotX = 50;   // bottom control point
int cbotY = 350;
int ctopX = 75;   // top control point
int ctopY = 40;
int botX = 250;   // end points of bezier curve
int botY = 400;
int topX = 250;
int topY = 150;
boolean showControls = true;
String selectedCtrlPt = "None";

void setup() {
  size(500,500);
  pixelDensity(2);
  textSize(32);
}

void draw() {
  background(255);

  if (mousePressed && showControls == true) {
    if (selectedCtrlPt == "Top") {
      ctopX = mouseX;
      ctopY = mouseY;
    }
    else if (selectedCtrlPt == "Bottom") {
      cbotX = mouseX;
      cbotY = mouseY;
    }
  }

  fill(200,0,0);
  bezier(topX,topY, ctopX,ctopY, cbotX,cbotY, botX,botY);
  bezier(topX,topY, width-ctopX,ctopY, width-cbotX,cbotY, botX,botY);

  if (showControls) {
    circle(ctopX, ctopY, pointRadius);
    circle(cbotX, cbotY, pointRadius);
    circle(width-ctopX, ctopY, pointRadius);
    circle(width-cbotX, cbotY, pointRadius);

    line(topX, topY, ctopX, ctopY);
    line(botX, botY, cbotX, cbotY);

    fill(0);
    text("Top:    "+ctopX+", "+ctopY, 0, height - 40);
    text("Bottom: "+cbotX+", "+cbotY, 0, height - 10);
  }
}

void mousePressed() {
  if (dist(mouseX, mouseY, ctopX, ctopY) < pointRadius) {
    selectedCtrlPt = "Top";
  }
  else if (dist(mouseX, mouseY, cbotX, cbotY) < pointRadius) {
    selectedCtrlPt = "Bottom";
  }
  else {
    selectedCtrlPt = "None";
  }
}

void keyPressed() {
  if (key == 'd') {
    if (showControls == true) {
      showControls = false;
    }
    else {
      showControls = true;
    }
  }
}

3. Loop Examples

3.1. Inifinite Loop

An infinite loop occurs when the loop condition never becomes false!

void setup() {
  size(500,500);

  float counter = 0.0;
  while (counter < 20.0) {
    println("repeat this statement");
  }
}

3.2. Simple Loop

week04 simple

void setup() {
  size(500, 500);
  for (float x = 0.0; x < width; x += 50) {
    rect(x,x, 100, 100);
  }
}

3.3. Ten Lines

week04 10Lines

Method 1

void setup() {
  size(500, 500);
  strokeWeight(10);

  float delta = width/10.0; // how far apart each line is
  // counter approach
  for (int i = 0; i < 10; i++) {
    float x = i*delta;
    line(x, 0, x, height);
  }
}

Method 2

void setup() {
  size(500, 500);
  strokeWeight(10);

  float delta = width/10.0; // how far apart each line is
  // accumulator approach
  for (float x = 0.0; x < width; x += delta) {
    line(x, 0, x, height);
  }
}

3.4. Neon line

week04 neon

void setup() {
  size(500, 500);
  background(0);
  blendMode(ADD);

  stroke(100, 100, 50, 100);
  for (float weight = 100; weight >= 1; weight -= 10) {
    strokeWeight(weight);
    line(0, 0, width, height);
  }
}

3.5. Random circles

Distribute circles randomly on the canvas. Below we automate the colors in two ways. Other properties you can experiment with are

Randomized sizes
Other shapes or lines
Randomized stroke
Transparency

Random colors

week04 randomColor

void setup() {
  size(500,500);

  for (int i = 0; i < 500; i++) {

    float x = random(0, width);
    float y = random(0, height);

    float r = random(0,255);
    float g = random(0,255);
    float b = random(0,255);

    fill(r, g, b);
    ellipse(x, y, 100, 100);
  }
}

Gradient colors

week04 gradient

void setup() {
  size(500,500);

  for (int i = 0; i < 500; i++) {

    float x = random(0, width);
    float y = random(0, height);

    float u = y/height; // between 0 and 1
    color c = lerpColor(#2890F5, #E01B88, u);
    fill(c);
    ellipse(x, y, 100, 100);
  }
}

3.6. Circle

week04 circle

void setup() {
  size(500, 500);
  pixelDensity(2);

  float radius = 100.0;
  int numSlices = 100;
  float delta = 2 * PI / numSlices;
  float cx = width * 0.5; // center X
  float cy = height * 0.5; // center Y

  beginShape();
  for (int i = 0; i < numSlices; i++) {
    float angle = i * delta;
    float x = cx + radius * cos(angle);
    float y = cy + radius * sin(angle);

    vertex(x, y);
  }
  endShape(CLOSE);
}

3.7. Explosion

week04 explode

void setup() {
  size(500, 500);

  float radius = 100.0;
  int numSlices = 100;
  float delta = 2 * PI / numSlices;
  float cx = width * 0.5; // center X
  float cy = height * 0.5; // center Y

  beginShape();
  for (int i = 0; i < numSlices; i++) {
    float angle = i * delta;
    radius = 100.0 + random(-50, 50);
    float x = cx + radius * cos(angle);
    float y = cy + radius * sin(angle);

    vertex(x, y);
  }
  endShape();
}

3.8. Spiral

week04 spiral

void setup() {
  size(500, 500);

  float radius = 2.0;
  int numSlices = 100;
  float delta = 2 * PI / numSlices;
  float cx = width * 0.5; // center X
  float cy = height * 0.5; // center Y
  int numRepeats = 4; // how many times to go around

  beginShape();
  for (int i = 0; i < numSlices * numRepeats; i++) {
    float angle = i * delta;
    float x = cx + radius * cos(angle);
    float y = cy + radius * sin(angle);

    vertex(x, y);
    radius += 0.5;
  }
  endShape();
}

3.9. Wavy Circle

week04 wavy

void setup() {
  size(500, 500);

  int numSlices = 100;
  float delta = 2 * PI / numSlices;
  float cx = width * 0.5; // center X
  float cy = height * 0.5; // center Y

  beginShape();
  for (int i = 0; i < numSlices; i++) {
    float angle = i * delta;
    float radius = 200.0 + 10 * cos(angle*10);
    float x = cx + radius * cos(angle);
    float y = cy + radius * sin(angle);

    vertex(x, y);
  }
  endShape(CLOSE);
}

3.10. Rose curves

void setup() {
  size(500, 500);

  float radius = 200.0;
  int numSlices = 100;
  float delta = 2 * PI / numSlices;
  float cx = width * 0.5; // center X
  float cy = height * 0.5; // center Y
  int numRotations = 1; // Controls whether we trace around the circle multiple times
  float k = 4; // Controls shape

  beginShape();
  for (int i = 0; i < numSlices * numRotations; i++) {
    float angle = i * delta;
    float x = cx + radius * cos(k * angle) * cos(angle);
    float y = cy + radius * cos(k * angle) * sin(angle);

    vertex(x, y);
  }
  endShape(CLOSE);
}

week04 rose1

The above image was created with the following parameters:

k = 4
numRepetitions = 1

week04 rose2

The above image was created with the following parameters:

k = 2.7
numRepetitions = 10