Author: danne

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

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

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. 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()

Lecture
Today we will be talking about color theory for the visual arts. How colors interact with each other and traditional color schemes that have been proven to work well. What moods different colors represent. And of course how to create all of these colors using p5js. We will also be covering how to export a image and a SVG from p5js.

Lecture PDF

Lecture Video

Other Links
Interaction of Color App
Color Theory Game
Coding Train Modulo Explanation
p5 SVG Library

Coding Examples
Color Mode RGB
Color Mode HSB
Opacity
Monochromatic
Analogous
Complimentary
Triadic
Quadratic
Grayscale
Color Variable
Export Image
Export SVG

In Class
Add color to your posters you designed for this week. Play around with different color schemes.

Homework
1. Read the chapter on color on www.programmingdesignsystems.com
2. Suggested Reading: Pages 85 – 93 in Processing, by Casey Reas and Ben Fry.
3. Use p5js to design a poster that represents who you are. Pick your favorite color as a base color and play with the color schemes we went over today or use an analogous color scheme based on the month your birthday is in. This can be realistic or abstract, as long as you can explain your reasons behind the poster.
4. Be prepared to share your poster designs with the class on Slack next week.
5. Watch the lecture video for Week 4 and come to class with questions.

---

Functions Discussed

Modes – colorMode(RGB), colorMode(HSB)

Mapping Modes – colorMode(HSB, 100), colorMode(HSB, 360, 100, 100)

Color Schemes – Monochromatic, Analogous, Complementary, Triadic and Quadratic

Fixes – modulo %

Opacity – colorMode(HSB, 100, 100), colorMode(HSB, 360, 100, 100, 100), fill(360, 100, 100, 50)

Variable – Color colorName  = color(360, 100, 50);

SVG Library

Lecture
Today we will be talking about how forms are used for graphic design. We will discuss the basic relationships between these forms, i.e. format, shape, position, dimension and rotation. How different forms can represent different emotions. Once we understand how to use these forms we will learn how to create them using p5js and code.

Lecture PDF

Bezier Curve Game

Suggested reading:
Programming Design Systems, Chapter Shapes

Lecture Video

Coding Examples
In Class Demo
Simple Shapes
Ice Cream Cone
House
Bezier Vertex
Curve Vertex
Brockmann Poster
BIG Movie Poster

Homework
1. Use p5js and the shape functions you learned today to design a movie poster for your favorite film or TV series. You can only use grayscale values and you may not use text.
2. Have the link to your p5js sketch ready to share on Slack during our next class.
3. Watch the video of the Week 3 lecture and come with questions to our Slack class next week.

---

Functions Discussed

Format – createCanvas(), background()

Shape – point(), line(), rect(), ellipse(), triangle(), quad(), beginShape(), endShape(), vertex(), bezierVertex(), curveVertex() also covering ellipseMode(), rectMode(), fill(), noFill(), stroke(), noStroke(), strokeWeight()

Position – rect(10, 20, 10, 10), translate(), push(), pop()

Dimension – rect(10, 20, 10, 10), scale()

Rotation – rotate(PI), radians(180)

Variables – width, height, displayWidth, displayHeight

Class Zoom link will be emailed to your CUNY email account

Lecture
For our first class we will go over a brief history of computer programming, how programming has been used as an artistic medium in the past and introduce you to p5js which is the framework we will be using in this class.

Lecture PDF

p5js Web Editor Demo

In-Class Assignment

1. Sign up for Slack.
2. Send an email using the email address you use for Slack to [email protected] so I can add you to the class Slack channel.

Homework

1. Read through the Getting Started page: p5js.org/get-started
2. Click around and look at some of the examples: p5js.org/examples/
3. Be prepared to share your favorite example in class next week.
4. Watch Dan Shiffman’s video on Programming with p5js and p5js Web Editor.
5. Watch the video of the Week 2 lecture and come with questions to our Slack class next week.

p5js Editor
editor.p5js.org