Graduate Studio: Technology A [Class Notebook] (DES-720A-02)

Week 2: Variable, Random, System

We’ll use variables, randomness, and simple GUI controls to begin transforming your chosen text into a flexible design system.

Week 2 Introduction

Instead of creating one fixed layout, you’ll experiment with ways for your manifesto to shift, adapt, and generate multiple possibilities. These early explorations will serve as the foundation for the physical forms we’ll create later in the semester.


Edit this page on GitHub

Assignment

Due: Sep 9, 2025

Submit Assignment

For this week, you will begin transforming the text you selected into a flexible design system. You should use variables to define aspects of your design such as size, spacing, or color, and bring in randomness so that each run of your sketch produces something slightly different.

Coding Challenge

Examples

Readings

We don’t have required reading this week either. These are more like fun readings for inspiration.

Tutorials & Resources

Class Notebook

Bella Tsai

I learned how to group elements together by using push/pop. I also learned how to break lines in a text and change the opacity of the shape. I didn’t use too complicated code that I don’t understand; I just took some time to review the basic functions and learned how to ask the AI questions. Want to know other ways to draw my cloud, since the way I used ellipses overlapping each other can't adjust the opacity of it. And how to keep creating my element instead of one per refreshing

Binjia Li

I learned how to make particles move into a circle and add rainbow text with a GUI. My question is how to make the circle loop, breaking apart and coming back again.

Flora Fang

I learned how the variations and GUI work, though it’s a bit hard without an AI agent. I also found that design gets really interactive and interesting if you add variables—this kind of random change is really hard to make in regular design software.

Kate Chon

I learned about using GUI and how to export my own font into the code. While working on this, I had some difficulties with getting the font to load properly and figuring out how to create randomness in the process. I asked AI for help, but it was still very confusing.

Lin Kim

One of the most challenging aspects of creating the code was finding the right balance between the desired visual effect and readability. In the process of shifting from points to lines, the text often became too distorted to read, or on the contrary, appeared overly simple when the transformation was too subtle. I also had to carefully address issues such as the overlap between sliders and text, as well as constraints related to canvas size and line spacing. In particular, adjusting randomness and noise was tricky, since even small changes in values could dramatically alter the overall impression, requiring extensive experimentation and trial and error.

Lina Lee

GUI code makes my design more flexible.

Nancy Scanlon

I learned that you need to re-arrange the code if you repeat for example a color picker in GUI. You cannot re-write it again because the variable is already taken. A thing that I learned was the fixed scale. For example I wanted my square to only go so far instead of out, I used a set number so the square wouldn't go out of line.

Richard Fu

GUIGUI

Sarena Yadav

Previously, I had questions about how to add an image to the canvas and was initially a bit confused. After learning how to include images, I thought, why not try a video? I explored how to integrate a video background and experimented with a small animation as well. This allowed me to work with variables, transitions, and timing, making the project more dynamic and interactive. I enjoyed experimenting with different effects and seeing how motion and visuals could enhance the concept I wanted to convey. During the process, I also explored using dat.GUI to create a user interface for controlling parameters like text color, progress, and custom text. While I learned how to manage normal text within the canvas boundaries, I realized I still have questions about ensuring that GUI-controlled text stays within the canvas limits, especially when breaking it into multiple lines or adjusting dynamically based on user input. This has motivated me to explore further techniques for responsive text placement and alignment.

Sreya Mahsin

how to use the blendMode feature, how to add motion to shapes

Yiling Yang

This week I learned how to use various auxiliary tools to make p5.js projects more quickly and efficiently, and also discovered the fun of making random content.

Zoe Liu

I learned how to use the GUI to make a slider, and I also figured out how to use push() to save random numbers into an array. I practiced using random() with set ranges too, so I could control things like size or brightness better. I think the GUI works well as a customizeble setting even though it operates within the limits defined by the author, it still allows different users to interact with the project in their own way and express different ideas.