Week 04: Repetition, Decisions and Randomization

We are meeting over Slack this week.

Lecture

This week, we will discuss repetition and patterns in nature and art, and how to replicate them in p5js using for loops. We will also explore making decisions within for loops using if/else statements. Finally, we’ll examine how to incorporate organized randomization and Perlin Noise to introduce random elements into your p5js sketch.

Lecture Slides and extra videos

• Prof Danne Woo’s Lecture PDF
• Prof. Antonius W’s JavaScript Logic Addendum
• Prof Antonius W’s If Statement Loom Video
• Prof Antonius W’s If Statement Sketch

By the end of the week, please cover these coding examples and functions:

Methods and Functions Discussed

Repetition –

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

Decisions

• if
• else
• >
• <
• >=
• <=
• ==
• !=
• logical OR
• &&
• !

Randomization

• random()
• noise()
• noiseSeed()
• noiseDetail()

Coding Examples

• For Loop
• Circle Pattern
• Gradient
• 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

Guest Video

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.

• Professor Christopher Hanusa, Math + Art

In Class Code Examples

• If Else Statements within If Else Statements based on Ally’s code
• If Else Within If Else Code
• Explaining For Loops with Ellipses based on Jess’s code
• For Loops with Ellipses Code
• Arrays and For Loops Example based on Labiba’s code
• Arrays and For Loops Code
• Sin Waves or Noise based on Grace’s Code
• Sin Waves or Noise Code

In Class

1. We will review the selfies in code that you made for your homework.
2. 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.”
3. Share your new creation to the class.

To help you with your classwork, you can check out these resources on Sol Lewitt:

• Public Delivery: Why are Sol LeWitt’s wall drawings so influential?
• Arts for Transit: Sol LeWitt’s Swirling Rainbow at Columbus Circle
• Using ChatGPT to implement Sol LeWitt’s Wall Drawings

In Class Rubric

• 80/100 - Student shared links to their p5js sketches and is present during class to explain their process and ask / answer questions
• 20/100 - Student offered feedback to fellow students publicly in the Slack

Homework

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. Be prepared to share your looping designs with the class on Slack next week.
3. Watch the lecture video for Week 5 on Functions, Classes, and Typography.

Homework Rubric

• 80 / 100 - Student used p5js to design a pattern for gift wrapping paper.
• 20 / 100 - Student submits the link to their p5js sketch to Slack on time before the next class.

back