Summary

Daniel Shiffman demonstrates how p5.js 2.0 evolves typography from flat text into fully extrudable 3D geometry. This update introduces native support for variable fonts and contour data, streamlining the creation of complex generative text effects directly in the script.

Key Topics

• Variable Fonts: A modern font format that allows multiple variations (like weight, width, and slant) to be stored in a single file. In this episode, it matters because it enables the `textWeight` function to dynamically change font thickness via code. This implies that designers can create fluid, responsive typography that reacts to user input in real-time.
• Asynchronous Font Loading: The use of `async` and `await` keywords to load fonts directly from URLs without blocking the rest of the script. This matters because it simplifies the workflow of using web fonts, such as those from Google Fonts. For the listener, it means cleaner code and fewer steps in the HTML setup.
• Text-to-Contours Geometry: A function that extracts the vector path data of a font as a series of points and nested arrays. It matters here because it provides the mathematical foundation for tracing letterforms for animation or particle systems. It changes the listener's workflow by providing an 'angle' property for each point, facilitating automatic orientation.
• 3D Extrusion: The process of giving depth to a 2D shape to create a 3D model. In p5.js 2.0, this is handled by `textToModel`. This allows developers to treat text as a standard 3D object in a WebGL environment, enabling lighting, shadows, and spatial manipulation.

Key Takeaways

• Update your p5.js sketches to version 2.0 to access the new typography API.
• Implement the async/await pattern for all font loading in the setup function.
• Use the 'angle' property from textToContours to align particles or shapes along letter paths.
• Experiment with the 'extrude' property in textToModel to create 3D typography.