Brno Bold Workshop

Project Overview

Following a highly positive reception to my talk on Generative Art at the Brno Bold 2022 design conference, we organized a dedicated, full-day follow-up workshop: Basics of Generative Design.

The target audience consisted of graphic designers and creatives with little to no programming background. My primary goal was to demystify code, lower the barrier to entry, and show them that creative programming is an incredibly powerful (and fun) tool for their design arsenal.

Teaching Philosophy & Background

I approached this workshop by leveraging the pedagogical skills I’ve honed while teaching the PV259 (Game Design) course at Masaryk University since 2018.

To break the initial fear of the “blank code editor,” we didn’t start with computers. We began with an unplugged, paper-based exercise inspired by Sol LeWitt (1969). Attendees wrote drawing instructions on paper, swapped them with a partner, and “executed” the code by drawing. This perfectly illustrated what programming actually is — writing a sequence of clear instructions to achieve a visual result.

Workshop Curriculum

The curriculum was intensely hands-on, built around the p5.js web editor so attendees could see immediate visual feedback without worrying about local environments.

The morning sessions were rapid-fire, covering core concepts through live coding:

• The Basics: Shapes, the coordinate system, the draw loop, and using the HSB (Hue, Saturation, Brightness) color space for better aesthetic control.
• Interactivity & Variables: Using mouseX/mouseY, creating custom variables, and understanding scope to make visuals react to the user.
• Generative Brushes: We built custom digital brushes from scratch that randomized shapes, colors, and even letters based on probability (if statements and random()).
• Geometric Grids: Utilizing nested for loops to create complex, tiled geometric patterns. I also introduced ChatGPT as a pair-programming assistant to help them generate complex grid math quickly.
• Vector Workflows: Taught the pipeline of generating art in the browser, exporting it directly to SVG, and even importing/manipulating external SVGs via code for use in professional design software (like Affinity or Illustrator).

Afternoon Project & Resources

The second half of the day was an open creative block. Attendees chose their own projects—ranging from generative posters to custom typographic brushes—and I provided 1-on-1 technical consultations to help them bring their ideas to life. We ended the day with a showcase of everyone’s generated art.

To ensure the attendees could continue their journey after the workshop, I curated a complete p5.js Collection of Workshop Examples containing every script, brush, and grid we built during the day.

Here are some examples. Feel free to click and interact with some of them!