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

Week 1: Hello Class!

Week 1 Introduction

This week, we’ll get introduced to the course and take a look at what we’ll be aiming to achieve.

Edit this page on GitHub

Assignment

Due: Sep 2, 2025

Choose a short piece of text in your preferred language. It can be a poem, a quote, an excerpt from your diary, or any other form of writing. The text should be personal, poetic, or culturally meaningful to you, serving as a manifesto or statement that reflects your values and beliefs.

Collect visual and material inspirations (typography, print experiments, manifestos), and try to recreate them in p5.js Editor! When in doubt, look them up in the p5 reference or ask for help in google chat.

Document what’s working and what’s not working and submit these findings along with the assignment.

Workshop 1

Examples

Readings

This is not a must, but a beautiful writing from Andrew Blauvelt traces graphic design’s transformation through three key phases: the pre-digital craft era, the digital disruption of the 1980s-90s, and the current “postproduction” era.

Tutorials

Class Notebook

Bella Tsai

1. Type Style SEMIBOLD does not exist. 2. There's no color called gradient, and I found that it's quite complicated to make a gradient shape, so in the end, I didn't. 3. Is there any way that I can move objects together instead of adjusting their X, Y manually?

Binjia Li

the coding is so new for me, everything new and takes more time to figure it out and im so glad we can use different sources to learn and ask for help!

Flora Fang

I applied the knowledge I learned in class better and, with the help of references and ai agents, also learned some new skills. However, the final result is still a bit different from what I originally wanted, since some of the techniques were quite difficult to understand.

Kate Chon

I learned a bit not much since we didn't have enough time

Lin Kim

This week, I learned how to use p5.js to create interactive particle systems and how to map particles to specific shapes, such as text. I also explored how to use off-screen graphics (createGraphics) as a stencil to generate particles only in the text area. Additionally, I practiced implementing forces that make particles respond to the mouse and return to their original positions, which gave me a better understanding of vectors and motion in animations. Questions I have: I am curious about how to optimize the performance when using a large number of particles, like in this project, and how to make the particle motion smoother while keeping it interactive. I also wonder if there are ways to make the particle system more responsive to different shapes or dynamic text.

Lina Lee

I really struggled a lot because of coding. It was quite stressful because so many errors occurred with my code. I tried to manage this just by myself, but I can't, so I eventually got some help from Ghat GPT and get rid of the specific design.

Nancy Scanlon

That when you are writing code, I see the stacking of code like layers. If you want per-say a shape on top (or foreground) of another shape(more back). You'll have to but the bottom shape first with the fill or stroke, then the top shape with their designated fill or stroke. This helped when I was doing repeated shapes.

Richard Fu

Learned to apply the coding logics of p5JS, attempted various references and resources Question being, how to tell which part is in-built p5js languages

Sarena Yadav

I always found coding a little scary, but now that I’ve started, I’m actually loving it and can’t wait to try more and learn more. One of the first things I understood is how functions work. For example, the setup() function runs once at the very beginning it’s where we set up the canvas, styles, and any initial values. After that, the draw() function keeps running in a loop, unless we stop it using noLoop(). I’m also learning new functions step by step and experimenting with them, which has been really exciting. One thing I struggled with was uploading an image. I realized that it needs to be placed in the “assets” folder, but for some reason, I couldn’t get it to work. That’s something I still want to figure out. Another question I had while exploring loops and patterns was about saving images. If I want to save a specific frame (and not every single one in the loop), I learned that I can use functions like saveCanvas() or saveFrames(), but apply them conditionally, for example, only when a certain frame number is reached.

Sreya Mahsin

The possibilities with p5.js is endless! I was looking at other's works and realized that a lot of motion design that I've tried to do was probably done on p5js and not After Effect. I did run into a few technical problems which I'm sure can be solved but I'm excited to explore.

Yiling Yang

This week, I learned how to use p5.js to create visual effects with text, and I also realized that even simple code can express poetic ideas.

Zoe Liu

While working on the assignment, I learned to use several functions in p5.js, such as map() and random(). I realized that the sequence of code execution is a critical aspect of programming, and it’s something I need to spend more time practicing. I also discovered that some functions are restricted to either 2D or 3D contexts, and I hope to explore ways to integrate them so they can work together more effectively.