I gave an introductory workshop about generative design

I gave a two hour workshop about generative design for graphic designers of DasBuro & Harborn, two branding & digital agencies in Rotterdam. The workshop was aimed for those who were new to generative design and coding. Attendees would:

• get an idea of what generative design is;
• know what the possibilities are;
• write their first lines of generative art code;
• know how to take their learning in generative design even further.

The workshop

I divided the two hour workshop into three parts:

Introduction

A short presentation about what generative design is, the differences in the design process and a viewing at cases of what other graphic designers and agencies are doing with it.

The Generative Design process, source: Generative Design: Visualize, Program, and Create with JavaScript in p5.js

Live coding

The main part of the workshop was a live coding session of around 1 and a half hour. The purpose of this part was that the designers learnt the basics of coding, which is a big part of the generative design process, by doing some coding themselves. I used p5.js, the javascript variant of Processing, and its online code editor so attendees would only need a laptop and an internet browser to join.

Screenshot of the p5.js editor with a sketch about variables

Beforehand I prepared 7 examples:

1. p5.js's setup() & draw() functions
2. Drawing & styling shapes
3. System variables
4. Variables
5. For loop
6. Double for-loop
7. Conditionals

With each example I could explain a different coding concept by live coding it from scratch together with the attendees so they could get a grasp of what their code was doing. Attendees learned how:

• to work with the p5.js code editor
• to use and write variables, functions, conditionals and even double for-loops
• to create their own patterns and drawing tools

Wrap-up

As a wrap-up I gave the attendees a short summary of what we’ve been doing and more importantly gave them several references where they can take their learning in generative design even further. These references included other books, tutorial sources and artists to follow.

A book reference slide

The results

After the workshop attendees were excited and inspired by the possibilities of using generative design. Since the attendees were mostly graphic designers they saw especially opportunities in bringing visual identities to life.

Preparing and giving this workshop was very fun and gave me a lot of energy. This is definitely something that I’d like to do more often ;)