Author: Ellina Chermit

Concept

For my midterm project, i created an interactive experience at the airport that is a bit different from the usual way we think about travel.  Instead of conventional destinations, the airport’s departure board offers emotional states that users might be seeking: peace, guidance, restart, sign, purpose, direction, and inspiration.

The idea behind this project came from this simple question:
“What if people travel not to visit a place, but to experience a certain emotion?”

Reflecting on my own travels, I realized that my strongest memories aren’t necessarily about locations themselves, but about how those places made me feel. So, once a user chooses their destination, they receive a quote/message they might need to hear.

Project features

In my project, there are three main pages:

1. Welcome Page:

   • The user is greeted with a sky background and a welcoming message, all while having airport sounds in the background.
   • A “Start” button starts the experience.

2. Airport Scene:

   • Once the user clicks “Start,” they are transported to an airport background with lofi sounds.
   • They need to click on the departure board to proceed.

3. Departure Board Page:

   • This page focuses on the departure board, listing different emotional “destinations.”
   • Lofi music plays softly in the background to enhance the experience
   • Then, clicking on a specific “destination” triggers a pop-up message with a quote related to that emotion or the desired state a person wants to achieve.

Problems I ran into

Some ideas I initially planned like zoom-in features and extra interactive elements were difficult to make in the given timeframe. So i had to make the most essential features first.

So, the biggest challenge was finding suitable images online that matched the vision I had in my mind. So, i had to create some elements myself and manually edit the departure board to fit my concept and include the emotional destinations. I also combined multiple images to achieve the desired design for each stage of the experience.

Initially, I tried drawing the entire page from scratch, but I later realized that wouldn’t work well with the multiple pages interactive format I wanted.

Future improvements

If I were to expand this project, I would like to add animations to create smoother transitions between pages and implement a customized quote generator where i take input like the name of the user to make it feels personal.

Despite the challenges, I’m proud of how this project turned out. I put in a lot of time and effort to make it look as close as possible to what I imagined. By making this project, i could represent a concept I resonate with: travel as an emotional journey rather than just a physical one.

Link: https://editor.p5js.org/Ellina_Chermit/full/i1vywV_MT

In Computer Vision for Artists and Designers by Golan Levin, the main difference between human and computer vision is that while humans naturally interpret context and meaning, computers analyze images numerically.

People can recognize objects in varying conditions, but computers need specific training to do the same. For example, while we can recognize a face even if it’s partially obscured, computer vision would struggle unless it’s specifically trained to do so. This difference stood out to me because it shows how much more complex human perception is compared to a computer’s mechanical analysis.

To help computers track things we’re interested in, techniques like thresholding (simplifying images), edge detection (finding shapes), and optical flow (tracking movement) are used. More advanced methods, like machine learning, help computers recognize objects by learning from large datasets. These methods don’t give the computer understanding, just the ability to process data.

Levin also explores how CV’s tracking abilities are used in both art and surveillance. Artists use CV for interactive installations that respond to movement, but the same tech is used for facial recognition and monitoring. This can be a bit problematic as while CV enhances art, it also enables tracking people, sometimes without consent. Some artists challenge this by confusing or exposing surveillance systems.

This made me think about how CV has become so embedded in our everyday lives, from facial recognition on our phones to tracking in stores. While these systems often make things more convenient, they also normalize constant monitoring. For artists, I think it’s important to be aware of the implications of using CV, especially for privacy and surveillance.

My concept

I had several ideas for my midterm, but as the spring break is coming up, everyone keeps asking: “Where do you wanna go?” The variety of my friends’ responses made me think: what if people travel not to see a desired destination per se, but to experience certain emotions?

That’s how i came up with my project idea: an airport departure board where, instead of regular destinations, users choose from emotional states like: peace, guidance, re-start, sign. 

User Interaction

Here’s how the interaction works:
1. The user sees the departure board with different emotional destinations.
2. Clicking on a mood smoothly zooms in on that selection.
3. After zooming in, a pop-up appears with a random message or affirmation related to their chosen emotion.
4. Users can go back to the main screen and pick another mood.

I might remove the zoom in feature if that doesn’t work out and let the user receive their message right away. I also wanna add different sounds: airport sound as the background noise and the pop-up sound.

Complex Part

Complexities with this project started before i even got to the coding part. I had a certain picture in my mind and i realized the only way to bring it to reality is by drawing it myself, so i made this:

Then, i realized that it will take me too much time to colour it and have the best final look, so i just took another picture and redesigned it a bit:

If the quality worsens or something else goes wrong, i’ll have to redesign this completely by combining several pictures, but hopefuly i’ll stick with this one.

Code-wise the most challenging part of this project is the zoom-in transition when a user selects a mood. If the zoom feels too abrupt, the experience won’t be immersive.

To solve this, i want to try implementing smooth zoom animation using lerp() and ensure the quote pop-up appears naturally after zooming in.

if (zooming) {
  zoomFactor = lerp(zoomFactor, targetZoom, 0.08);
  if (zoomFactor > targetZoom - 0.1) {
    zooming = false;
    messageShown = true; 
  }
}

 

In The Design of Everyday Things by Don Norman, the main argument is that usability issues stem from poor design rather than user error. This challenges the common assumption that people are to blame when they struggle with everyday objects. Come to think of it, well-designed objects should naturally guide users, minimizing confusion.

One example of poor design that was not mentioned in the reading but has always frustrated me are cable, especially USB ones. The traditional USB connector can only be inserted one way, yet there is rarely a clear indication of which side is correct. This often leads to flipping the plug multiple times before it fits. A simple signifier like a physical marker or a visible point, could solve this issue and make the interaction effortless.

Norman’s principles are also highly relevant to interactive media. Websites and apps often suffer from unclear navigation, hidden menus, or buttons that don’t look clickable. Applying affordances and signifiers like distinct buttons and clear labels would improve usability. Similarly, feedback is important as when users submit a form or click a link, they should receive a confirmation to avoid uncertainty.

My Concept

This project is Barbie-themed quote generator  where the user can pick different moods and see a random quote associated with each mood. The mood options, such as “Empowered Barbie”, “Sassy Barbie” and “Sad Barbie” each trigger a quote that is supposed to motivate the user and uplift their mood.

Code Highlight

The most challenging part of this project was integrating randomly changing quotes based on user selection. To achieve this, I set up a function to handle button clicks, where each button is linked to a specific mood and quote. I also added hover effects and smooth transitions to create a more interactive experience.


// Quote Generator Page
function displayQuotePage() {
  tint(255, 180); // Makes background a little more subtle)
  image(bg, 0, 0);
  noTint();  

  // Title and text layout
  textAlign(CENTER); 
  textFont('Montserrat');
  textSize(36);
  fill('#ff3385');  
  text("Choose your mood:", width / 2, 50);

  // Mood options
  textFont('Open Sans');
  fill(0); 
  textSize(24);
  text("Empowered Barbie", width / 2, 110);
  text("Sassy Barbie", width / 2, 160);
  text("Sad Barbie", width / 2, 210);

  // Quote section
 if (quote !== "") {
    fill('#ff3399');  
    noStroke();
    rect(150, 280, 400, 80, 15);  
    fill('white');
    textSize(22); 
    text(quote, width / 2, 310);  
  }

Reflections

The concept for this project was inspired by the diversity of Barbie characters and the different moods they represent. Barbie has always reminded me of the kind of uplifting quotes I use in my projects, which makes me feel better and motivated.

Looking back, one area for improvement would be the design. Since I didn’t have much time this week, I focused more on the interactivity aspect. Ideally, i would add elements like animated transitions or colorful backgrounds that change based on the selected mood. I’d also love to add sound effects or background music to better the mood and make the experience even more immersive. I was also thinking about taking user’s name to make the experience feel more personal. Overall, I’m happy with the way it turned out as i used a lot of new elements.

Embedded Sketch

My Concept

This project is a twinkling night sky, where stars pulse and change brightness naturally. Clicking (or pressing a key) creates constellations by connecting nearby stars, randomly forming unique patterns each time. The background is a real sky image that i uploaded beforehand.

Code Highlight

It took me a while to figure out the way to form constellations between stars. So first, I try to find stars near the mouse (within a distance of 100). Then, I enhance the twinkling effect by making closer stars (within a distance of 50) brighter. Also, my constellations sometimes looked messy with too many connections so i had to limit those to only nearby stars (within a distance of 70) for cleaner constellations.

function createConstellation(x, y) {
  let constellationStars = [];
  
  for (let star of stars) {
    let d = dist(x, y, star.xPos, star.yPos);
    if (d < 100) {
      constellationStars.push(star);
      if (d < 50) {
        star.setSizeAndAlpha(d);
      }
    }
  }

  connections = [];
  for (let i = 0; i < constellationStars.length; i++) {
    for (let otherIndex = i + 1; otherIndex < constellationStars.length; otherIndex++) {
      let d = dist(
        constellationStars[i].xPos, constellationStars[i].yPos,
        constellationStars[otherIndex].xPos, constellationStars[otherIndex].yPos
      );
      if (d < 70) {
        connections.push([constellationStars[i], constellationStars[otherIndex]]);
      }
    }
  }

  for (let star of constellationStars) {
    star.setBrightness(255);
  }
}

Reflections

The vision i had when creating this was the power of connection, resembling “the butterfly effect” — the idea that everything is interconnected and happens for a reason.  At first, the stars exist independently, scattered across the sky like people and events in the world. But through interaction (user clicks), certain stars come together to form constellations: patterns that weren’t visible before. This could represent how separate people, situations, or choices can align to reveal meaning in what once appeared random.

Looking back, if I had to do this project again, I would likely try to refine the performance, especially if the number of stars increases. I would also improve the design part by adding more visually engaging elements. Overall, I’m satisfied with the result.

Embedded sketch

In “The Art of Interactive Design” interactivity is defined as “a cyclic process in which two actors alternately listen, think, and speak”.  This approach suggests that the quality of interaction depends on the effectiveness of each subtask. It seems to me then that a strongly interactive system is great in perceiving input, processing it meaningfully, and providing feedback right on time, creating a conversation between user and system.

In my opinion, to create a better user interaction involvement, the artist should be designing elements that not only react to user inputs but also adapt and evolve based on user behavior. For example, incorporating real-time feedback mechanisms can make the interaction feel more engaging.

Apart from that, allowing for user customization and providing clear and simple visual cues can guide users through the interactive experience. This aligns with Crawford’s vision of interactive design as an art form creating meaningful digital exchanges, where the interaction feels like a real conversation between the user and the digital environment.

My concept

My project is a simple firework animation with randomly changing backgrounds. While reading the technical reading assigned for this week about randomness, I realized I wanted to incorporate that concept into my work. Another inspiration was the drawing exercise we did in class using mouseX and mouseY, so I decided to apply it here with the fireworks.

However, as I worked on the project, I realized that there’s a bigger meaning behind it. The randomness of the fireworks represents the unpredictability of life, with both the good and the bad. Each click creates a unique firework explosion, symbolizing how every action and decision in life leads to an outcome that can never be exactly repeated.

Code Highlight

One part of the code that I’m proud of is how I used user interactions to create the fireworks effect. On top of that, i created randomly changing backgrounds.

function mousePressed() {
  if (showText) {
    showText = false; 
    background(0); // Clear text from canvas
  }
  drawFirework(mouseX, mouseY);
  let randomBg = color( random(255), random(255), random(255) );
    background(randomBg); // Random Background with each click
}
function mouseDragged() {
  drawFirework(mouseX, mouseY); 
}

Reflection

This project taught me a lot, while allowing me to incorporate some concepts learned in class. While I initially struggled with creating the fireworks and spreading out the lines, I’m happy with how it turned out.

Also, i had an idea to add “Back” button so the user could return to the inital background and I hope the knowledge i’ll gain in classes will allow me to add such features.

Embedded Sketch

In his talk about chance operations, Casey Reas introduces the idea that chaos always existed even before creation of the world, and that order was brought by the gods. He then claims that artists are now the ones who have been creating order, structure, and rationality. At first, I was a bit surprised by this view, because it seems to me that, in our modern world filled with structure and rigid rules of “shoulds” and “musts,” artists are actually the ones who are unafraid to bring self-expression outside of that “rational” box.

But then Casey goes on to talk about how artists can balance between complete randomness and total control, using random elements in their work to create interesting patterns and outcomes. He shares examples from his own work, where he created algorithms from scratch to produce highly animated pieces, trying to make something organic while combining different visual elements. This got me thinking about how some artists, myself included, prefer to stick to a specific vision or some kind of structure in their work, and it can be hard to incorporate randomness.

This talk pushed me to reconsider my own artistic process, whether it’s a simple drawing or a piece created through creative coding. Though i still feel like there should be a balance between randomness and some organization in art, I realized that i’d love to experiment with some unexpected and unconventionally creative elements in my future works.

When I was tasked with creating a self-portrait, I realized that my portrait wasn’t simply about representing my appearance, it was more about capturing my background. So, I decided to create a self-portrait set in the background of my hometown in the Northern Caucasus, including elements like the mountains and a horse.

Here’s the initial reference I sketched:

At first, I thought making the self-portrait would be a simple task, but I ended up making it way harder than needed by focusing on the overcomplicated background elements. However, looking back, this pushed me to learn a lot more than if I’d just gone for a simpler face portrait.

The main challenge for me was creating the mountains. For each individual mountain, I used simple triangles, a shape I used to struggle with. However, printing the coordinates helped me figure it out. I also wanted to create a mountain range, but I wasn’t sure how to add something resembling curves. I found this Reddit post that showed me how to do it: Creating Thick Curved Shapes.

Additionally, I wanted to add a gradient sky, which involved using loops to create the desired effect. I found this draft to help me with the technique: Gradient Sky Example.

Surprisingly, the most difficult part of the project wasn’t the background: it was trying to create the elements that represented me. I struggled with coding wavy hair, so I opted for a straight hairstyle instead. I also couldn’t figure out how to create side bangs using the arc function, so I decided to leave that out. The other challenge was creating a simple heart. I tried to make it using an arc, but that didn’t work out, so I came up with a solution: two circles and a triangle.

Looking back on this whole process, I really get the “vision vs. reality” thing now. Sketching out ideas and trying to turn them into something real was way more difficult than I thought. But it also pushed me to learn more coding functions, helping bring my vision to life.

Despite all the challenges and endless debugging, I honestly loved the process and the creative side of coding:) As time goes on, I hope I’ll get better at this, and eventually be able to create whatever I envision, with fewer limitations.

Attaching the code: