Compass Motion Workshop

A nationwide design workshop for Compass' design team that covered procedural and parametric design strategies in software and code. I co-led this workshop with motion designer Mavis Everett ↗︎. Topics included procedural workflows in After Effects & C4D, core programming concepts, math for designers, and user interactivity.

Link Event Post ↗︎
Role Workshop Instructor
Info co-led with motion designer Mavis Everett

PDT DESIGNER WORKSHOP SERIES

Compass hosts a series of nationwide learning workshops for it's designers. I was invited to lead a workshop with motion designer Mavis Everret in which we merged our skillsets to discuss designing procedurally and parametrically.

Brand Patterns

We used Compass's brand patterns as a basis for teaching procedural and parametric concepts. Mavis created an animation of the dot pattern using four different procedural workflows in Adobe After Effects and Cinema4D. I developed an interactive and animated version of the needle pattern in Processing. We related the thought processes behind these approaches.

Mavis

Dexter

PROCEDURAL WORKFLOW

Mavis demoed her workflows in After Effects and Cinema4D in real-time, explaining the use modular key-framing and layering techniques, After Effects expressions, and their relation to procedural ways of thinking.

DESIGN AND CODE

I gave an overview on ways to approach writing code as a designer, explained the landscape of web development, and covered basic programming concepts. I walked through algorithms I developed for creating and interacting with the needle brand pattern and then demoed the Needle Tool prototype.

The Needle

After equipping the designers with basic programming and syntax knowledge, I explained the needle algorithm in pseudo-code and provided examples of frequently used mathematical concepts when designing using code.

Interaction

I explained the interaction algorithm which extends the static needle field algorithm by calculating a unique angle of rotation for each needle in the field based on the position of the mouse.

Animation

I then explained how to create looping animations by intializing a focal point and moving it around in space according to a function.

Demo

I demoed and shared the prototype I built for the Needle tool in P5.js and provided links to the code on Github. I also listed a number of additional resources for learning code in the context of design, including my favorite books on Processing.

Success

The resonance between procedural workflows in animation software and parametric design using code resulted in a successful and enjoyable workshop for the design team. I thoroughly enjoyed developing and teaching the material.