Author: Liya Rafeeq

For this assignment to create an unusual switch, I decided to create a circuit with the cutest tool possible- my emotional support plushie.

( His name’s Poochababy )

Concept:

I feel like hugs are meant to comfort you and “light” up your world when you’re sad or lonely, so that’s my concept here! So when you hug Poochababy, the LED lights up!

the circuit:

First, I formed a simple circuit, using jumper wires, alligator clips, resistors, 2 red LEDs, aluminium foil, some tape and of course, Arduino Uno! Then I connected the ends to Poochababy with some tape. I then taped some aluminium foil to my T-shirt to complete the circuit when I hug Poochababy.

Here’s a close up of the circuit and the connections. And the link to the video demo :

Challenges and Improvements :

I first tried to use only jumper wires, but it was too short. So I fixed that by using alligator clips, which helped me getting longer wires. It was also a bit hard to place the aluminium foil correctly, but a few adjustments and strips of tape helped!

For improvements, I would definitely like to hide the wires in some neater way  on Poochababy, some sort of covering maybe. I would also like to experiment with codes, maybe a sweet audio message to play when we hug Poochababy.  I would also like to adjust the LEDs using code, maybe for them to blink faster or slower when we hug tighter!

This reading discusses the valuable contributions of Margeret Hamilton in the Apollo space mission and the field of software engineering. It is quite impressive to note that Hamilton was a working mother who worked days and nights to formulate the very software for the Apollo space missions. She faced deep skepticism and bias as a woman working in male-dominated fields, but she earned her righteous place among the others as a pioneer in the field of software engineering. It was interesting to see how the Apollo 8 mission astronauts once accidentally wiped out the navigational data, and how effectively she solved the problem with her team. Hamilton’s story inspired me in reflecting upon her values and mission as a woman in the male-dominated world of engineering and technology. She inspires everyone to step outside their comfort zones and experiment with curiosity. Her duality as a mother and a software engineer tells us that life can never give us setbacks, and it is up to us to overcome them. She inspires me to adopt her tactics of problem solving and team management and leadership in my life as well, adapting to these values and visions in the field of design and technology.

This reading by Don Norman focuses on the concept of aesthetics influencing an objects’ useability. Norman argues that aesthetic appeal can positively influence a person’s user experience. It can even help cover up minor errors and discrepancies in the objects’ useability. From “Coffee Pots for Masochists” to colourful TV screens, the beauty of everyday items can influence cognition and overcome minor misunderstandings. This reading made me think long and hard about all of the objects I use on a day-to-day basis, starting from the very iPad Pro I’m typing this blog post on, to the oversized cute coffee mug next to me. Is the mug very large; do I even need that much coffee? Probably not. But is the mug very pretty to look at; does it fit my aesthetics perfectly? Oh yes. Norman talks about the colourful TV screens, how colour was merely a thing of beauty in the already perfectly functional screens. This made me think of how we, as students, always design powerpoint presentations, or any sort of display. While the text to get the point across is visibly apparent, we also focus on the aesthetics and how appealing it is to our audience. However, too much “beautifying” can take away from the display’s message; and too little can’t capture the attention of our audience. The fine line between beauty and functionality is exactly what Norman proposes we depend on for the perfect formula in creating cool things.

For my midterm project, I decided to channel my love for baking and code a game for baking cookies!

Link to the full screen sketch: https://editor.p5js.org/lr3258/full/e-z5Ur1g3

Concept :

This is a simple game to bake chocolate chip cookies, very direct and fun! The player drags ingredients into a bowl to create the dough, which then bakes into delicious chocolate chip cookies! I wanted it to have a very comfy and cozy vibe, so I chose a colour palette of baby blues and browns. To make the entire game more aesthetically cohesive, I drew the ingredients on Autodesk Sketchbook and made the layouts on Canva. I also drew the egg –> dough sprite sheet since I couldn’t find any suitable ones online.

How it works:

The game isn’t meant to be challenging or competitive, it is more inclined to the process and joy of baking the cookies than being a “game” itself.

First, the user has to click on any key to start the game:

Next, the player has to drag the ingredients into the bowl. Here, when the egg is clicked on, it triggers the animation to display the dough. We can then press the Next button.

After this, we have to wait for 5 seconds, while the cookies “bake” in the oven. After 5 seconds, the screen automatically shifts with a Ding! sound.

Then, the final screen shows the baked cookies! We can then restart the game.

highlights of the code i’m proud of

A part of the game I’m pretty proud of is the sprite sheet animation. It took a lot of time to draw, create and then animate the sprite sheet. It was also the hardest part, and there was a LOT of debugging involved, but in the end I’m happy with how it turned out, even with the ingredients being dragged into the bowl. I’m also very happy with the aesthetic of the game, which really feels like home to me.

class Ingredient {
constructor(name, x, y, img, isEgg) {
    this.name = name;
    this.x = x;
    this.y = y;
    this.img = img;
    this.isEgg = isEgg;
    this.isDragging = false;
    this.offsetX = 0;
    this.offsetY = 0;
    this.isDropped = false;
    this.currentFrame = 0; 
    this.numFrames = 5; 
    this.frameWidth = 150;
    this.frameHeight = 150;
    this.isCracked = false;
    this.frameTimer = 0;
    this.frameSpeed = 6;  
    this.originalX = x;  
    this.originalY = y;  
  }
  
  display() {
    
    if (!this.isDropped && !this.isEgg && bowl.isIngredientInBowl(this)) {
  this.isDropped = true;
  this.x = bowl.x;
  this.y = bowl.y;
}
    
    if (this.isEgg) {
      let sx = this.currentFrame * this.frameWidth;
      image(this.img, this.x, this.y, this.frameWidth, this.frameHeight, sx, 0, this.frameWidth, this.frameHeight);
    } else if (!this.isDropped) {
      image(this.img, this.x, this.y);
    }
  }

  update() {
    if (this.isDragging) {
      this.x = mouseX + this.offsetX;
      this.y = mouseY + this.offsetY;
    }
    
    //dropping ingredient into bowl
    if (!this.isDropped && !this.isEgg && bowl.isIngredientInBowl(this)) {
      this.isDropped = true;
      this.x = bowl.x; 
      this.y = bowl.y;
    }

    // animate the egg spritesheet if it's clicked
    if (this.isEgg && this.isCracked) {
      this.frameTimer++;
      if (this.frameTimer >= this.frameSpeed) {
        this.frameTimer = 0;  // to reset timer
      if (this.currentFrame < this.numFrames - 1) {
          this.currentFrame++;  
        }
      }
    }
  }

  checkDragging() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height &&
      !this.isDropped
    ) {
      this.isDragging = true;
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;
    }
  }

  checkClicked() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height &&
      !this.isCracked
    ) {
      this.isCracked = true; //start the animation of egg cracking
      this.currentFrame = 0;
    }
  }

challenges and improvements:

When it came to challenges, the main concern was the sprite sheet itself. It was also hard to transition from different states smoothly, but I implemented the concept of state machine we discussed in class, and it went pretty well. In the end, the final problem I had was the autoplay of the background audio, which wasn’t working in the full screen version. For this, I used the p5js built in code, userStartAudio(), which starts the audio on click. Implementing the restart button at the end was also a bit tricky, but overall, I’m pleased with the final result.

If I could make some improvements, I’d add some extra elements, like a timer, or maybe animations for the baking time. I would also like to change the design of the buttons, which are currently very basic in contrast to the rest of the game.

Embedded sketch :

The webpage on Flong.com, “Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers”, explores techniques of computer visions for artists and programmers. Computer vision varies from human vision in many aspects. Computers can be more sensitive to light of different wavelengths (like infrared), something which isn’t possible in humans. It can also be trained to process images and recognise patterns. However, a computer doesn’t have the same intuitive skill humans do, and tend to not understand complex or abstract concepts. We can use techniques like background subtraction, retro reflective materials and brightness thresholding mentioned in the reading in order to help computers track what we are interested in. Computer vision tracking can significantly influence interactive media. Of course, as with most things, we have to consider ethical issues, especially when tracking might be done in public spaces. Computer vision can be extremely beneficial for data collection, analysing the audiences’ behaviour. Advanced technology can also be extremely useful for seamless communication in interactive media. Through combinations of physical inputs and well-thought creative concepts, we can create more advanced ideas in the field of interactive media. While computer vision has its limitations, we need to carefully understand its advantages and use these characteristics effectively .

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

This right-handed desk chair is used in many schools and universities. I remember they had these chairs in my classroom during J-term in Paris, and even during some exams in high schools. The way they are designed doesn’t make it easy for some of us to actually use it efficiently.

1. The work surface is way too small to actually keep all the necessary items on the tabletop. Keep your notebook, you don’t have space for your laptop, or your water bottle, or your pencil case. What’s the point of having a tabletop if it’s too small to use?
2. The chair is quite literally designed for right-handed users. I have left handed friends who considered this chair as their No. 1 enemy. The fact that it isn’t accessible to about 10% of the world’s population speaks for itself.
3. The stability and comfort factor. Since it’s going to be more weighted on one side, there is a high chance of wobbling and falling over. Moreover, these chairs are hard plastic, it’s not the most comfortable or built for prolonged usage.

How can we fix this? Personally, I believe that we can just eliminate this design from the world completely, but as designers we must find solutions, not exterminate problems (sadly). To fix this, I think we should increase the desk surface first. Introduce movable parts and extended writing surfaces for your extra stuff. Number two, consider a left handed version, maybe a side wing that can be tucked away. Finally, consider making the chair more ergonomic, a more comfortable material, and maybe even cushioned.

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

To apply the author’s principles in interactive media, I think we should consider discoverability and human-center designing. For example, using his principle of affordance, we can design a button in such a way that it looks like it is meant to be pressed. Or applying signifiers and using arrows in interactive art. We could apply theory of mapping, and structure a control in a way that users can navigate the page easily. We could also add interactivity to show quick feedback, maybe changing colours on clicking, or audio cues. Finally, we can design conceptual models or basic structures on “how to use” a specific interactive media piece.

First and foremost, this was one very interesting read.

One of the biggest challenges I ever faced since university started is probably explaining my major to my family. “Interactive Media.”… “But what is interactive?”… “How is media interactive?”… “Aren’t all medias interactive?”, till it lead me to wonder myself, “What is interactivity really?”

To see Chris Crawford’s take on this subject was very entertaining; his arguments and engaging form of writing made me think deep about interactivity. In this chapter, he describes it as “a cyclic process in which two actors alternatively listen, think and speak”. Initially, I was a bit taken aback by this definition, and his arguments on how certain things like reading or film weren’t really interactive, just engaging or participative. But after reading the whole chapter, I began to understand this take on interactivity more.

A strongly interactive system should definitely have these three characteristics. It should be able to receive our input, to process our reaction, and produce meaningful engaging output, stimulating a conversation between the two actors. I also think there should be a concept of control in the hands of both actors; something which can continue the interaction meaningfully, influencing the outcome. I also think that the interactions itself should be quick; one could argue that reading and film are interactions between the writer/producer and the viewer, just an extremely slow one. I also think that it should be adaptive to the user’s preferences and behaviours over time.

To increase the degree of user interaction in my p5js sketches, I think I can utilise the skills we learned in class, like mouse events and user defined functions. I can add more interactive elements like responsive animations, maybe try implementing hovering effects. The world of interaction is open to explore, experiment and implement.

Concept:

For this week’s production assignment, we had to use arrays and object oriented programming to create a generated artwork. So, I decided to take inspiration from Van Gogh’s painting “Starry Night” (picture taken from Wikipedia) and create a similar piece using OOP. So it would basically be a night scene, with yellow and blue dotted swirls in the sky, a moon and the iconic cypress tree.

To use arrays and OOP in my artwork, I decided to make the sky “swirls” using classes, with the colours from an array. It was a bit tricky to make the classes, and I had to debug the code several times, especially when creating the instances of the class. However, the comments in the console bar and Perplexity helped me figure out what went wrong.

A part of the code I’m particularly proud of :

This is definitely the code for the class. It was a bit hard, especially because it was the first time I was trying Object Oriented Programming, so I am super proud of how the sky turned out!!

class drawSwirl {
  
 constructor(a, angle, scalar, speed, colours) {
   this.a = a;
   this.angle = angle;
   this.scalar = scalar;
   this.speed = speed;
   this.colours = colours;
 }

  draw() {
  
  var x = this.a + cos(this.angle) * this.scalar;
  var y = this.a + sin(this.angle) * this.scalar;
  fill(random(this.colours));
  stroke('#ffffc5');
  strokeWeight(0.5);
  ellipse(x, y, 5, 5);
  this.angle += this.speed;
  this.scalar += this.speed;
  
  }

}

Embedded sketch :

Challenges I faced and the room for improvement :

I could’ve definitely added some interactivity to it. The cypress tree had to be made using beginShape(), which was extremely hard, especially with so many plot points. For this, I used Geogebra to plot points, calculated them and added it in.

Overall, I’m pretty happy with result of this artwork. There are definitely some things which I could add, maybe the village in the original painting, or some form of interactivity. But I also loved the challenge of using classes, and I’m proud of the swirly sky!