Author: Isabella Hernandez

Vision for humans can vary. Some might not be able to distinguish colors properly. Others may need glasses to focus on little details, or see what is slightly farther away from them. However, one thing remains consistent, what humans see is not what they choose to see, but what is in front of them. They can’t see a pool if there is not a pool in front of them. If there is a house, they will see a house. However, a human’s vision will also vary on different factors: the brightness, the colors arounds them, the state of an individual’s eyes, and more. On the other hand, computer vision relies mostly on algorithms, pattern and feature recognition, etc. However, all of these are process, that, as described in the text, if they are low-level computer vision, they won’t even be able to resister a person or object in a video, making it flawed and susceptible to making crucial mistakes if not programmed properly. Nonetheless, this arguably shares a similar trait with humans when their vision is not 20/20, hinting that computer and human vision are both prone to having flaws.

One useful technique, aside from the others mentioned in the reading, such as keeping track of environmental conditions, patterns of pixels, and frame differencing or background subtraction, I found interesting is the example of the use of a “telecentric” lens to improve the performance of certain kinds of shape-based or size-based object recognition algorithms. I have always known that every algorithm in any computer system has a distinct role. However reading about how this lens has such a meticulous and specific task in detail has taught me the importance of each algorithm in the larger scale of aiming to achieve a successful, computer vision.

Personally, a computer’s vision capacity for tracking and surveillance can be quite effective in the use of interactive art, especially when it comes to immersive experiences. Its ability to “modify physical conditions” and capturing things such as movement or gestures can be useful to create responses to human actions which can be explore in immersive installations. Hence, like many immersive experiences, these responsive systems would allow participants to enhance the value and experience, conveying a more complex and meaningful kind of interactive artwork.

Concept + Design

For this project, I wanted to go for something mystical yet down to earth. This is why I wanted to integrate “ordinary” objects such as trees, flowers, and combine them with magical designs, such as the fantasy-like structures on the background, and blue hues.

Although I am still in the process of deciding what the interaction will be for the viewers to engage with this project, I have narrowed my main ideas to two.

1. The roses will display different colors and musical tracks whenever the viewer clicks on them. For example, one rose will show a different color after the viewer clicks on it. Another will change music every time it is clicked on it. And the third one might give an inspirational message after every click. This will allow an entertaining and colorful interaction to match the tone of the sketch.
2. Another option, while less entertaining, will focus on the visual aesthetics, hence, the interaction will rely on a function that resembles a magnifying glass so viewers can take a closer look at all the objects displayed, and depending on where in the canvas they move the mouse, they will be able to listen to a different musical track.

Most Frightening/Complex Part

Although I haven’t written a code or program that can detect, prevent, or avoid specific problems or glitches, I one code I wrote to prevent the image in my canvas from having any issues is the preload function. This should allow the code to load properly before displaying the image.

// Edited Image PNG 
let palace;
function preload(){
   palace = loadImage('palace.PNG');
}

Another function I struggled to make but eventually led to a success was the custom shape, which initially was made in another sketch to define the shape of the tree. However, after I realized that I would need to move this shape in my final sketch, I introduced the translate code, along function “drawCustomShape” in order to execute the function for the custom shape and translate it in the canvas to my desired position.

function draw() {
  background(51);
  

 drawCustomShape(450, 230);
  drawCustomShape(-50, 230);

  
}


// function of custom shape (tree) + translation of position at x and y

function drawCustomShape(x, y) {
  push();

  translate(x, y);

  noStroke();
  fill("rgb(235,233,233)");
  beginShape();

  vertex(140, 95);
  vertex(140, 250);

  vertex(140, 250);
  vertex(100, 280);
  vertex(225, 280);
  vertex(225, 280);

  vertex(190, 250);

  vertex(190, 95);
  endShape(CLOSE);

  fill("rgb(32,32,228)");
  ellipse(120, 90, 170, 120);
  ellipse(180, 98, 130, 110);
  ellipse(150, 45, 140, 160);
  ellipse(200, 55, 150, 120);

  pop();
  // end of code for custom shape
}

Embedded sketch

Reflection and ideas for future work or improvements

My next steps are to find a way to display text to introduce the context and instructions for the interaction. I also plan to decide what said interaction will be based on the feedback and begin to write the codes necessary in a separate sketch before applying it to the final one. In the meantime, I will also search for the music pieces I will be using and edit them accordingly.

Furthermore, I need to plan how to include the option to start a new session without restarting the sketch. Any kind of feedback will be highly appreciated.

What’s something that drives you crazy and how could it be improved?

One aspect of mobile design that has always bothered me is the design of exit buttons on ads. Often the (x) icon is so small that even when I tap directly, I am redirected to the App Store instead. This forces me to switch back and forth between apps until I can finally close the ad. This issue becomes even more frustrating when it occurs repeatedly on the same app, making the user experience distasteful. Evidently, one of the solutions to this problem is simply increasing the size of  the “x” button. While I understand the choice of design might be on purpose as part of a strategy to encourage users to download the advertised app once they are looking at the App Store, personally this makes the advertised product or app less appealing.

How can you apply some of the author’s principles of design to interactive media?

Throughout the text, Don Norman emphasizes a few arguments that can be applied to any kind of design. One is particularly significant, I believe, that can also be used as part of the brainstorming that comes before writing a code is trying to imagine how would someone without the experience respond to the work presented. As he effectively describes, there should be a clear communication between the user and the technology in use. For example, if I make an interactive artwork, it should be clear for the user what they are supposed to do to set in motion said interaction. I know that there are displayed images or text resulting from a code and that by clicking on the canvas, some kind of reaction occurs. However, someone who doesn’t have my experience or knowledge on interactive media might not catch on what is happening. Thus, it would be necessary to make instructions for the user to understand how to process, or indicate in some other form what must be done. Norman’s arguments made me realize how often we forget that all our accumulated experiences and knowledge are not shared by anyone, and even if it might seem unnecessary for ourselves, we must find ways to let a designed programs be accessible to a broader audience.

Concept + references

Lana Del Rey – Young And Beautiful (Lyrics) – Youtube

This piece was inspired by the landscapes that are usually used for some songs when a person wants to look at the lyrics, and I thought it would be a nice idea to explore with the generative text output. Although the parameters and functions used are very similar to the ones we learned in class, I tried to make changes to the structure of the text, as well as its position in the canvas, the background, and the color of the text. Overall, the generative text output resulted from a combination of words which I found most “romantic” and appealing, while also integrating a sense of “discomfort” laced within the text.

Highlight code

As previously mentioned, most of the codes are drawn from the ones learned in class. Despite this, my favorite code I incorporated into this project was the use of random text color and the gradient color background. These codes allowed me to 1) set a random change of color of text that adjusts to the random changes of the words for each sentence, and 2) create a gradient color background to resemble a sunset.

// This function is to make the background colors gradient
let c1, c2;


function setup() {
  createCanvas(400,400);
   c1 = color(240, 0, 110); // Red
  c2 = color(240, 120, 0); // yellow
  // setting the function so that the colors are displayed 
  
  
  
  // Number of lines (2)
print('The number of lines:' + strings.length);
print(strings);
  
}


function draw() {
  background(255);
  
  
  // mapping the text from excel to the canvas
  for (let y = 0; y < height; y++) {
        let n = map(y, 0, height, 0, 1); // Scale y to a 0-1 range
        let newColor = lerpColor(c1, c2, n); // Interpolate between colors
        stroke(newColor);
        line(0, y, width, y); // Draw a horizontal line
      }

  // random function for text color
    // these are random RGB values
  let r = random(255);
  let g = random(255);
  let b = random(255);

Embedded sketch

While this project was able to fill the basic requirements for a generative text output, I wish I could have been more creative and explore a different and more interactive way of displaying the text. For future works, I will try to research in advance how to implement interactivity while also taking in consideration the time needed and if the techniques I found are accessible to my level of experience.  Nevertheless, I do appreciate the visual aspect of the work, and believe it adjusts to my initial vision of how I wanted the outcome to be.

Concept + references

For this artwork, I was actually inspired by the composition of Still-life, a genre of art in which the artist focuses on applying an outstanding level of detail to an arrangement of everyday objects. One of the most popular choices for this genre are the paintings of fruit, which I decided to feature in my work. However, I decided to display these with their most fundamental structure, lacking any of the depth or level of detail found within the Still-life. After this, to exercise the use of the arrays, and object-oriented programming, using as inspiration one of the array functions I found in the section of Array Functions on p.5 j.s tutorials, I decided to create a trail for one of my favorite fruit, the watermelon.

Array functions

Highlight code

Although the watermelon trail is the most eye-catching, interactive, and unique code in this entire work, the code I am actually most proud of are the ones that make up the functions for my fruit. It was fun to create these functions and later simply add the berry(x coordinate, y coordinate) under the function draw() as well as for the apples, since not only did this process make it easier to make multiple copies, but it was nice to see objects of my own creation as part of the objects as if they were another primitive shape we can use whenever we want.

function apple(x,y){
  fill(200,40,50);
  ellipse(x,y,35,35);
  fill(0);
ellipse(x-1,y-10,10,8);
  //stem
  fill(50,190,40);
  rect(x-3,y-25,4,15);
 
}

function berry(x,y){
  fill(70,40,190);
  ellipse(x,y,15,15);
 
}

Embedded sketch

Reflection and ideas for future work or improvements

Although I am happy with the results, I wish I could understand more properly how the function of the trail works so I could make it smoother even if I move the mouse faster. Also, I would like to learn how to make more than one form of interactivity at a time, since I also wanted the rest of the fruit to fall down the canvas while the watermelon remained interactive for the viewers. Despite this, I learned the advantages of creating one’s own functions, how arrays can provide a a¿variety of  interactive outcomes, and how all of these elements compliment each other to make the final piece more engaging.

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. 

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.

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.