Author: Amina Magomedova

Concept

When visiting different cafes, I often think how challenging it is for the waiters to keep in mind the orders of all people at the table – quite often they would place a dish your friend ordered in front of you instead, and then you will just exchange the plates by yourself. Not a big deal, right?  But visitors rarely think about the actual pressure in this kind of working environment – time, tastes, and preferences count for every customer.

I have decided to create a mini game that allows the player to experience how tricky it can actually be to serve the dishes during a rush hour. There is an extra challenge – the user is accompanying a table of two people on their first date, one of them is vegan and another loves meet. Will everything go as planned?

Sketch

https://editor.p5js.org/am13870/sketches/3_efwXDWQ

Highlight of the code

The most challenging part that I have managed to implement into my code was the functionality of the plates and the dishes on them. The falling dishes get attached to plate when caught by the user, and then the plate is dragged to the edge of the table. Vegetable-based dishes have to be dragged to the left, to Leonie, and meat-based dishes have to be dragged to the right, to Santi. If the player serves the dishes correctly, they get a tip – and I they don’t, they lose it.

Managing the interdependence of these objects was very tricky, but I have managed to defined specific functions within the classes so that everything appears and disappears when needed. Furthermore, setting up the winning and loosing conditions took time, so I have followed the guidelines from the class slides to add navigation through the screens.

  display() {
    image(plate2Patterned, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);

    // displaying the dish attached to the plate
    if (this.attachedShape) {
      this.attachedShape.x = this.x;
      this.attachedShape.y = this.y;
      this.attachedShape.display();
    }
  }

  mousePressed() {
    let d = dist(mouseX, mouseY, this.x, this.y);
    if (d < this.radius) {
      this.dragging = true;
      this.offsetX = this.x - mouseX;
    }
  }

  mouseReleased() {
    this.dragging = false;
  }

  attachShape(shape) {
    if (this.attachedShape === null) {
      this.attachedShape = shape;
    }
  }

  resolveShape() {
    if (this.attachedShape.type === 'vegetable' && this.x - this.radius <= 50) {
      score += 1;
    } else if (this.attachedShape.type === 'vegetable' && this.x + this.radius >= 750) {
      score -= 1;
    } else if (this.attachedShape.type === 'meat' && this.x + this.radius >= 750) {
      score += 1;
    } else if (this.attachedShape.type === 'meat' && this.x - this.radius <= 50) {
      score -= 1;
    }

    // removing the dish as it reaches the end
    this.attachedShape = null;
  }
}

Reflection

I have started the project by developing the “physics” part, so that all objects in a simplified style would move correctly. For example, the dishes were drawn as triangles and squares at first. After finalising this part, I have moved on to adding the detailed visuals – this was not the easiest part as well, but I enjoyed developing a certain aesthetic of the game.

I started the design stage by going back to the original reference for the game idea, the photograph by Nissa Snow, which depicts a long table with dishes on it. Using Adobe Illustrator, I have created the table for my game, adding and editing images of objects that follow an artistic, slightly random, almost incompatible aesthetic. Then I used Procreate to draw the introduction screen, the victory, and the loss slides that are shown depending on the outcome of the game. The illustrations were created in a minimalistic manner in order not to clash with clutteredness of the table.

Future improvements

To develop this mini game further, I would add more conditions for the player – for example, new sets of guests can come and go, their dietary preferences can change. This would require implementation of several more arrays and functions to set up the food preferences, and I think this is an interesting direction to dive into.

Concept & User Interaction

Choosing a dish in the restaurant is always difficult, especially if you have food allergies or follow a specific diet. Inspired by the photograph of a long dining table (Figure 1) and a scene from Ralph Breaks The Internet with a “Bunny Pancake Kitty Milkshake” video game (Figure 2), I decided to represent how complex it can be for the server to manage the flow of orders and requests.

My game features two people sitting on the opposite sides of a long dining table. Each person has their own preferences in food, which update several times – e.g. vegetarian, vegan, meat-based dishes. Depending on their preferences, the player has to use two plates on the table to catch appropriate dishes that are falling on the table and serve them to the visitors. The customised background music was created using I Miss My Cafe website, where I set up the volume of different actions, so that the sound would mimic the restaurant environment and the experience would be more immersive for the user.

Figure 1: Nissa Snow, n.d., https://ru.pinterest.com/pin/697635798561628823/

Figure 2: Slash Film, 2018, https://www.slashfilm.com/562530/ralph-breaks-the-internet-easter-eggs/

Highlight of the code

When working on the interactive part, I have spent more time than expected on creating the classes for the Plate and the FallingDish. Movement of both types of objects are dependent on the actions of the user, so I decided to implement mousePressed(), mouseReleased(), mouseDragged(), and define my own functions to control the interdependence of moving objects.

function mousePressed() {
  // checking if the mouse is over a plate
  for (let plate of plates) {
    if (plate.isMouseOver()) {
      plate.isDragging = true;
      plateDragged = plate;
      break;
    }
  }
}

function mouseReleased() {
  // the plate stops moving when the mouse is released
  if (plateDragged) {
    plateDragged.isDragging = false;
    plateDragged = null;
  }
}

function mouseDragged() {
  // dragging the plate with the mouse moves it
  if (plateDragged) {
    plateDragged.move(mouseX);
  }
}

Sketch

Uncertainties & Complexities

Since this sketch is the prototype of the final game, I have used simplified graphics, with geometric shapes symbolising the dishes and without the visitors’ figures. In the future development, I will import my own illustrations of the dishes and figures of people.

For now the main unresolved challenge is related to the release of the dish when the plate approaches the end of the table. I did not manage to come up with an algorithm that would make the shape disappear, as if the person consumed it, when the user drags the plate to one side of the table, so I plan to continue research and sign up for an office hour with the professor to discuss possible solutions.

Risk Reduction

By relying on the general concept of an existing popular video game, I ensure that the playing mechanism of my mini game is not confusing for the user.

The most challenging part was to implement the collision detection mechanism in order to make the falling dishes (represented as a triangle and a square in this prototype) stick to the plates when caught. I will continue working on the look of the plate with the dish on it, changing the location of the figure.

In the article “Computer vision for artists and designers” Gloan Levin proposes an important idea – the field of human-computer interaction has expanded, including now not only researchers and engineers, but also people from creative industries. As such, the scope of projects and inventions in this area grows as well, especially considering the increasing accessibility of software and hardware that allows experimentation for interactive media artists and even undergraduates.
Computer vision is essential for the machines to interpret the visuals, just as human vision is crucial for us to see what is going on around. However, there is a fundamental difference between these two – humans analyse the picture subconsciously, while computers depend on algorithms. Both are dependent on assumptions, but while human vision can interpret any new unexpected object by relying on their previous knowledge, a computer will likely break down. In order to help the computer to see what we want them to see, certain techniques have been developed to facilitate the machine’s analysis of the visuals – frame differencing, background subtraction, brightness thresholding, object tracking. All these methods allow to set up a path which the computer will follow when it analyses what it “sees”, creating specific conditions for the machine to make its output more reliable.
In addition to that, Levin touches upon the idea of surveillance in interactive art. Thinking about rapid technological development in the last decade, I am always anxious about the emerging tools for surveillance, especially facial recognition systems. Although I understand the necessity behind these innovations, the issue of privacy remains. As I was reading the article, I remembered a video that explained how the AI human recognition algorithm can be fooled – a special pattern for clothing was developed, which confuses the AI when it analyses the image, making it lose the human face. I think this is an interesting area for investigation in interactive media arts – how can patterns disturb or help the computer vision? And what are the boundaries of intervening in the surveillance process?

Concept

The other day I was wandering around Daymart with my friend who was trying to pick ingredients to cook soup. Looking at other people in the store, I noticed that some products are more popular than others, so I decided to create a humorous (anti) cookbook. When the reader clicks the mouse, a new recipe is generated with three random ingredients and two random actions from the lists that I have created.  The generated recipe is always absurd, and a funny image on the right complements this vibe.

Disclaimer: do not attempt cooking anything according to the recipe from this cookbook.

Highlight of the code I am proud of

Although the idea is not very complex, I have tried adding something that was not included into any of my works before – an image. It took some time, because I did not know that two preload() cannot exist in the same code since one will overpower another. I was moving the image preload to different segments of the code for a while, but then I have managed to figure out how to solve the issue.

function preload(){
  // loading text from the file
  strings = loadStrings("words.csv"); 
  // loading image
  img = loadImage('cookbook.jpg');
}

Sketch

Reflection

I am satisfied with the final result because it does make the user smile when reading all the generated recipes. One thing I would want to add is a similar method of randomising the image on the second page – instead of a single photo, it could be an actual illustration of the recipe. I am not sure how to do this yet, but I guess that several images would have to be linked to specific items from the lists in order to create an actual representation of the dish.

In his book “The Design of Everyday Things” Don Norman discusses complex characteristics of human-centred design – in fact, the user’s power to interfere with design is in feedback. I agree that in many cases with industrial and product design the most important thing is to be user-friendly. If the function is unclear because of the complex form, the object may become ineffective and even harmful. Furthermore, nowadays the job of interaction designers becomes more and more difficult: people indeed tend to memorise how to work with one specific interface, and then try to apply this knowledge to other machines and applications. This often results in confusion – but does it mean that all design has to become universal?

An example of something that drives me crazy in this sense is the design of the Snapchat interface.  It is very different from other social media apps, which makes it unique yet confusing for new users. When I just started using this app, I did not know about many features – for instance, that message history was not saved by default – and there was no warning or guidance. The only way to figure this out was through personal exploration, which is not always the most effective option. This could be changed by adding onboarding that would explain some unconventional functionality. 

I have read Norman’s book before, but I did not get in depth with analysing ideas about human-machine interaction. Now that I develop my own programs, I realise the importance of accepting human behaviour “the way it is, not the way we would wish it to be” (Norman, 1988). Being too logical while creating interactive media may become problematic when the user suddenly stops following the very logic.

Concept

Thinking of the interactivity aspect in my works, I have decided to explore video games that involve playing repetitively with similar characters. One of the first examples that came to my mind was Slither.io, so I have decided to create a work inspired by it. I started with the “Bubbles” code we have worked on in class, adding new parameters for controlling the bubbles and implementing the interaction from the user.

The final result is a reinterpretation of visuals and functionality of Slither.io – I have adjusted transparency of the background and the circles, so that the fading trace would be visible. There are three initial “snakes”, and as the user presses the mouse more of them appear on the screen. Furthermore, the bigger the radius of the circle, the faster it moves – just as the bigger snakes are more powerful in the video game.

Highlight of the code I am proud of

class Bubble {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
// setting up the radius of the bubble
    this.r = r;  
// setting up a random colour choice
    this.colour = [random(255), random(255), random(255)]; 
// setting up speed that depends on the bubble's size
    this.xSpeed = map(this.r, 5, 30, 3, 7);  
    this.ySpeed = map(this.r, 5, 30, 3, 7); 
  }

// movement of the bubble
  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

// bouncing off the canvas' edges
  bounce() {
    if (this.x > width - this.r || this.x < this.r) {
      this.xSpeed *= -1;
    }
    if (this.y > height - this.r || this.y < this.r) {
      this.ySpeed *= -1;
    }
  }

// displaying the bubble of with a trace of a certain opacity
  show() {
    noStroke();
    fill(this.colour[0], this.colour[1], this.colour[2], 150);
    ellipse(this.x, this.y, this.r*2);
  }
}

Working with randomised values took some time. As I was altering the code we have worked on in class with the professor, several parts had to be adapted to match my vision. I have watched a video tutorial to figure out how to set up the radius value, read a guide on using the map() function that allowed me to work with specific ranges of values, and a guide on the array methods in JavaScript. Setting up the Bubble class was the most challenging, but a very interesting part since I have researched and learned a lot in the process.

Sketch

Image 1: One of the stages of the visuals in my interpretation

Image 2: One of the stages of Slither.io video game

Reflection

I am satisfied with the final result of my work, as it matches my initial vision of how the interpretation of the game would look like. Moreover, I have managed to include interaction from the user and have learned several new functions by myself, so I am proud of the complexity of the code at this stage. It was difficult to figure out the setup of the randomised features and their interconnectedness, as I wanted the speed to depend on the radius.

However, in the future I would like to experiment more with the movement of objects, especially with their trajectories. Setting up an object following a direction that is not simply straight and predetermined would be one interesting path to go down.

“Form follows (?) function”

Chris Crawford provides valuable insights into the nature of using and misusing the word “interactivity” referring to both physical and digital spaces, without avoiding his subjective evaluation of such instances. In the context of studying Interactive Media, full understanding of what such media really mean is crucial. I agree with Crawford that interactivity should be regarded as a spectrum, yet I believe that there are certain characteristics defining strong interactive systems at least in the digital space. “Form follows function”, a long ago established design principle, can be followed (at least to an extent) – the designer should not overcomplicate the user’s experience, making the function unclear in a pursuit of a more unconventional form. Although I do not think that this principle must be implemented without exceptions, at this stage of my coding experience I lean towards making interaction with my works more straightforward for the user. Unplanned and random additions should not be forbidden, as we have already learned, but it is important to maintain a balance. 

“The rule of three” proposed by Crawford in this chapter will be a helpful guideline for me while designing a truly interactive work. However, I want to experiment in my p5.js projects with expanding the degree of interactivity, not limiting the system to inputs and outputs but adding more steps of interpretation. This could involve implementation of that very randomness, development of a complex algorithm that considers a variety of scenarios, or something even more thought-provoking.

Casey Reas’ view on the role of randomness largely resonates with me – I have valued the loss of order in artworks before, but I have not thought in depth about the possibilities that this provides to creators from different backgrounds. Thinking about randomness generated by computer, I have always regarded it “pseudo-random”, knowing that there are still specific algorithms that guide the output. In this sense, the quote from “The digital computer as a creative medium” by Michael Noll was eye-opening to me: “… full exploitation of those unique talents for controlled randomness and detailed algorithms can result in an entirely new medium”. This conclusion is not an obvious one, and this is what makes coding so fascinating to me – there are so many aspects under the control of the developer, that chance brings uniqueness to an outcome that could supposedly be predicted.

The interconnectedness of randomness and control is still confusing to me, and I believe that there should be a balance defined by everyone by themselves, not a universal one. In my works, I wish to include elements that go out of orderly more often, developing algorithms that follow a logic resulting in an unforeseen outcome, but do not become pure improvisations. Letting something go out of control is scary, but I have learned that uncertainty can bring beauty to the final result.

Concept

I have decided to continue the ideation I have worked on in the first work – as such, the colour palette and the style of visual elements remain the same, but the story has developed.

The picture is almost surreal – the frame is filled with identical eyes staring at the viewer, but as soon as the user presses the mouse some eyes close and some start looking to the side. This motion captures the moment of secret surveillance – as soon as someone looses the focus, someone else becomes a spy. The spying eyes are careful – when sight of the others comes back, everything seems normal. The change of eye colour also indicates the differences between two.

Highlight of the code I am proud of

Using the mouseIsPressed() condition seemed a bit confusing to me at first, since I had to define what happens when the mouse is not pressed (therefore the original image) in the end, but I have managed to figure out the order.

//pupils when eyes are closed
  noStroke()
  for (let x=0; x<=width; x+=200) {
    for (y=0; y<= height; y+=50) {
      if (mouseIsPressed){
        fill('#FFBB00');
        circle (x+90,y,25)
      }
      // pupils when eyes are open
      else{
        fill('#2D96BC')
        circle (x+100,y,25) 
      }
      fill('#2D96BC')
      circle (x, y, 25)
       }

Sketch

Reflection

Although the idea of the story behind the image was represented correctly, I believe that the “spying” process can be developed further in a more detailed way. For instance, different eyes can look into different directions, and the order of closing eyes can be randomised. More user interaction can be implemented – for example, the movement of the eye can be controlled only when the mouse presses on it.

Concept

Thinking of ways to present myself using simple geometric forms, I was looking for reference and discovered works of Carolina Melis, who is famous for using generative art to create geometric portrait. It inspired me to think in a similar direction, making sketches of a symmetrical and minimalist image.

My first sketches 

The final portrait captures me looking at p5.js coding tutorials for the first time – I was slightly scared of starting to lear something new from scratch, but immediately started to visualise possible projects. The spinning star in my eye represents this hypnotising process of generating ideas.

Highlight of the code I am proud of

Learning how to rotate the shapes was the most difficult part for me. Since I have not done this before, I looked for tutorials which helped me to figure out how this function works and how it can be applied to different shapes. I had to improvise with the translation of the centre point for triangles, since the tutorial only explained how to do so with shapes, but after long calculations I have managed to do this – and I am very proud of the smooth outcome.

//left pupil-star animated
  push() ;
  translate(145, 190) ;
  
  rotate(angle) ;
  
  fill('#FFBB00')
  triangle(-12.5, 0, 12.5, 0, 0, 30)
  triangle(-12.5, 0, 12.5, 0, 0, -30)
  triangle(0, 12.5, 0, -12.5, 30, 0)
  triangle(0, 12.5, 0, -12.5, -30, 0)
  pop();
  
  angle += radians(1);

Sketch

Reflection

I hope to implement more complex animations and interactive elements into my future works. For this specific work, I could add a more detailed background or add other body parts to the lonely head – moving hands? running legs? Furthermore, many parts of this code are repetitive – I believe there is a way to make it more concise while maintaining the functionality. For now, I am satisfied with the minimalist style of the portrait, since this aspect was inspired by my references, but in the future I hope to learn how to create more complex shapes and even detailed 3D objects.