Author: Zeina Khadem

In my opinion, what makes a strongly interactive system is, as Crawford put it, the “cyclic process in which two actors alternately listen, think, and speak”. It reminded me of something I am learning about in another class of mine, where we read Sartre. A French Philosopher and a major player when it comes to existentialism. In his work, ‘Why Write’, he makes a point in saying that with written forms of art, like books, simply writing it isn’t enough. The reader and the action of reading are what bring the work to life. He describes writing as a creative direction in which the author guides the reader to think in a certain way, but the perception of the reader is still uniquely theirs. In a way, we have presented the speaker of the two actors, which would be the writer. Then the listener and thinker would be the reader. The role of both actors here isn’t passive engagement; the listener should be thinking about what the speaker is saying to make connections and give what the speaker’s saying a broader meaning. Likewise, the speaker should think about what they say and how to respond to what was said by the listener when the roles are reversed. 

I believe that implementing in p5.js what I have in mind would be rather difficult, but a welcome challenge. User input really matters here, and I think adding aspects like microphone access might be a way to consider that. While I’m not sure how complex projects can go on p5, I think something where it registers voice commands to do certain tasks would be very interesting and interactive. Also, having seen previous IM showcases, a potential idea I have in mind, which would combine arduino and p5js would be a functioning (or almost) Spiderman web shooter.

 

As I was watching Casey Reas’ talk, I kept thinking back to the artists we’re talking about in Understanding Interactive Media. His instructions for his art reminded me of Ben Patterson’s ‘Paper Music’ and Sol LeWitt’s ‘Wall Drawing’, both are examples of art where you have a set of instructions, but each performance or art piece differs based on how the artists and performers interpret the instructions. I feel like both these works are also perfect examples of the idea of both order and chaos coming together. Elements of randomness and control are in use at the same time; you have control in the set of instructions, but you also have randomness in the way the performer will interpret these rules. Works like this make me think that a balance is essential, but what the ratio between order and chaos is rather vague. I believe it depends on the work, so the optimal balance shouldn’t be generalized, but on a case-by-case basis. You have works like Jean Arp’s collages, which are based on the law of chance, which I would say rely mostly on randomness. I don’t believe control would make much sense there. 

On the other hand, if I think of my most recent work for this week’s task, I would say randomization would make it better. I could randomize the different colors of the design on the coffee cup, but I’d need to control the color combinations and the colors to choose from. So this would be an example of where control is necessary while also maintaining an element of randomness. Ultimately, I think the amount of chaos and order that goes into one’s work depends on their intention with the work and what experience they want the watcher to have. 

Concept:

The first cup of coffee, usually accompanied by music of Fairuz, in the morning, is a staple in every Lebanese household. I knew I wanted to do something that is connected to my culture and identity, so I looked up a picture of the signature morning setup and tried my best to mimic it. 

A little bit of background, we call the coffee cup ‘finjan’ and the pot ‘rakwe’. The coffee itself is usually Turkish coffee. 

 

 

 

 

Proud of This Part(s)!
I’m proud of two parts of my code, one is where I used loops to imitate the designs on the cup.

//loop for the oval design of the cup (for)
let ovals = 2;
for (let i = 0; i < ovals; i++) {
  let x = 450 + i * 60;
  let y = 300;
  fill(" #3F51B5");
  ellipse(x, y, 20, 70);
}

//loop for the flower (while)
let flowers = 3;
let i = 0;
while (i < flowers) {
  let x = 430 + i * 50;
  let y = 275;
  stroke("#3F51B5");
  strokeWeight(5);
  line(x, y, x, y + 45);
  noStroke();
  fill("#F44336");
  ellipse(x, y, 10, 20);
  i++;
}

It was very fun to try and figure out the spacing, and using both for and while loops to get myself used to their separate structures, as I tend to be more prone to using for loops.

The other part of my code that I’m really proud of is the little animation when you press your mouse on the ‘rakwe’, it fills the ‘finjan’ and displays a welcome text. 

//little animation for when you press the rakwe
//coffee cup seems to be full
//and a welcome text
if (
  mouseIsPressed &&
  mouseX > 65 &&
  mouseX < 185 &&
  mouseY > 120 &&
  mouseY < 205
) {
  fill("#50211C");
  ellipse(480, 250, 80, 10);
  textAlign(RIGHT);
  textStyle(NORMAL);
  textSize(50);
  fill('black');
  text("Ahla w Sahla", 420,100);
}

My Work:

Reflection:

It’s really fun taking concepts we implemented in class, but actually applying them to your own creative work. You also wind up learning new things on the way, for example, this was my first time using text in p5.js. 

While I like the final result, I definitely see as we learn more, the more interactive and complex I can make it. I would like to make the ‘rakwe’ draggable, and have the user manually fill the cup with coffee. Also, maybe a possibility of under- or over-filling the cup and different display messages for each scenario. 

 

Concept

From the moment we got this assignment, I knew I wanted to create a self-portrait in a cartoon style that I loved as a kid. The first thing that came to mind was the Toca Boca games my cousins and I played all the time. Those characters had such a simple yet distinct style that really stuck with me, so I decided to take an inspiration picture from the game and model my self-portrait on it as closely as I could. I wanted my version to capture the charm of those characters while also being recognizable as me.

 The Inspiration Picture

I’m Particularly Proud of…

One part of the code I’m especially proud of is the mouth and eyebrows. I used arcs to draw them, which turned out to be trickier than I expected. Getting the curves and angles right took some trial and error, but it was so satisfying to see them finally come together.

//mouth
fill(0);
arc(200, 265, 20, 5, 0, PI, CHORD);

//eyebrows
fill('#D3A45F');
noStroke();
arc(158, 195, 30, 11, PI, TWO_PI, OPEN);
arc(242, 195, 30, 11, PI, TWO_PI, OPEN);

The Portrait

             

Always Room for Improvement

I think my portrait leans toward simplicity, which was partly intentional because I wanted it to reflect that clean, cartoonish style. That said, there’s so much room for improvement! In the future, I’d love to experiment with adding a more dynamic background to give the portrait some life. I’d also like to attempt a full-body version, which would be a fun challenge in balancing proportions and keeping the cartoon aesthetic consistent.

Another thing I want to work on is making my code more efficient and modular. Right now, some parts are repetitive, and I can see ways to organize it better with functions or loops. Overall, this project was a great opportunity to combine coding with creativity, and I’m really proud of the result.