Design Aesthetics 3

Education
Classes:
Timeline:
Course Subject:
Final Deliverable:
CODE 2012 SEC 002 - FA24
CODE 2012 SEC 001
- FA24
7 weeks per session
1st session:
August–October 2024
2nd session: October–December 2024
Visual Coding, Computational Aesthetics, Generative Design
Generative Visual System

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 | WebsiteLinkedIn

Coded Sketches II: Parameterize Shapes

Mai Le, Communication Design '28 | WebsiteLinkedIn
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