For loops and if statements

Lecture slides

https://slides.com/otso_havanto/programming-for-visual-artists-5/embed

If statements

For loops

Introduction to for-loops

Example: Line and circle with for loops

Line with for loop

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

function draw() {
  background(255);
  for (let x = 0; x < width; x += 10) {
    point(x, height / 2);
  }
}

Line with for loop and noise

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

function draw() {
  background(255);
  for (let x = 0; x < width; x += 10) {
    let y = map(
      noise(x / 100, frameCount / 100),
      0,
      1,
      height / 2 - height * 0.25,
      height / 2 + height * 0.25
    );
    point(x, y);
  }
}

Circle with for loop

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

function draw() {
  background(255);
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let x = width / 2 + cos(a) * height * 0.25;
    let y = height / 2 + sin(a) * height * 0.25;
    point(x, y);
  }
}

Circle with for loop and noise

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

function draw() {
  background(255);
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let r = map(noise(a, frameCount / 100), 0, 1, height * 0.1, height * 0.25);
    let x = width / 2 + cos(a) * r;
    let y = height / 2 + sin(a) * r;
    point(x, y);
  }
}

How to get rid of the offset between first and last point: Polar Perlin Noise Loops

Geometric composition with for-loops

Assignment

Option 1:

Use the examples in the last video for creating a generative composition. If you want, you can use the following rules to get started:

• Pick two colors
• Create clusters of shapes with four loop using only one 2d-primitive
• Stop draw loop with noLoop(); after a certain frame
• Generate the two colors with code

Example sketch with the rules above: https://editor.p5js.org/otsohavanto/sketches/GJREg3-C8

Option 2:

See the Wave Clock example by Matt Pearson on the lecture slides. Try to create a similar composition with your own code. You can start with the Circle with for loop and noise example. Experiment by drawing other primitives than point, such as line or other 2d shape primitives based on the generated coordinates and use angle, coordinates and/or noise to modify properties (such as color, size, rotation, etc.) of the shapes.

One possible idea to explore would be to take something such as Epitrochoid, draw it using a for loop and vertices and then use noise to modify the shape.

Submit a link to you sketch on MyCourses.