Course Objective
The goal of this course was to introduce students to procedural thinking, parametric design, and generative design. The course builds on these methodologies by utilizing JavaScript (via p5js) to visually code a series of exercises.
Question of the Day
As this is my 2nd semester teaching, I continued my usage of a Question of the Day to start my classes. I wanted to use this Figma exercise as an opportunity to get to know my students better. At the start of each class student's were given a prompt to answer on their own Figma slide. Below is an example of one of my own responses.

p5js Visualizations
With many first time coders, I wanted to expand upon the base course content. After initially introducing a topic and walking through tutorials I utilized quick visualization examples. The goal is to visualize the concepts while simultaneously providing the code with comments to aid both visual and verbal learners.
Students were able to:
1. Listen to me explain the concept while...
2. Watching me walk through each line of code while...
3. Providing an example that included both tips in the code & a visual breakdown.
An example visualization is shown below:

Student Examples
"I explored how the composition would change based on the positioning of my mouse. There are multiple elements that change based on mouseX and mouseY position."
Bekah Hufnagel,
Communication Design '28 |
Website |
LinkedIn Coded Sketches II: Parameterize Shapes
Mai Le,
Communication Design '28 |
Website |
LinkedIn Lauren Perkey,
Communication Design '28 |
Website Coded Sketches III: Random Variations
(Randomizes on page refresh)
Dana Haschart,
Communication Design '28 |
Website Coded Sketches V: Mouse-Responsive Variations
Anh Hoang, Communication Design '28
"Explored how shape can be broken apart and location can be changed as the mouse moves."
Kori Moore, Communication Design '28