Isabella Hernandez – Page 2 – Introduction to Interactive Media

Week 3 – Reading Reflection

The Art of Interactive Design, Ch. 1 by Chris Crawford

Throughout the text, Chris Crawford emphasizes that interactivity requires three essential components: listening, thinking, and speaking. He illustrates this by presenting multiple examples where these elements are absent, such as reading a book, dancing, or watching a movie. I find this argument compelling, and agree when he highlights that certain situations, subjects, or objects cannot be considered truly interactive. The three conditions and examples highlighted by Crawford also resemble my own experiences in conversation. Usually, a conversation doesn’t really feel like an interaction if both parties aren’t engaged and responding. In fact, if one of the “actors”, as Crawford describes both participants in a conversation, is not thinking, listening, or speaking in response to the dialogue started by the other person, this situation might as well be like the one with an individual reading a book, an inanimate object that in spite of all the knowledge or information it contains, does not reply back.

This perspective becomes even clearer when I connect it to the coding concepts we have studied in class. A function not only interacts with variables and other elements of code to produce a visual animation or design, but each act of writing code itself is a form of interaction. In this case, the interaction arises from thinking and analyzing what is needed to structure the code, determining the requirements for it to function, and then writing it out. The system, in response, processes my input and responds to my actions, whether by successfully executing the program or by pointing out an error.

Although our current application of different technologies might be limited to a certain extent, Crawford’s argument has led me to wonder if there is a way to make non-interactive objects interactive. This draws my attention to the example of the book and makes me want to find a way in which a book can respond to our thoughts and opinions and response with enough intellectual and complexity to regard it as a form of interactivity.

Week 2 – Video Reflection

Reflection

Throughout my artistic journey, I have learned about the many rules of composition and other elements when it comes to creating an artwork, especially in certain genres. However, more and more artists continue to break these rules, leading to the creation of new genres and pieces of profound meaning and reflection. For this reason, what stood out the most to me was the introduction of “randomness” to the coding used for the works displayed, such as in the example of the cells where the use of randomness determined what the position and scale of the clusters would be, breaking the order and rules, but at the same time complimenting said order.

Nonetheless, in my eyes this randomness is a more subtle way of describing chaos. Chaos, the opposite of order, has always been a fascinating concept to me. How it disrupts what brings comfort and despite its unpredictability, its beauty emerges from what encourages artists to twist the horizon of expectations for viewers, offering new perspectives to “cliche” subject matter. Although I wasn’t foreign to any of these concepts, it was surprising to see them being introduced to systems and codes to produce the works shown. Before this video I always thought that coding relied mostly on the order, the simplicity, the structure, and precision of all the elements presented. This makes me want to explore more of this “randomness” in hope of applying the unpredictable on my codes as I do with my traditional artworks.

Week 2 Assignment_Loops

My concept

This week after learning about loops, for my design I wanted to explore how I could use different shapes and in some way combine or merge them to create different patterns.

For this assignment I created two designs after experimenting the use of loops and shapes. The first one as shown below is composed of a “for ()” loop including two sets of lines and two sets of ellipses. As shown in the second design, the first layer is a set of lines underneath one set of ellipses which produce a pattern that matches that of scales such of a fish. After this, I explored the use of a second layer of ellipses with a different size for the height and width, thus creating a pattern as shown in the first design.

Highlight code

One of the codes I was most proud of were the loops I used to make the scales. These consisted of lines that followed the code we did in class, but with a slight change in the width, height and their size. The second code was for the scales themselves, consisting of ellipses placed on top of the lines.

/// green lines
   stroke(200,200,200);
  for(let x = 0; x <= width; x += 60){
    for(let y = 0; y <= height; y += 60){    
     line(x, y, x+75, y+75);  
      fill( 235, 0, 255);
    }
  }
  
  
  /// Scales
  for(let x = 0; x <= width; x += 30){
    for(let y = 0; y <= height; y += 30){    
     ellipse( x, y, 50, 50);  
      fill( 225, 100, 230);
    }
  }

Embedded sketch

Reflection and ideas for future work or improvements

One of the things I struggled the most with was getting the loop code right for the lines. At first, I thought it would be the same as we did for the ellipses, however, after testing it out I realized this did not work. Nonetheless, after discussing my situation with the professor, I was able to understand my mistake, and how the code for the lines was different when it came to the variables after the (x, y,), which, unlike the code for the ellipse, required a plus sign to adapt an accurate width and height, resulting in this:

line (x, y, x + 75, y + 75);

For my next project, I will look at more tutorials beforehand to have more preparation and to have a better understanding of the codes I will be using in order to have a more precise result. I will also produce multiple sketches of what I want my final product to be so I can aim towards a specific design in case I don’t have the time to explore different outcomes. Lastly, I would also love to add more animations and movement to my sketches.

Assignment 1: Self-portrait

Fullscreen Sketch

Concept

For this assignment, I made a self-portrait using p5.js, the online editor, with codes learned in class. I started by placing an ellipse at the center of the canvas and added smaller ellipses to make the eyes, circles for the irises, a rectangle and two circles for the nose, and thinned arcs for the eyebrows and eyelashes. Then, I used ellipses to make the shirt and a circle to show the flesh connecting the neck and shoulders, and two ellipses for the ears. After this, I created a series of arcs, all with different radians and sizes, to create the curls on the front and the rest of the hair in the back. At last, I used the “noStroke” code and added color to the background and all the shapes.

- - - Favorite Codes
    - Although it isn’t the most creative or incredible code, I felt proud when I assembled the codes to create the structure of the face. I like the way the face, the neck, and the collarbone follow the founding shapes usually used for drawing sketches. While I am used to add more texture when I draw a person by hand or digitally, it is nice to see these shapes in a raw form, without any details or realism, and instead have a similar composition to a cartoon character. It was also fun to create the curls with the different variations of radians of the arcs.
```
 
fill('#DA9758')
 circle(275, 333, 23);
 circle(325, 333, 23);
 rect(282, 258, 35, 85);
 circle(300, 338, 28);
 
 fill('white')
 ellipse(205, 250, 80, 30);
 ellipse(385, 250, 80, 30);
```

Embedded Sketch – Self Portrait

Reflection and Ideas for Future Improvement

One of the steps I struggled the most with was finding the right coordinates for the different shapes, especially when each shape had a different amount of values (for example, the circle only had three and the arc could have more than five). This was especially hard when I had to consider where in the canvas I wanted them and details such as height, width, etc. However, the more I practiced, the easier it became to mark said coordinates and sizes.

For the future I would like to learn how to further mold the different shapes to create more varied and distinct shapes. For example, instead of having to use the ellipses and the rectangle to make a neck and shoulders, I would like to understand how to create connected dots or merging shapes that can create this structure in a smoother, slightly more realistic way.