Working time: 5 days, 6 hours a day on-line
16 participants per group
About the workshop
This workshop introduces participants to the realm of possibilities in generating designs by live coding as a technique of sketching. From iterative changes with instantaneous feedback, shapes, motion, typography can all be explored in ways that typical software packages can't provide. Using p5.js via P5LIVE, we'll learn the basics of creative coding, turn type into anchor points, and develop visuals by manipulating these coordinates with new geometric forms and motion. Finally we'll learn to control parameters with graphical user interface (GUI) elements, such as sliders, to create custom tools for our own usage and the public to explore. This workshop is given as live technical inputs, collaborative coding sessions, partner discussions and a shared output.
The core objective of this workshop is to explore how creative coding can extend the realm of possibilities for typographic expression in motion without our web browsers. Furthermore, students will gain:
an introduction to p5.js, a powerful and easy to learn library for creating and styling shapes.
an introduction to P5LIVE, an environment for collaborative live coding of p5.js
drawing and customizing primitive graphic forms
animation techniques with basic math
turning type into points for customization
implementing graphical user interface (GUI) elements for turning explorative sketches into useful tools
techniques to combine basic building blocks of code into a complex program using logic, loops, and custom functions
This course will be delivered in synchronized form, with technical inputs the first couple days, followed by partner projects thereafter. Students will be brought up to speed with a crash course in p5.js, focusing on the functions and techniques necessary for our collective typographic focused project. The syncronized sessions will be recorded (only shared content and voices, no webcams), so that students can review material covered throughout the week. A website with an intro to programming and cheatsheets supplements these inputs to refer to in parallel. Throughout the project days, we'll take turns using breakout sessions for 1:2 discussions and code together in a collaborative environment (P5LIVE) to offer help where needed and work together.
Working in pairs, participants will create typographic focused generative designs, which will come together in the form of a workshop website. Here each project can be shared, explored, and remixed, as each program will be open-source and have the ability to be further live coded and customized. This will allow each participant to learn from one another, while the greater public can learn how each group achieved their results and test changing parameters on their own.
Tools & materials
Computer, laptop or desktop, not a tablet/phone (Mac, Windows, Linux are all fine)
Web browser (ideally Chromium based, ie. Chrome, Brave)
P5LIVE (will be introduced on first day)
This workshop will utilize p5.js (a browser based inspiration of Processing) via P5LIVE, a live coding collaborative environment created by the workshop author. We'll work entirely within our web browsers, programming virtually side by side.
Mo/Tue: Technical Inputs on p5.js (intense crash course!)
Wed/Thu: Partner projects with individual critiques and guidance
Fri: In the morning, gathering all projects, assembling into shared website to present
Ted Davis is an educator / designer / media artist originally from the United States and based in Basel, Switzerland, where he teaches interaction design and coordinates the UIC/HGK International Master of Design program within the Visual Communication Institute, The Basel School of Design HGK FHNW. His research and teaching activities focus on generative design through creative coding, reactivating older ‘new media’ through newer programming means and the volatility of digital media through glitch. His open source projects (basil.js, XYscope, P5LIVE) enable designers to program within Adobe InDesign, render vector graphics on vector displays, and collaboratively create live coded visuals with p5.js. With international exhibits, lectures and workshops, he empowers students to take hold of the computer’s ability to design possibilities beyond that of the hand or mouse.