Week 04: Repetition, Decisions and Randomization

Today we will be talking about repetition and patterns in nature and art and how to replicate this in p5js using for loops. We will also be discussing how to make decisions while using a for loop by using if/else statements. Lastly we will be looking at how to use organized randomization and Perlin Noise to add some random elements to your p5js sketch.

Lecture Video

Coding Examples
For Loop
Circle Pattern
Sin and Cos Shapes
If Statements
Paul Rand Poster
Random Basic
Random Shapes
Random Analogous Color Scheme
Sin and Cos Random
Sin and Cos Noise
Basic Noise
Noise Cloud

Helpful Videos
For Loops, The Coding Train
Conditional Statements, The Coding Train
Random Function, The Coding Train
Perlin Noise, The Coding Train

Lecture PDF

Guest Speaker
Professor Christopher Hanusa shares his math inspired artwork and talks about the classes he teaches at Queens College in the Math department that are art focused.

In Class
Take the Sol Lewitt description below. Using a for loop and if statements create a design in p5js based on the instructions:
“Six white geometric figures (outlines) superimposed on a black wall.”

1. Use p5js to design a pattern for gift wrapping paper. You must use a for loop, if statements and either the random or noise function.
2. Watch the lecture video for Week 5 on Functions, Classes and Typography.

Methods and Functions Discussed

Repetition – for loop, ++, – –, +=, -=, *=, /=, ceil(), floor(), round(), min(), max(), sin(), cos()

Decisions – if, else, >, <, >=, <=, ==, !=, ||, &&, !

Randomization – random(), noise(), noiseSeed(), noiseDetail()