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