# For loops and if statements

## Lecture slides

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

## If statements

Quiz with variables and if-statements

## For loops

For loop quiz

### 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

## 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.