Interactive Typography

Creative Coding Workshop exploring the interconnection of Speech [-to-text], Variable Fonts, [p5.js] Javascript and audio spectrum analysis

Transcript

1. Interactive Typography Creative Coding Workshop exploring the interconnection of Speech [-to-text], Variable Fonts, [p5.js] Javascript and audio spectrum analysis PXL-MAD × PJAIT × IPCA BIP IPCA, Barcelos (Casa da Criatividade) 2024–10–08 Pedro Amado pamado@fba.up.pt
2. PXL-MAD × PJAIT × IPCA BIP 2 Table of Contents — Personal Presentation — Workshop Objectives — Sample case studies
3. PXL-MAD × PJAIT × IPCA BIP 3 Personal Presentation Pedro Amado Graphic Design Degree (FBAUP, 2002) MfA in Multimedia Art (FBAUP, 2007) Ph.D. in Communication Sciences and Technologies (UA, 2014) Integrated Member (Researcher / Board) of the i2ADS (2018—) Colaborator member of the ID+ / NIT (2021–) Portuguese Delegate for the ATypI w/ Vítor Quelhas (2012—) Founding member of the ATIPO (2018—) RESEARCH INSTITUTE IN ART, DESIGN AND SOCIETY
4. PXL-MAD × PJAIT × IPCA BIP 4 Personal Presentation Pedro Amado Graphic Design Degree (FBAUP, 2002) MfA in Multimedia Art (FBAUP, 2007) Ph.D. in Communication Sciences and Technologies (UA, 2014) Integrated Member (Researcher / Board) of the i2ADS (2018—) Colaborator member of the ID+ / NIT (2021–) Portuguese Delegate for the ATypI w/ Vítor Quelhas (2012—) Founding member of the ATIPO (2018—) RESEARCH INSTITUTE IN ART, DESIGN AND SOCIETY
5. PXL-MAD × PJAIT × IPCA BIP 5 https://www.14et.uevora.pt/ Join us in Évora!
6. PXL-MAD × PJAIT × IPCA BIP 6 https://pcd.fba.up.pt/ next edition T.B.A. Soon!
7. PXL-MAD × PJAIT × IPCA BIP 7 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e Interactive Type Workshop Program Part 1 — Understand the basic structure of a Javascript program (using p5.js) — Drawing basic shapes and user interaction Part 2 — Capturing (analyzing and visualizing) audio (volume & spectrum) Part 3 — Manipulating HTML elements (hey… it’s type! ;) — Accessing Font-Variation-Settings (pushing variable font axis!)
8. PXL-MAD × PJAIT × IPCA BIP 8 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e Interactive Type Workshop Program Part 4 — Developing a Speech-to Text audio reactive interactive typography poster building app (could this name be any longer?!)
9. PXL-MAD × PJAIT × IPCA BIP 9 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e
10. PXL-MAD × PJAIT × IPCA BIP 10 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e https://bit.ly/4dBAs5e
11. PXL-MAD × PJAIT × IPCA BIP 11 Sample Case Studies: Google knowledgebase: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web/interactive_animations_with_variable_fonts EX3 (7,5%) Individual ?! (teremos tempo?)
12. PXL-MAD × PJAIT × IPCA BIP 12 Sample Case Studies: Kobu foundry: https://www.kobufoundry.com/variable-fonts/ EX3 (7,5%) Individual ?! (teremos tempo?)
13. PXL-MAD × PJAIT × IPCA BIP 13 Sample Case Studies: Marie Malarmé https://marie.studiodev.xyz/ EX3 (7,5%) Individual ?! (teremos tempo?)
14. PXL-MAD × PJAIT × IPCA BIP 14 Sample Case Studies: Sensor Variable Font / Ivan Huelves Illas : https://www.sensorvariablefont.com/ EX3 (7,5%) Individual ?! (teremos tempo?)
15. PXL-MAD × PJAIT × IPCA BIP 15 Sample Case Studies: Typearture / Arthur Reinders Folmer https://www.typearture.com/ EX3 (7,5%) Individual ?! (teremos tempo?)
16. PXL-MAD × PJAIT × IPCA BIP 16 Sample Case Studies: Dinamo https://abcdinamo.com/news/using-variable-fonts-on-the-web EX3 (7,5%) Individual ?! (teremos tempo?)
17. PXL-MAD × PJAIT × IPCA BIP 17 Credits © Pedro Amado, 2024-10-07-9 Typography and Reading Experience BIP. Organized by Catarina Silva (Host) Ann Bessemans, Kevin Bormans, Ewa Satalecka, Jan Piechota, et al. Hosted at IPCA (Casa da Criatividade), Barcelos, 2024-10-08. Full sketches folder at: https://editor.p5js.org/pedamado/collections/40IoYUy0W Slidedeck available at: https://speakerdeck.com/pedamado/interactive- typography