# Assignment 2: Creative Piece!

### Concept

As part of the second assignment, for which the task was to produce a creative piece, something that caught my attention was the following image from COMPUTER GRAPHICS AND ART Aug1977.

Therefore, I decided to replicate that, but not only replicate a single instance, but make it interactive such that I can essentially see every single one of the types of squares. Starting off with a basic Mouse Movement in the in-class exercise, I built upon it to make it move periodically over a speed as an automated animation. When that was done, I moved forward with adding more colors and making it playful! If you press the RIGHT ARROW, LEFT ARROW, or the ‘a’ key, you can add specific colors!

The reason I made the animation squares move automatically in the manner seen below was to replicate the old ‘DVD’ behavior in Screen Savers of Old Televisions!

### Embedded Canvas

The final production for my assignment is as follows:

### Code

While the entire code is well commented, and very concise (linked below), one specific segment of it that I would like to share is the use of a single for loop with a map function to change the x and y directions of the animations. I started the usage of the map function to make the animation follow the mouse movement, however I later adapted it to be an automated sequence.

```  // A loop to draw the different squares
for (let i = 0; i<230; i=i+20)
{
// Fill with the dark backgrounds in the pyramid style
fill(i,i,i);

// To add the different colors with the key presses, such that they are added in an incremental way
// For the Red Color
if (i==redColorCounter){
fill(255,160,122)
}
// For the Blue Color
if(i == blueColorCounter){
fill(0, 0, 255);
}
// For the Yellow Color
if(i == yellowColorCounter){
fill(255, 255, 0);
}

// Changing xPosition and the yPosition of the squares
xPos = i*(map(xInc, 250, 500, 1.0, 1.9))
yPos = i*(map(yInc, 250, 500, 1.0, 1.9))
rect(xPos,yPos, 500-(i*2))
}
// Make the colors 'climb' the different squares in the animation
redColorCounter+=20;
blueColorCounter+=20;
yellowColorCounter+=20;
}```

### Improvements

As a future step, I really want to use a modular approach with functions and eliminate any and all duplications or repetitions of similar code pieces. One example would be the movement in the x & y directions by adding a function (which I tried but was not working the way I wanted it to!).

The full canvas is linked here.

## Author: Zunair

Senior @ NYU Abu Dhabi