8 Mai 2021

Creative Coding with Processing/p5.js

M 1 5 03 tool

Generative Gestaltung: Bohnacker, H., Groß, B., Laub, J., Schmidt Hermann Verlag, Erstauflage, 2009 

Im Fachbereich Design findet ein zweitägiger Online-Workshop zum Thema Creative Coding »Processing/p5.js« am 8. und 15. Mai 2021 (beides Samstage) statt. Angesprochen sind Studierende im Hauptstudium. Teilnehmer_innenzahl: ca. 15 Studierende.

Unterrichtssprache ist Englisch. Es wird eine stetige Anwesenheit erwartet. 

About the workshop leader

Niels Poldervaart is a web developer and a master student in Media Technology at Leiden University. He is interested in (amongst other things) data visualisation, science and interaction design. He worked on the 2018 book »Generative Design: Visualize, Program, and Create with p5.js«, which explains what generative design is and offers an easy way to get started.

Short description

This workshop will introduce generative design on both a conceptual level and how to practically experiment with it using the p5js framework. We will start with the basics, including how to set up the development environment. Then we will go into the deep end, where we will try to sketch out and implement a data visualisation using your own data. Finally, we will enhance the data visualisation by making it interactive and sharable with a wider audience.

What to bring to the workshop?

A dataset, or a combined dataset already set in a spreadsheet program like Excel, Numbers, etc. This is the basis for our creative process with p5.js. You may a find a dataset on: statista, „ourworldindata.org“, ESA, NASA, Statistische Bundesamt, Hessisches Statistisches Landesamt, etc. that you thing may be interesting to explore with interactive visuals.

In case you have little to no experience with coding, it's advised to do an introductory course in JavaScript on course websites like CodeAcademy. Or better yet, the free and fun tutorial series on p5.js by Daniel Shiffman: https://shiffman.net 

Finally, take a look at the demos at http://www.generative-gestaltung.de/2/ and https://p5js.org to get a feel for what generative design of p5js can look like.

What to expect?

8.5 (9 am – 5 pm, lunch 12 – 1 pm): 

  • Introduction to processing/p5.js
  • Setting up the environment
  • Basics of working with shapes and typography in p5.js
  • Creating a scatterplot with sample data
  • Sketching the own idea in p5.js (own data)
  • One-to-one break-out sessions with lecturer to talk about sketch and/or technical questions
  • (end of the day: Short Presentation, 5 min each)

8.5 – 15.5: Homework

15.5 (9am – 6 pm, lunch 12 – 1 pm): 

  • Presenting the own idea to the others
  • Enhancing sketches with interactivity
  • One-to-one break-out sessions with lecturer to talk about sketch and/or technical questions
  • Exporting (website, print, etc.)
  • etc.
  • Final Presentation of the own idea and visualization

8. + 15. Mai 2021


erfolgt über Email bis zum 30.04.21 (12 Uhr Mittag) an: borgenheimer@hfg-offenbach.de