Generative Typography

If typography is the study of using forms to communicate meaning, then can code help us discover new forms? If we apply generative techniques to the field of graphic design can we end up creating typography systems that are novel and always changing?

Cooper Union Fall 2023

Color and Shapes

This week let's cover the basics of p5.js and learn how to sketch create shapes and use color.

    Prompt

    Create a sketch with a circle and colorful background.

    Example 1

    Prompt

    Option A: Create a modular letter using only shapes.

    Example 1

    Example 2

    Prompt

    Option B: Create a sketch inspired by Piet Mondrians Composition series. Use rectangles of various sizes and choose your own color palette.

    Example 1

    Text and Transformations

    This week let's dive into p5.js' typographic functions and different ways we can manipulate text.

      Prompt

      Create a sketch that uses text. It should contain two pieces of text each using a different color.

      Prompt

      Revisit your previous sketch and add two custom fonts to the composition.

      Translation

      Prompt

      Revisit your sketch and add a transformation.

      Motion and Events

      Let's continue to explore kinetic typography by incorporating motion and user events.

        Prompt

        Warm Up. Create a typographic sketch that responds to the user's mouse position.

        Example 1

        Prompt

        Revisit your last sketch and add a mouse event to it.

        Example 1

        Prompt

        Revisit your last sketch and have the displayed text respond to the user typing.

        Example 1

        Using p5 frames

        Prompt

        Create a typographic sketch that responds to the frameCount increasing.

        Example 1

        Using Sine Waves

        Prompt

        Revisit your warm-up sketch and animate the transformation using sin() and map().

        Example 1

        Variable Fonts

        Let's close out our final class by looking at variable fonts and other areas for you to explore!

          Prompt

          Warm Up. Create a typographic sketch that uses a transformation.

          Example 1

          Prompt

          Pick one of the following words and bring it to life as a piece of kinetic typography. Bounce, Flip, Grow, Shrink, Spin, Stretch, Wiggle

          Example 1

          Example 2

          Future Learning

            Resources