Lecture
The lecture today will start with an explanation of what functions and classes are and how you can create your own. We will then jump into a basic history of the written word followed by the invention of moveable type and the computer. We will also go over the different types of fonts and how they should be used. We will then look at examples of computational typefaces and more artistic letterforms. Lastly we will be talking about the basics of type in p5js, how to create rule-based typography using code and how to create fonts based on modifying the outlines of existing typefaces using the p5.Fonts class for p5js or the Geomerative library for Processing.
Lecture Video
Coding Examples
Basic Type
Type and Fonts
Textbox
Face Function
Star Function
Simple Class
Rule-Based Type System
Outline-Based Type System
Helpful Links
A Brief History of Title Design
Helvetica Documentary
Metaflop
Lava Sans
Generative Typography Class
Karsten Schmidt Type and Code
In Class
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.
Homework
1. Option 1: 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.
Option 2: 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 project URL on Slack during our next class and be prepared to explain your design.
3. Watch the lecture video for Week 6.
Methods, Functions and Libraries Discussed
Simple Text – text(), textFont(), loadFont(), textSize(), textLeading(), textAlign(), textWidth(), textStyle(), p5.Font, textToPoints()