week04 02 typography - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda:

  1. a bit more transform, rotateX, Y, Z
  2. (optional) map (boundary check)
  3. activity: typography, Shel Silverstein's poem
  4. Q&A and troubleshooting

review of interaction

We will check mousePressed() + mouseReleased() and keyPressed() + keyReleased(). You may need to check noLoop() and background setting to make it properly work.

loadFonts

We will experiment how to load the fonts (from google fonts).

rotateX, Y, Z

Let's review some of text related code -- translation and rotate animation.

And also try 3D rotation.

 createCanvas(width, height, WEBGL);

 rotateX(angle);
 rotateY(angle);
 rotateZ(angle);

sentence to word, split()

We learned how to show characters one by one from the long text. What if we want to have the words and make a typographic variation?

https://p5js.org/reference/#/p5/split

(optional) map, constrain

https://p5js.org/reference/#/p5/map

https://p5js.org/reference/#/p5/constrain

activity: typography, Shel Silverstein's poem

As a group activity, I want you to design one page calligram with the poem. Any poem by Shel Silverstein.

https://www.harpercollins.com/blogs/harperkids/shel-silverstein-poems

or something you like from any of his work. My favorite is this:

Shel Silverstein, Ations

review: invitation

Let's have a little show time for the invitation assignment.

Q&A and troubleshooting