Author: Rujul Malhotra

In the video, Casey Reas talks about the evolution of art based on changes witnessed in the surroundings. Disturbance in the surroundings through wars or natural calamities often results in a shift in the art with a clear depiction of chaos. I found this observation to be really interesting as I had never considered that external factors could affect the type of art a person creates.

He further elaborates on the elements seen in art such as chaos and order which greatly influence the way one perceives the art.
A parallel is drawn between art and code, with a focus on order and randomness and how a slight change in symmetry can entirely transform a creative piece from a state of order to absolute chaos.

The video sheds light on the evolution of art through the years and how the state of randomness can now be expressed in a more complex way.

I found the discussion on the space between order and chaos quite insightful, and hope to consciously implement and analyze these concepts while viewing art and code in the future.

The assignment for this week was to use concepts of conditional statements and loops to produce a simple work of art. I initially decided to build upon the example of nested loops discussed in class to create an illusion using squares. This includes three nested ‘for’ loops for the pattern to repeat along the x and y coordinates and result in the decreasing size of the squares. To make it more visually appealing, the random function has been used within fill() creating a colorful effect.

https://editor.p5js.org/rujulm/sketches/K0Ubc62Yn

I decided to further explore the functions with something more challenging. This is when I thought of trying to replicate the design of the geometric panels of the Al Bahar Towers in Abu Dhabi. Built to combat the harsh weather in the UAE, these computerized panels are built with a technology that allows them to detect the position of the sun and open and close accordingly, thus reducing the amount of heat absorbed.

To create a similar geometric design, I began by sketching a pattern based on a 400×400 canvas size. This helped me estimate the coordinates to get the exact shape.

The entire design has been made using a combination of triangles of different sizes. I have used two separate nested loops to implement the inversion of the triangles.

for (let x=0 ; x<=width ; x+=100){
    fill(209,192,20,mouseX);
    
    for (let y=100 ; y<=height ; y+=100)
      //The if condition is used to alter the coordinates of the triangles depending on the row
      
      if (y==100 || y==300){ //executes for first and third row
        triangle(x-50,y,x,y-100,x,y-30);
        triangle(x+50,y,x,y-100,x,y-30);
        triangle(x-50,y,x,y-30,x+50,y);
      } else { //executes for second and fourth row
        triangle(x,y,x+50,y-100,x+50,y-30);
        triangle(x+100,y,x+50,y-100,x+50,y-30);
        triangle(x,y,x+50,y-30,x+100,y);
      }
  }
  
//The second for loop given below works exactly like the first one and has been used to create the inverted triangles
  
  for (let x=0 ; x<=width ; x+=100){
    fill(205,175,64,mouseX);
    
    for (let y=100 ; y<=height ; y+=100)
      if (y==100 || y==300){
        triangle(x+50,y,x,y-100,x+50,y-70);
        triangle(x+50,y,x+100,y-100,x+50,y-70);
        triangle(x,y-100,x+50,y-70,x+100,y-100);
      } else {
        triangle(x,y,x-50,y-100,x,y-70);
        triangle(x,y,x+50,y-100,x,y-70);
        triangle(x-50,y-100,x,y-70,x+50,y-100);
      }
  }

To make it more realistic, I wanted to include both the closed and open images of the panels. I have done this using the built-in Boolean variable mouseIsPressed, such that when the mouse is clicked a different view of the building is visible, as would be seen once the sun sets. I have also used the mouseX variable to change the opacity of the triangles, giving the panels a glistening effect.

I thoroughly enjoyed doing this assignment and feel that I have achieved what I had initially imagined. Reflecting on the possible improvements, I want to discover new ways to include more interactivity such that the user can choose the panels to be closed using the movement of the mouse.

The first week of the Introduction to Interactive Media course has been a beautiful beginning to this exciting journey. We were introduced to p5.js, a platform for creative coding, and delved right into it by learning to form two-dimensional primitive shapes with the help of available functions. The assignment to create a self-portrait using these concepts allowed me to explore my creativity and translate my imagination into a coded sketch.

My main goal with this assignment was to incorporate and master all the functions introduced in class. I approached the task without any image in mind and began with a simple ellipse to form the face. The rest of the sketch evolved based on spontaneous decisions. I wanted to achieve a realistic look for the hair, and after a few adjustments, I managed to create it using a combination of ellipses and arcs.

Throughout the process, I was extremely particular with details such as the facial features and the headband and worked to find the exact coordinates to position the shape using the print(mouseX+ ‘ , ‘ +mouseY) command.

To depict a bright sunny day in the background, I have used an arc and lines to create the sun, a simple image of birds using arcs, and a green rectangle to give an impression of the ground.

I wanted to experiment with this new form of creativity by making the sketch interactive. I tried this by incorporating the built-in variables of mouseX and mouseY to make the girl raise her hand, waving with a broadened smile as the mouseX variable crosses 300. This was achieved using the if condition and is a part of the code that I am particularly proud of.

//Waving hand
  if (mouseX>300) {
    quad(315,350,337,350,345,391,325,388);
    quad(337,373,377,315,396,318,348,392);
    circle(337,389,24);
    ellipse(385,312,25,28);
    ellipse(372,307,8,15);
    ellipse(375,295,7,20);
    ellipse(382,295,7,20);
    ellipse(389,295,7,20);
    ellipse(396,301,7,20);
  }
  else {
    rect(318,349,18,52);
  }

In addition, the geometric design on the t-shirt has a fill function with mouseX and mouseY as arguments, making the color change with the movement of the mouse. I have also used these variables to depict the movement of birds. Finally, I have used an if condition to make the girl blink when the mouse is pressed.

//Birds
  if (mouseX) {
    noFill();
    arc(153+(mouseX/5),56-(mouseY/5),47,40,0-HALF_PI,0);
    arc(200+(mouseX/5),56-(mouseY/5),47,40,PI,PI+HALF_PI);
    arc(125+(mouseX/10),85-(mouseY/10),47,40,0-HALF_PI,0);
    arc(172+(mouseX/10),85-(mouseY/10),47,40,PI,PI+HALF_PI);
  }

//Blinking eyes
  if (mouseIsPressed){
    fill('#EDD29C');
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  }
  else {
    fill(255);
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  
    fill(0);
    circle(227,212,9);
    circle(275,212,9);
    
    noFill();
    arc(278,203,10,10,0,QUARTER_PI);
    arc(279,207,11,10,0,QUARTER_PI);
    arc(224,203,10,10,PI-QUARTER_PI,PI);
    arc(223,207,11,10,PI-QUARTER_PI,PI);
    
    fill(255);
    circle(228,212,4);
    circle(276,212,4); 
  }

 

The assignment turned out to be a wonderful learning experience. I now find myself more confident with the topic. Reflecting on the process, I feel I would have to work on creating variables, which is something I did not include in this sketch. I would also like to explore the concept of loops as I felt the need to have repeated movement in a few places to enhance my sketch.