Week 02: Forms, Shapes and Variables

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
Bezier Vertex
Curve Vertex
Brockmann Poster
BIG Movie Poster

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

FormatcreateCanvas(), 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()

Rotationrotate(PI), radians(180)

Variables width, height, displayWidth, displayHeight