Interactive Type using P5.js

About the workshop

​

p5.js (https://p5js.org/) 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.

​

​

Objectives 

​

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. 

 

Content

​

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.

 

​

Outcomes

​

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: 

https://hartmut-bohnacker.de/pjait2020/