Skip to main content

Generative Graphics and Animation with Processing.js

Marc Edwards

Full-day workshop • Monday, April 20th
Sometimes the fastest and easiest way to create a design element is by writing a little bit of code. Processing is an ideal way to do just that — it’s a very approachable environment to generate static and animated visuals.

What you will learn

In this workshop you’ll explore ways to generate static and animated artwork, using Processing. This aids in the creation of patterns, shapes, compositions, and animation that would not be easy or possible by hand.

The results we create can then be used directly, or imported into Illustrator, Sketch, Figma, or your design tool of choice, augmenting their features.

There’s many uses for Processing, including automating design processes, making loading spinners, visualising data, or just creating interesting generative artwork. This workshop aims to offer practical ways to expand your abilities beyond what is available in UI-driven design tools.

Particular topics we’ll cover include

  • An overview of Processing, and the different Processing modes (default, 2D, 3D).
  • How Processing works (setup and draw functions).
  • How to draw primitive shapes and work with color.
  • How to draw bézier paths and complex shapes.
  • Creating random and controlled random variations.
  • Exporting PNGs.
  • Importing and exporting SVGs.
  • Seamless loops and timing offsets.
  • Easing curves for animation timing.

What prerequisites skills do you need?

Basic understanding of any programming language will help, but isn’t essential. We’ll be using the Processing Java IDE.

What hardware/software do you need?

Please bring your own laptop, with Processing installed. Processing is available for free from processing.org, for macOS, Windows, and Linux.

About Marc Edwards

Marc Edwards is a designer, an icon speedrunner, the creator of strange generative art GIFs, and the founder of Bjango. Bjango is best known for iStat Menus and their upcoming design tool, Skala. Marc has written for Smashing Magazine, iMore, and posts articles on Bjango’s own site. He also created and maintains a bunch of open source, design related projects.

Time & Location

This full-day workshop will be hosted at Fort Mason and will take place the day before SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Monday, April 20th.

Schedule for Monday, April 20th

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 USD when signing up for the conference and a workshop!

Register for this workshop →

On the web
bjango.com
On Twitter
@marcedwards
Workshop Includes
  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil