Author: Lujain Elmallah

Portrait Concept

While browsing the old computer art magazines I came across the two images below and felt like they perfectly captured the different possible contrast that can be achieved with computer art. The first one is more mechanical, sharp and exact, while the second one felt more natural and human due to it’s varying corners and circular flow. I derived my concept from this contrast, creating a work that is able to capture both ends of the scale using interactivity created with the use of loops. Initially the screen displays a constant line that stimulates the contents of a heart rate monitor, it is mechanical and rigid, what one could describe as lifeless. Then when the user comes in the picture and interacts with the work by pressing their mouse, the work begins to transition into a more organic flowing curve, along with a pulsing heart that appears in the middle that in a way adds life to the piece. This highlights the collaboration between human and machine that computer art embodies, combining both mechanical precision and human emotions.

 

Code that I am Proud of  

for (let x = 0; x < width; x++) {
    let y_machine = baseline;

    let lineX = (x + frameCount*1.5) % 130;

    //Machine heart beat based on x position
    if (lineX < 15) {
      y_machine = baseline;
    } else if (lineX < 30) {
      y_machine = baseline - 60;
    } else if (lineX < 45) {
      y_machine = baseline + 30;
    } 

    //Human heartbeat wave
    let y_human = baseline + sin((x + frameCount) * 0.05) * 40;

    //Transitioning between machine and human
    let y = y_machine + (y_human - y_machine) * trans;

    noFill();
    strokeWeight(2);
    
    //Color changing with transition
    let r = 255 * trans;
    let g = 255 * (1 - trans);
    let b = 50 * trans;
    stroke(r, g, b);

    vertex(x, y);
  }

Most my time spent on this assignment was in creating and refining the transition between the mechanical and human line, trying to recreate the vision. After multiple tries I ended up with the for loop above, that both creates the lines and blends them together using the transition factor defined earlier in the code. I do believe that this is the most important element of the code that creates the part that captures the concept, which is why it occupied most of my attention when creating the work.  Creating it taught me a lot about the technical and conceptual thinking that goes into coding computer art. It brought my attention to things like the use of color and the possibilities technically when it came to transitioning the color, which I integrated into the code.

Embedded Sketch

Reflection

I really enjoyed exploring the possibilities that come with using loops in the creation of a work of art. After completing my previous assignment and getting more comfortable with the program, I had a goal of shifting my focus a little to the concept behind the work. Which I think I was able to achieve this assignment with the use of the computer art magazines. With their assistance I was able to get inspired and integrate meaning into the code. For future work I’d like to use the techniques I learnt today to create a work where the user interaction does not only affect the visuals, but also the narrative and direction of the piece. With this time of interactivity the work can become a collaboration between the creator, the users and the computer all at once.

Portrait Concept

For my self-portrait, I decided to create a cartoon-esque representation of myself, with a background that evokes the feeling of entering another world in the viewer. The expanding circles in the background represent a portal, implying that the portrait is a view into another world. Aiming to give a sense of exploration, I wanted to add layers of interaction where the eyes follow the viewer’s cursor. The wandering of the eyes with the viewer are there to represent the curiosity of the character as they enter another world exploring their surroundings along with the viewer’s cursor. Combining the concept of dimensional portals, exaggerated cartoon features, and interactivity expresses my interest in making a portrait that feels alive and dynamic. The work aims to combine a static drawing with an experience where viewer becomes part of the artwork with their movement.

Code that I am Proud of  

//necklace
  fill('white');
  let necklace = [
    [210, 415], [220, 425], [230, 434], [245, 437],
    [260, 437], [275, 437], [289, 428], [294, 415]
  ];
  for (let bead of necklace) circle(bead[0], bead[1], 10);

  fill(125, mouseX, mouseY);
  let innerBeads = [
    [215, 420], [225, 430], [237, 437], [253, 437],
    [267, 437], [283, 434], [292, 423]
  ];
  for (let bead of innerBeads) circle(bead[0], bead[1], 10);

One of my priorities while coding is to keep my code clear and concise, as it ensures that later if there are any edits to be made I can easily identify the exact area that I need to modify and edit it with ease. While creating the circles for the necklace at the start I was creating one by one using the circle() function, which was taking a lot of time and was starting to look pretty repetitive, especially with all of them sharing the same size. At the start I decided to create a size variable to avoid having to change the size in every line if I wanted to change it. But then I realized that I was still repeating the circle() function, so I decided to create an array of the coordinates of each bead and creating a loop to place a circle in each of them. The resulting code was what I am particularly proud of off due to its efficiency and clarity.

Self-Portrait

 

Reflection

As my focus for this assignment was to get comfortable with the use of code for the purpose of drawing, I spent majority of my time experimenting with functions and made different stylistic choices without focusing too much on the concept and the story behind the work. For future assignments and projects I’d like to look into how to use the code to deliver a message or a story, which in turn would lead to me adding more interactivity and complexity to the piece as there would be a more clear path I am following while working. In particularly, I’d like to focus on adding an element of animation to a piece to give it life and create a more engaging feel to it.