Breach – ICM – Week 4

concentric circles in different sizes in different colors


This week, your assignment is straightforward: make something with lots of repetition (more than you would want to hand-code), and use one or more for loops to make it simpler. For instance: you could take something you’ve already written where there was a lot of repetition in the code and re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calling rect() inside of a loop that goes around 28 times. Or you could make something new that involves lots and lots of lines but draw them in different places with a for loop. The truth is that writing code is just logic-basd creativity, and this week is about feeding that. So focus more on rethinking HOW you write code than on writing lots of code or creating the coolest sketch.


concentric circles in different sizes in different colors

Play here!

Check my code here.


There are two versions of this interactive game. One version is the arcs and another is the squares.

For the version with arcs, each arc comes from a beginning point from (random(-2,2)) until it becomes a full circle. Hence, it creates the glitch effect of the project. When the keys “r”/”g”/”b”/SPACE are pressed, the stroke will become the corresponding colors.

concentric circles in different sizes in green color concentric circles in different sizes in red color

concentric circles in different sizes in blue color

concentric circles in different sizes in different colors

For the version with squares, I changed the translate() to the position of the square. 

multiple multicolor-outlined rectangles layered on top of each other in black background multiple red-outlined rectangles layered on top of each other in black background

multiple blue-outlined rectangles layered on top of each other in black background multiple green-outlined rectangles layered on top of each other in black background


I always wanted to tackle the situation of rotate() and apply that to individual object. I have had that question since week 2. Now I am more familiar with class and objects. I wanted to incorporate arithmetic drawings while using for loops. Inspired by the Matrix rain by Jason and Julian from last week, I set my color palette into green stroke and black background.

I played around with several shapes as a starter and experimented a tons of shapes and commands for a few days.

green outlined blocks on top of black background
I started with squares.
screenshot of code from p5.js along with the preview
I played around with arcs.
screenshot of code from p5.js along with the preview
My original idea of drawing the arc from 10 degree to 180 degree.


Created the glitch effect upon experimentation

I stumbled upon the glitch effect when I was experimenting the parameters in the nested for loops. I played around the “i” and “n” numbers to make sure there are only one main thing in the center. When I changed the n number from 10 to 3, it becomes more disorganized in a way the arcs are showing up everywhere and intersecting the center ones.

concentric circles in different sizes in multiple colors

Played around with the class and objects to understand more

I followed along Emily Xie’s Matrix Rain tutorial and got to understand the objects and class more. I learned if you put parameters in the class, you would have to call it and give it a value when you declare it in the beginning. I am getting used to using class and objects and I am currently dealing with the naming issues since sometimes names get confusing when I involve arrays, variables, and classes.

Understand for loops deeper – iterations

I used several loops in this project. I learned how nested loops change the order and times of iterations when it compared to two separate for loops. I am learning to step away from the urge to type a for loop without thinking what I really wanted to create. Instead of changing the numbers in the for loops to find what I think is cool, I am developing to thinking of a plan and implementing it by programming.


How to apply rotate() to each object created?

Right now, I can only apply to rotate function to one after I use the translate(). I can tell the other objects are rotating but not rotating on their own. My idea would be each object stays at the position and rotates around its center. Yet, in this project, I still couldn’t figure out how to do so. I rewatched the video about translate and rotate by Daniel Shiffman. I discovered one mistake I made after the command “translate(this.x,this.y)”. I wrote the function with x and y coordinates set to this.x and this.y when they are supposed to be 0 and 0 since translate moves the point to the parameters in the translate() function.

I had two translate() functions in my project. One is inside the class where a rotate() function is created within and another one is when I create an array of items in setup. I am not sure if this is the right way to do so?

screenshot of code from sublime text

How to load font on Sublime Text?

The web editor of p5.js crashes multiple time especially when I am coding this week. Yet, I don’t think my code is heavy to make the program crash. Therefore, I started using Sublime and it is super helpful. However, I couldn’t find a way to load the font in Sublime so that the font can be different.


I am happy that I used class to create objects and used array to store them and used several for loops to create the glitch effect in my project! I am looking forward to challenging myself more to create more interesting art.

Published by Yiting Liu


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with
Get started
<span>%d</span> bloggers like this: