Week 2 – Loops Artwork

Concept

For the second assignment, I will present a  series of squares that show contrast between a structure  black and white gradient and vibrant colors. When pressing the “Enter” key, the orderly monochrome arrangement becomes a more random, colorful display. At the time, I aimed to explore how colors can change randomly and how it can change a perception of an artwork

Code Highlight

One snippet i am proud of is this one:

//Loop pattern
 for (var i = 0; i < 20; i++){ // Loop through 20 columns
   for (var j = 0; j < 20; j++){ // Loop through 20 rows
     //Position and Size of the square
     var x = i * 50 + 25
     var y = j * 50 + 25
     var d = 25

This is because I was working on repeating the same code of using Variables of x, y, and d except changing the values, then I later found out, through a p5.js  tutorial by The Code Train on “Arrays and Loops” that there can be another loop to incorporate instead of copying the same lines of code over and over for rows to better calculate the positions and dimensions for each square in the grid.

Embedded Sketch

Reflections

Initially, I wanted the squares to rotate or spin upon pressing “Enter” using the rotate() and rotateX() functions, but there are challenges in structuring the lines of code, since at some point there are mistakes that disrupted my entire layout, leading me to use an alternative to incorporate randomly generated colors within the cubes.

I also referenced snippets from my past p5.js experiments, like using this from my last experiment with p5.js:

function keyPressed() {
if (keyCode === ENTER)
// Clicking between two assets :)
showGif = !showGif;
}

However, I modified it to change colors instead of changing gifs.

Overall, this was a really insightful experience and I plan on revisiting more concepts on loop functions along with rotating functions to help understand more as I experiment more with p5.js.

Leave a Reply