top of page







Working time: 5 days, 6 hours a day on-line × 9 parallel groups of 10–20 participants per group.

Interactive Type using P5.js

About the workshop

p5.js ( is a Javascript library that takes the spirit from Processing and translates it to Javascript. Its goal is to make coding accessible for designers by making it as easy as possible to draw graphical output to the screen. 


This workshop introduces the students to p5.js and to the basics of programming in that environment starting from zero. So, no knowledge of programming is necessary beforehand. As a little project, we will do some experiments on the interactive type. Interactive type means that type will be drawn using code and modified by user interaction. The students may work in teams of two or three people.


Drawing graphics with code is different from drawing with a pen or using software like Adobe Illustrator. Instead of placing shapes manually, one has to find rules for the machine to follow. The students learn how to think algorithmically and to write the appropriate code. 


They will explore the drawing abilities of p5.js like dealing with color, shapes, type, 3d space and how to make their graphics interactive and animated. 



The first part of the workshop will be an introduction to algorithmic thinking and to the basics of coding with p5.js. This will be done with lectures and exercises.


After that the students develop their ideas using sketches, discussing it, putting it to code and searching for interesting visual parameters to make as many good variations as possible.



The course outcomes will be delivered in the form of p5.js programms. You can have a look at the results from last years workshop to get an impression of what we try to achieve:

Workshop description

Tools & materials

All we need is a good code editor and a modern browser. Please have a good code editor like Sublime Text ( installed.



Work hours: 9:00 to 12:00 and 13:00 to 16:00

  • Monday
    Setting up our environment and introduction to p5.js

  • Tuesday
    Introduction to p5.js and starting the workshop project

  • Wednesday
    Discussing the project ideas and start coding

  • Thursday
    Work on the project

  • Friday morning
    Finalising the project for presentation

  • Friday
    from 13:30: Presentations

Hartmut Bohnacker

Born in 1972 in southern Germany. Beginning in 1992: studies in mathematics (discontinued) and a degree in economics in 1997. 1998: studied communication design at the HfG Schwäbisch Gmünd. Since completing studies in 2002: independent designer in Stuttgart, specializing in conception, design, and prototypical implementation of projects in the field of interface and interaction development; teacher of digital media. Since 2009: professor of interaction design at the HfG Schwäbisch Gmünd.

bottom of page