Week 3: Rules & Conditionals

This week we'll explore how to use conditionals to create rules that help our code make decisions.

Week 3 Introduction

By using if, else if, and else statements, we can set up conditions that change how our sketches behave based on different inputs or states. This will allow us to create more dynamic and interactive designs.

Assignment

Due: Sep 16, 2025

Submit Assignment

This week, you will add rules and conditionals to your design system so that it can make decisions on its own. Instead of endless variation, begin defining limits: clear boundaries for how far your system can shift in material, color, scale, or proportion.

Use at least two conditionals (if, else if, else) to guide when and how changes happen.
Let the system do the heavy lifting: rules should both enable variation and enforce constraint, keeping results within a recognizable family.
Start considering how these limits might translate into material choices and fabrication methods.
This step will set up Week 4, when you begin preparing your system for physical production.

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 use gradient, blending mode and a little about the particle system

Binjia Li

This week I shifted from variation to a rule based system. I defined limits for color, scale, and proportion, used arrays and if else conditionals, and let the system decide. Interaction distance shaped particle force. Imperfect outer arcs contrast a complete inner circle. Completeness emerges internally, guiding material and fabrication.

Flora Fang

This week we learned how to add rules and constraints to our code, so that even when changes occur, the code still works more logically. This is something that design software cannot achieve. With just one piece of code, we can build a design system that allows the output to adapt to different dimensions.

Kate Chon

This week I learned how conditional shape behavior in interactive systems. Small changes in if and else logic lead to clear differences in outcomes. I also worked with arrays to manage and organize multiple elements at once. Modular design showed me how a system stays flexible for different uses. One question I have is how to keep rules simple while still producing complex results.

Lin Kim

Through this project, I learned that the interaction distance greatly affects particle movement and the overall visual impression. By adjusting the force based on the distance between the mouse and particles, nearby particles scatter strongly while distant ones return slowly to their original positions, creating a natural motion. If the interaction distance is too short, particles barely move, limiting visual dynamics; if too long, the entire system scatters excessively, creating a chaotic effect. Therefore, setting an appropriate distance range is key to maintaining both particle freedom and visual stability.

Lina Lee

Although understanding the concepts of if and else if was somewhat challenging, I was relieved when the code worked well after reviewing the professor's lecture again with AI assistance. This time, I also experimented with applying new fonts. Going forward, I think I need to consider how to develop this code to make it more visually beautiful.

Nancy Scanlon

That you can do almost anything with code. Especially with adding true / false (if-- else) variables. Instead of the computer just reading the code with displaying shapes or text. Constant code adds a dimension to process what the output is going to be. We've been seeing what goes into the code(input), comes out of the code displayed(input). But with the added true/false variables,, we don't get the same design on how we entered it coding. Because the output is depending on to be equal to, less than or equal, more than or equal to be deemed the IF and everything else is categorized in ELSE.

Richard Fu

Conditionals are fun!

Sarena Yadav

I experimented with randomly placing letters, adding a shear effect to a single letter, and dynamically changing canvas sizes, which made my composition more engaging. One challenge I faced was exporting the canvas as an SVG. Since SVG is vector-based, it doesn’t support images or blend modes like DODGE, which confused me at first. I’m still figuring out how to represent textured elements or gradients in SVG while keeping the interactivity intact.

↳ Munus:

Yah, it is a feature that is yet to be added for p5.svg!

Sreya Mahsin

I learnt how to use conditionals and the random feature together to create a systems that work as one part of a greater whole. I am still figuring out how to play more with typography and creating a coherent visual system.

Yiling Yang

This week I learned how to modify the changing speed of random colors in my design and mainly learned how to use if else. I used it to control the breathing effect of the border and the position setting. I found that using it reasonably can make the picture more logical and more interesting.

Zoe Liu

Using random() to give objects different sizes makes the overall composition more engaging and less rigid. It also prevents the layout from looking stiff when we try to spread objects across the entire screen but fail to place them in a sufficiently varied way. At the same time, conditions can help us filter the information we need in order to achieve the desired effect.