Week 05: Functions, Classes and Typography

We are meeting over Slack this week.

Lecture

This week’s lecture will delve into the fundamentals of functions and classes, exploring how you can create your own. We’ll embark on a journey through the evolution of written language, from the inception of movable type to modern computing. Additionally, we’ll examine various font types and their appropriate usage, exploring both computational typefaces and artistic letterforms. Finally, we’ll cover the essentials of typography in p5js, including rule-based typography generation through code, and the creation of custom fonts by modifying existing typefaces using the p5.Fonts class for p5js.

• Prof Antonius’s Loom Video for the week

Lecture Slides

• Prof Danne Woo’s Lecture slides

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

Helpful Resources

• Example Fonts Zip File
• A Brief History of Title Design
• Helvetica Documentary
• Metaflop
• Lava Sans
• Generative Typography Class
• Karsten Schmidt Type and Code

Coding Examples

• Basic Type
• Type and Fonts
• Textbox
• Face Function
• Star Function
• Simple Class
• Rule-Based Type System
• Outline-Based Type System
• P5 Font working example

In Class Coding Examples

• Creating a triangle
• Randomizing a triangle location and angle
• P5 Font
• Check if the mouse is inside a rectangle
• Push and Pop example
• Using modulo to make even rows offset

In Class

1. We will review the patterns you made using for loops, if statements and either the random or the noise function. Be prepared to talk about it.
2. Sketch out a rule-based typeface with a pencil on paper. Take a picture of it. Once you have an idea of what to create, try and make A, B and C in p5js based on the rules you put together. Upload the photo of your sketch as well as the link to the p5js project to Slack.

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. You have two options. You only need to do one of the two. Choose one:
   • Pick a word and use p5js to design a typeface that represents that word. You can either create a rule-based typeface using simple shapes or use p5.Font to modify an existing typeface. You must use at least one of the following; for loop, if statement, random or noise. Meaning do not do something you can create in Illustrator.
   • Pick your favorite quote or poem and use different type treatments in p5js to create a layout that visually represents the selected quote or poem. You can only use text.
2. Share your sketch URL on Slack during our next class and be prepared to discuss your design choices.
3. Watch the lecture video for Week 6 on Data Visualization.

Homework Rubric

• 80 / 100 - Student used p5js and picked one of the options above.
• 20 / 100 - Student submits the link to their p5js sketch to Slack on time before the next class.

back