Assignment 2: Generative Art using Loops


The sleep TV mode inspired this assignment. When I was a kid, my friends and I used to watch the TV when it was not even turned on but on sleeping mode, closely observing that rectangular white box on the TV hitting all edges of the black TV box till it perfectly hit the corners of the black TV screen. While I was brainstorming ideas for the art piece, I figured that this is what I want to do. However, later I figured that I should add more properties to that animation.


Code highlights:

I would say I spent most of time debugging this part of the code

function goAround(x,y,width,length,borderx,bordery, status, statuss){
  if( (cubex+( width /2)) < (cubexx+(borderx/2)) && status === true ) {
    right = false;
    if((cubex-( width /2)) < (cubexx-(borderx/2))){
      right = true;
  if( (cubey+( width /2)) < (cubeyy+(borderx/2)) && statuss === true ) {
    left = false;
    if((cubey-( width /2)) < (cubeyy-(borderx/2))){
      left = true;

What this code basically does is that it has a function that takes in a rectangle parameter and manipulates a rectangle to move around a certain border.

The first if condition continuously checks if the borders of the designated rectangle do not bypass the edge of the border and the function makes sure that what is being called is the “if” not the “else” by not changing the status of the rectangle. However, when the rectangle bypasses the border’s edge it goes to the “else” part. In the else part it changes the status into false and that makes the function when called not go to the “if” part, as there is a condition that checks if the status is true. Moreover, to not make the function not stuck in the “else” part, I made an if condition that checks if the rectangle hit the other border and when it does, it changes the status to true.

The second part of the function is basically the same thing, but instead of manipulating the x-coordinates, I manipulated the y-coordinates.

The draw function is basically making rectangles and changing their colors.

let a = random(255);
let b = random(255);
let c = random(255);

let aa = 255 - a;
let bb = 255 - b;
let cc = 255 - c;


I made the inverse of the color to each other by assigning a random color to some variables and then assigned the inverse colors to other variables then call the variables and their inverse in an order of that each square has a square with an inverse color in it.

Sketch & reflections:

I think what this art piece made me realize is that coding is not about the actual act of coding but about debugging as I spent more than 70% of the time making this piece checking what is wrong with the code rather than writing the actual code. Moreover, when I saw a previous classmate’s art pieces I thought it would be easy to make. However, when I made my piece it made me realize that they are much harder to make than seems, which made me respect their work even more.

One thought on “Assignment 2: Generative Art using Loops”

  1. More comments in your code would help with the debugging. The final piece is working well. I find the colour cycling really intense. Perhaps you could slow it down, do some blending between the colours (e.g. pick a new colour every n frames and blend to it) or choose a specific colour palette. The composition of the shapes is nice though!

Leave a Reply