Week 02: Forms, Shapes and Variables

We are meeting over Slack this week.

Lecture

Start by watching this update video!

This week, we’ll cover the use of forms in graphic design. We’ll explore basic connections between elements like format, shape, position, dimension, and rotation, and how different forms express various emotions. Once we grasp form utilization, we’ll move on to hands-on experience, learning to create them using p5js and code.

By the end of the week, please cover these functions and practice with them:

Format

• createCanvas()
• background()

Shape

• point()
• line()
• rect()
• ellipse()
• triangle()
• quad()
• beginShape()
• endShape()
• vertex()
• bezierVertex()
• curveVertex()
• ellipseMode()
• rectMode()
• fill()
• noFill()
• stroke()
• noStroke()
• strokeWeight()

Position (a little more advanced)

• translate()
• push()
• pop()

Rotation

• rotate()
• radians()

Global Variables

• width
• height
• displayWidth
• displayHeight

Some concepts to learn:

• camelCase - camelCase is a naming convention used in computer programming and coding where multiple words are combined, and each word, except the first one, is capitalized without any spaces or punctuation. The resulting name resembles the humps on a camel’s back, hence the term “camelCase.” This convention is often employed for variable names, function names, and identifiers in programming languages. For example, “camelCaseExample” is a representation of camelCase.
• Function - In JavaScript, a function is a block of reusable code that performs a specific task. Functions allow you to break down your program into smaller, manageable pieces, making your code more organized and easier to understand.
• Variable - In programming, a variable is a container or symbolic name for a value that can change during the execution of a program. It is a fundamental concept in coding, allowing developers to store and manipulate data.
• Loop - In programming, a loop is a structure that allows a set of instructions to be repeated multiple times. It’s a fundamental concept that helps automate repetitive tasks. In p5js, draw is a loop that repeats endlessly unless you change the default function settings.
• console log - you can find the location of x and y by using the console! Here’s a video that shows you how, and a sketch that you can look over to see how you can do it yourself.

Resources

1. p5js Editor
2. p5js references
3. Week 2 Lecture Video
4. Professor Danne Woo’s lecture slides for Week 2
5. Prof. Antonius’s tutorial for drawing with p5js

Suggested reading and links

1. Programming Design Systems, Chapter Shapes by Rune Madsen
2. Bezier Curve Game

In-Class Assignment

1. We will go over the examples students shared and discuss them in Slack.
2. Look over every link above to read what those functions do.
3. Sign up for Slack if you haven’t yet.
4. Send an email using the email address you plan to use for Slack to antonius.wiriadjaja@qc.cuny.edu

In-Class Assignment

50/100 - student joined Slack 50/100 - student shared a link to an example on time on Slack before class started and is present during class to explain why this example stood out to them.

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.

Homework Rubric

80/100 - student uses p5js and primitive shapes to design a movie poster that uses only grayscale values and does not use text. The student will get points deducted if they use text or color! 20/100 - student submits the link to their p5js sketch to Slack on time before the next class.

back