Everchaging, Never Still. (Week 2 Assignment)

Concept

This concept originated from the fact that our lives are never still, and I recently have been getting more and more aware and educated about the importance of mental health which inspired me to do this design. The initial idea was inspired from this piece of art.

The core of the design lies within the order of our lives, which I will represent using a grid of rectangles with varying sizes to represent life responsibilities and events with varying importance which is relevant to the size of the rectangles. The grid then, after a set period of time, begins to mosh into itself creating a sense of confusion and loss of control, which will reset after the user clicks on the screen. This resembles the idea that, mental problems will follow people despite them avoiding them or not trying to get them. Then, to reset the grid, the user has to take action, not just give in into the moshing effect and allow the mental problems to consume them. After the user clicks, the grid comes back and the timer resets, but the grid doesn’t come back to the same initial state as some mental problems are life changing and can leave a scar.

Sketch

Code Highlights

  for (let i = 0; i < 10; i++) { // using a for loop as a timer
    timer++; // increment timer
  }
  
   if (timer >= timerLimit) {
// randomly mosh over time
}

This is my usage of a for loop for a timer, where the variables timer and timerLimit have been initialized as global variables.

 

let randomX = random(width); // grab random x location
let randomY = random(height); // grab random y location

let moshedArea = get(randomX, randomY, 30, 30); // get the specific area with the random x and y positions with size 30
let offsetX = random(-10, 10); // move the area randomly between a range of 10 and -10
let offsetY = random(-10, 10); // same thing

   // redraw the image
image(moshedArea, randomX + offsetX, randomY + offsetY);  }

This is how I did the moshing effect by grabbing random blocks in the sketch and offsetting them between a range of -10 and 10 pixels each direction. Here’s the link for the code I found online to help me/inspire me to write my own moshing code.

I wanted to use a while loop but that crashes my browser for some reason, potentially due to ram usage or the browser i am using is not compatible with p5, so I used the draw function for this effect which I interpreted basically as a while(true) loop.

 

For the drawing of rectangles, I made a function that draws rectangles through a for loop, where indices i andindicate the amount of rectangles the loop is gonna draw. Since the time complexity is O(n * n), therefore the loop below with n = 30, will iterate 900 times, creating 900 rectangles. This could be changed to illustrate the drawing in a different way.

The and variables are set to the counters i and j respectively then multiplied by the value rectSize, which determines the spacing between the rectangles.

This is similar to the following:

where the n in this case in either  or  j.

function drawGrid() {
  let rectSize = 20; // base grid size
  timer =0; // reset timer
background(0);
  for (let i = 0; i < 30; i++) {
    // rows
    for (let j = 0; j < 30; j++) {
      // columns
      let x = j * rectSize; // X position
      let y = i * rectSize; // Y position
      let w = random(1, 20); // width between 1 and 20
      let h = random(7, 20); // height between 7 and 20

      fill(0);
      stroke(255);
      rect(x, y, w, h); // draw rectangle
    }
  }
}

 

Reflection and self improvement

I wanted to rotate each square, but the process of doing that seemed a little bit out of my knowledge scope and I did not want to just copy what I found online without understanding, so I assume the next step would be stepping out of my comfort zone and learning concepts I am not familiar with like the use of rotation when drawing shapes. This is also not the exact use of data moshing as it is sometimes used for transitions when video editing, I want to implement that using code but that is a little bit too hard with the limited knowledge I have right now.

I would also love to add an effect of pixel sorting, which I usually used to do when I used to create my motion graphics videos, but now with p5.js this is a new realm that I want to explore slowly and not rush, so I will probably come back to this sketch and improve it more when I have more experience with p5.js and implement the pixel sorting effect.

 

Thank you for reading.

-Mustafa Bakir

Reading Reflection, Week 2

The interplay between order and chaos in art is certainly a must when it comes to modern day art, especially art that is created digitally. I would argue that the usage of randomness and order definitely depends on the context of the art piece itself, which could determine whether the artist should obey every drawing/sketching principle or go full dice mode and rely on randomness of outcomes.

For my own work this week, I am already in the process of creating an ordered set of rectangles and employing an effect of “data moshing.” Data Moshing is a technique in which the footage is manipulated to look ‘trippy’ or ‘glitchy,’ usually by manual compression (see reference)

The idea of data mosh is usually very random as it takes random pixel ranges from the screen and offsets them, creating a gltchy effect that confuses the brain for a split second then it gets processed by it. The idea of my work is for the user to have a sense of what the art piece was before the moshing begins, then over time, the image would distort and gets moshed into a glitchy image shaped by the randomness of how pixels are shifting. Then, I am to add interactivity by resetting the effect. I would like to think about this art piece as how mental problems affect coherence of our brains, and the user interactivity advocates for mental health awareness and to try to combat and fight those mental problems and not let them consume our “order and coherence” over time.

I think for the purpose of my art piece, this balance between order and chaos is seamless, as shifting the balance to any of the binary directions would result in a different message or would not convey my thoughts accurately.

 

-Mustafa Bakir

Assignment 1, Self Portait

Concept

My concept originated from a visa picture I took when I was applying for my J-term.

Struggles

I made this sketch when I enrolled in the class before attending a single session, so it was pretty hard for me to be familiarized with p5 despite me having prior coding experience, so making elements like the body and hair was very tough.

Reflection and future improvements

I need to be more familiar with p5, especially with making more complex shapes like hair and body. For the next assignment I will watch tutorials and spend exponentially more time on practicing and playing around with the sketch.