Week 2: Variable, Random, System

Week 2

We’ll use variables, randomness, and simple controls to begin transforming your chosen text into a flexible design system. Instead of making one fixed layout, we’ll build relationships that can produce a family of related outcomes.

Class Notebook

Ashlyn Pelletier

I feel much more comfortable with the layout of p5, though I do still have trouble with the functions and how they operate. For next steps, I would like to make my bacteria move!

ChihLin Han

This week I learned how to translate abstract real world concepts into code using let variables and random() functions in p5.js. By building a generative urban structure, I discovered how tweaking core parameters like building dimensions, window grid density, and light colors, they can dramatically shift the mood and scale of a piece while preserving its underlying system identity. A question I still have is: how can I transition these static variable changes into smooth, animated movements (like flickering lights or shifting skyline heights) without losing control over the overall aesthetic structure? And also i need more time to get use with the codes, this project took me much time to process, still need to improve much.

Kexin Chen

use Variables

Patricia Bogdan

I learned about assigning x coordinates to the start/end points of each lines to make them "travel" -- which was one simple way to create motion before adding more complex variables to the coding system.

Sofia Lentz

I learned how to use the mousePressed function and changing shapes in a cycle

Viviann Hoang

I've figured out a lot of things through reference, tutorial and friends on how to create my work. I have an idea but I find it difficult to visualize it through code since everything follow a certain set of steps. I find it helpful to right in out on paper on the steps and labeling my code so that I remember which is which and what it does. I wish we can go over the references in p5 since there are a lot that were not introduced but I use it for my project. And I find it hard to figure out on my own and through tutorials. Maybe introduction on some basic and essentials that might be needed for following projects.

Yihan Zhou

This week, I learned how to use variables in p5.js and how changing variables can affect the final visual result. Through my experiments, I also found that randomness can create different visual outcomes within the same system. But I am still entering the variables manually, and there are still some ideas that I can't fully achieve. I need to keep experimenting with the code and improving the system.

Variable, Random, System

Week 2 Introduction

Chairs, Casey Reas in Form+Code in Design

The password for these Figma files is pratt.

Tech & Tool Survey

Take Tech & Tool Survey

We’ll use the responses from this survey to better understand the tools and technologies you are familiar with, which will help inform our class discussions and projects.

Coding Assignment 2

This assignment is part 2 of project Creative Cryptography.

Submit Assignment

Due: Sep 8, 2026

Last week, we asked what code can be and where we might find code in our everyday lives. This week, we will look more closely at one important part of code: variables.

A variable is something that can change while still remaining part of the same system. For instance, in a textile pattern, the color, scale, spacing, or repetition might change while the underlying pattern remains recognizable. In music, the pitch, tempo, volume, or duration can change while the composition still follows a particular structure.

Choose one idea as your main “coding system”. You get to define what is “code” to you. Don’t forget that this is part of your “creative cryptography” project. Within your coding system, identify at least 5 things that could vary. These might be visual qualities, measurements, categories, quantities, positions, sounds, movements, or anything else that can take on different values.

Try to reconstruct your system in p5 preliminarily. Don’t worry about not being able to replicate it perfectly! This is only week 2. Try to use let to define these variables in code, and use either different values or random() to switch things up. For each variable, think about what happens when it changes. Does the meaning change with it? Does the system still remain recognizable? Are some variables more important than others?

Bring your sketch, your coding system and any found images, photographs, sketches, videos, or other media that can help illustrate your ideas to class next week.

Examples

Readings

We don’t have a required reading this week. These are optional references for thinking about flexible visual systems.

Tutorials & Resources

The last video uses Processing rather than p5.js, but Tim’s approach is worth watching for inspiration.