Week 4: Loops & Custom Functions

This week, we are learning how loops and custom functions can make our code more efficient and flexible. Loops allow us to repeat code blocks, while custom functions let us encapsulate reusable code. Together, they help us create intricate and expressive designs with less effort.

Week 4 Introduction

Assignment

Due: Sep 23, 2025

Submit Assignment

For the assignment, focus on polishing and refining your Flexible Manifesto in p5.js. Make sure your system runs smoothly, generates variation effectively, and produces visually compelling results.

Use for loops and custom functions to clean up repetitive code and make your system more efficient.
Ensure your system can produce at least five distinct physical artifacts, each with different dimensions. They do not have to all be prints…explore other fabrication methods if you will (sticker, laser cut, embroidery, etc). Make sure you BRING the artifacts to class next week
Use p5.js as your main tool for designing, and export your design from it as SVG or JPEG/PNG to adjust in other software if needed.
Prepare to present your artifacts alongside your p5.js sketch, showing both the system and its outputs.
Print out a small “label” explaining your design system and the variations it can produce. Include your name and the title of your piece. We will have an open studio next week.

Examples

These examples are from the recap sessions and in class demos. Feel free to explore and modify them to understand how loops and functions work.

Readings

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

How to Speak Machine - John Maeda (p4 - p60)

Tutorials & Resources

Class Notebook

Bella Tsai

I learned to use (1) conditional (2) loop (3)custom function (4) lerpColor to achieve the effect that I want. With the instructor's help and advice, during the development of the project, I can understand every line of my code and am able to adjust the parameters to reach the outcome.

Flora Fang

This week we learned about the function of for loops, which made our code more interesting. I also used a GUI to add options for adjusting the canvas size and the wave’s length and width, which gave me better control. However, when I tried to save my image, even after setting the pixel density to 100, the file size was still only a few KB, which would look blurry if printed larger. I also tried saving as an SVG, but it didn’t seem to capture my whole image.

↳ Munus:

So pixelDensity() is a function and not a simple variable. You have to write pixelDensity(5) like this in setup in order for it to work!

Kate Chon

What's the best way to decide whether to use for loop or an array with objects when working on an interactive system?

↳ Munus:

That’s a great question! A loop is handy for quickly making something sequential—for example, circles placed diagonally, each 40 pixels apart. An array of objects is better when you need to track each element individually with its own position or properties.

Lin Kim

Yes

Lina Lee

Finally, I understand this p5.js process a little bit so this assignment was so fun!!! I got a courage and maybe I can do this better next time.

Nancy Scanlon

If I wanted to do randomization for my canvas size but only could pick out of five options, would the probability of the computer running it create more duplicates rather than new canvas sizes? I wanted to approach it this way because I want my color palette to decrease when my canvas gets smaller. & darker colors when it gets bigger.

↳ Munus:

You could certainly do let canvasSizes = [], and just have 5 options only, while keeping the conditionals for color palettes to still be more of a spectrum, like background(width/100) for example.

Richard Fu

codes work

Sarena Yadav

I never thought that randomness could actually make sense. As designers, we usually focus on alignment, order, and precision, but this project showed me something different. Letting go of control and allowing randomness to decide placement, size, and shapes was new for me—and surprisingly fun. Each run of the code created a completely unique outcome, almost like the artwork had its own life. The overlapping letters, the shifting circles, made me realize that randomness can be just as beautiful as carefully planned design. It gave my artwork unpredictability and uniqueness every time.

Sreya Mahsin

I learned how to use custom functions and conditionals to bring more organization in my code but randomness/chaos in my design. I want to understand how to make my designs more responsive and automate the scaling and lines to fit the canvas properly without having to do the math.

Yiling Yang

I learned that changes should not be limited to details, but should be more directly felt, and I made some final adjustments to my project based on the class content.

Zoe Liu

Adjusting the image scale to keep it high-definition was very helpful. I can set the canvas size directly, but scaling lets me fine-tune without re-saving. While I didn’t need loops this time, I see how they could help generate more stars in future work.