Week 2 – Reading Response

Within Casey Raes’ talk on chance of operations, I find that it provided an intriguing perspective on the relationship between order and chaos when creating pieces of work. His idea that artists keep things in order within a chaotic world resonates with me, especially after creating my loop assignment in p5.js.  This is because by setting boundaries (the grid) while allowing for unexpected outcomes (the random colors), I was able to maintain a balance between order and chaos.  I find it interesting when he mentions “controlled randomness,” since it shows me that he believes that when randomness is controlled, it can be used to generating beautiful pieces of art.

As he discussed World War I art pieces, I was intrigued as I never knew there were connections between the artwork that represents the artist’s history and current history. As someone who is currently learning World War I for the first time, this has gave me a gist to what these artworks mean, and it is about symbolism and the historical context. After watching the video, I am excited to be a bit more “chaotic” with the pieces along with keeping things in order, just like my loop experiment on p5.js.

 

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.

Week 1 – Self-portrait

Concept

For the first assignment, I will present a simplified picture of myself using p5.js. I chose to cover my eyes in the portrait because I wanted to symbolize introspection and the idea of seeing beyond appearances, as I used in other mediums.

The highlight of the code I am proud of is this snippet:

//small detail in Abaya
 stroke('rgb(32,32,32)'); 
  strokeWeight(5);
 let dx = 256 - 210; // Difference in X
  let dy = 399 - 410; // Difference in Y

  // Adjusting both points by the calculated difference
  line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)

This is because it really required me to understand the coordinates to position the detail. Finding an accurate x and y coordinates to perfectly align the detail was pretty challenging, with the errors ruining the other details of the portrait. However, using console.log to track positions and fine-tune them allowed me to get it right.

Embedded Sketch

Reflections

 I think I need to improve more on the colors and the use of shapes since my current portraits lack depth and realism. In addition, I would also add a background and add a bit more details in areas like the headscarf. While the task comes with a lot of challenges and debugging to do, I do learn more about JavaScript than I realized, and hopefully, as I learn how to utilize other functions, like the console.log() function, and line(), the processes of learning JavaScript will slowly become easier.