Category: F2023 – Aya

As we begin exploring physical computing, I find it extremely interesting to create simple circuits in replicating mechanisms. This week’s assignment to create an unusual switch provided me the opportunity to get creative. After a lot of contemplation to come up with an idea, I finally decided to create a boat using origami with a sail that flutters with the wind. The idea is inspired from the scenic view of sailboats along Abu Dhabi Corniche. The working of the project is such that when the sail comes in contact with the pole at the back, the circuit is completed and the LED bulb glows.

 

 

 

 

To implement the simple circuit, I have used a resistor, an LED, a breadboard, the Arduino and connecting jumper wires. The pole and the sail have been covered with Aluminium foil to serve as conductors. The model was tested outdoors, and was observed to successfully work with the wind.

I found this assignment to be particularly interesting, as it involved more ideation than implementation of the concept. I am satisfied with the end result of achieving a switch without the use of hands.

IMG_9625

(You can watch the video here)

When the diary is closed, it will complete an electrical circuit, allowing current to flow, and turning the switch “on.”  The yellow
LED light should be on when the diary is closed because usually, we should not read someone’s diary. So, in this project, I am using a diary as a privacy indicator. When the diary is closed, a tiny LED on its cover lights up, signaling that it’s off-limits and private. The light is a visual reminder to respect personal boundaries and not read someone’s personal thoughts. It’s a straightforward way to encourage privacy and uphold the tradition of keeping diaries safe from prying eyes.

During the project, there were some challenges. Attaching jumper wires to the diary’s pages was a bit tricky, and electric tape was used to help keep the copper wire in place, even though it may not look very clean. Another challenge was dealing with the copper wire – its insulation had to be removed to ensure the electrical circuit worked. Sometimes, the LED didn’t light up consistently when the diary was closed, likely due to difficulties in securing the copper wire in the notebook. Despite these challenges, the project successfully turned a diary into a privacy reminder.

The reading “Her Code Got Humans on the Moon—And Invented Software Itself” delves into the life of Margaret Hamilton and how she invented software at a time when women were not seen in this type of field. Reflecting back, I was quite surprised how Robert McMillan, a male writer, wrote this pro-feminist reading. If a female wrote this, there might have been a suspicion of biasness. I particularly remember when McMillan mentions how Hamilton often brought her daughter Lauren to work. This made my appreciation for Hamilton increase tenfold since women were already seen less in the workplace, let alone women who were also mothers. One part that slightly annoyed me was when they weren’t listening to Hamilton’s advice on what to do with the error in the program. I believe there may have been misogynistic behavior in play here as they didn’t want to believe a woman would point out their mistakes. This reading also made me contemplate how I used to focus only on the end result and not on the painstaking process that brought the result. I used to focus on how the first man landed on the moon and not who was the reason he was able to land on the moon. I now question several incidents where I only knew the end result, like the discovery of gravity, the creation of vaccines, and several other phenomena where the creators were not credited.

The reading “Attractive Things Work Better” delves into the role our emotions play in our cognitive function and problem-solving abilities. It argues how humans are able to use machines and other systems more accurately if they are attractive to the eye. While I believe something attractive certainly creates a better mood which enables people to solve things more easily, I don’t believe that this works in every scenario. For instance, they probably failed to take into account that some people may already be in a bad mood or a good mood before using the machines. They could also already be accustomed to the machines or just using them for the first time. Similarly, certain gadgets like mobile phones will probably not impact someone’s mood in itself, but rather only from the content displayed on their screens. I remember this reading particularly talked about the Mini Cooper which is a popular car and they associated it with putting people in a good mood. However, it failed to take into account that while this car may look appealing to some, it may not be for others as everyone has different tastes. As a result, several factors are in play here rather than just the aesthetic appeal of the devices and gadgets.

These readings delve into the discovery of systems or thoughts that would change the way we view the world. Hamilton discovered software engineering and was the reason humans were able to land on the moon. Similarly, Masaaki Kurosu and Kaori Kashimura discovered the impact of emotions on functionality. Both these readings also reveal how there is always going to be someone who doesn’t believe in your theory. You just have to prove them wrong.

This week’s readings from Donald A. Norman, including “Emotions and Attractive” and “Her Code Got Humans on the Moon—And Invented Software Itself,” resonated with me and left me with some valuable insights. On one hand, the story of Margret Hamilton stands out as an inspiring example, not just for me, but for countless young women aspiring to make their mark in a predominantly male-dominated field. Her journey began without a clear goal or ulterior motive, yet it ultimately led to the creation of software that played a pivotal role in the Apollo missions at NASA, laying the foundation for modern computer software. Her story embodies the timeless principle of “just do it.”

Sometimes, self-doubt can creep in when we feel we’re not good enough or lack a full grasp of the subject matter. We might question whether we truly belong in certain spaces, especially when we don’t see others who look like us or have similar backgrounds. However, Hamilton’s remarkable journey serves as a powerful reminder that we can carve our own path and enter spaces we aspire to be in, regardless of the current occupants. You never know who might be watching or following in your footsteps.

Her journey, from starting something with no clear plan to creating an industry worth $400 billion, illustrates the incredible results that can emerge from hard work and dedication. This also connects with Norman’s readings because Hamilton didn’t create something for the sake of it; her work was both functional and aesthetically appealing, leaving an indelible mark on history. It emphasizes that our focus should not solely be on usability or aesthetics but on striking a balance with intention and purpose.

Margret Hamilton didn’t stumble upon the code that we now recognize as software; she crafted it with usability and a form of beauty that only programmers of her time could appreciate. Her deliberate approach propelled her to the position she holds today, serving as a true source of inspiration for me in my own career aspirations. Her story encourages me to follow a path that combines functionality and artistry, much like she did in her groundbreaking work.

The human tendency to prioritize appearance when evaluating various aspects of life is undeniable. Whether it’s people, cars, clothing, destinations, smartphones, or even cuisine, visual appeal plays a prominent role in our judgments. Strikingly, aesthetics have overshadowed the intrinsic value of things in some cases, particularly in the world of business. For instance, a product, identical in functionality, can attract a different customer base based solely on how it is presented – be it in a practical or luxurious manner. This phenomenon has extended the age-old adage, “Don’t judge a book by its cover,” beyond books themselves. It now applies to both human beings and machines. Regardless of our reluctance to admit it, appearances wield immense influence, often shaping the initial and most crucial impression we form. This truth underscores the significance of visual aesthetics in our lives, as they continue to guide our choices and perceptions. The article “ Emotion & Design: Attractive Things Work Better” by Donald Arthur the American professor discuss this phenomenon and took the argument to a new level of analyzing why this is the case. He provides examples that highlight how our emotions influence decision-making, such as the contrast between happy and tense individuals when completing tasks. This analysis not only reveals the impact of emotions on decision-making but also emphasizes the importance of aesthetics and emotional appeal in the functionality of objects and systems.

After reading this week’s readings, a section of the book Emotion & Attractive and the article “Her Code Got Humans on the Moon–And Invented Software Herself”, I can feel a beautiful correlation between the two texts that allows me to have a deep sense of how I may do my work one day. It is inspiring from both texts to see how a simple idea can someday go beyond the point and objective it was made for. Margaret Hamilton’s invention that had a single objective is now a $400 billion industry. I would like to think it is mostly her love and passion for what she does that encourages her to take a few extra steps even after ensuring everything is going to be perfect. Her project reached the moon and came back to earth to fulfill more objectives. Relating this to the book Emotions & Attractive, I think it is very much okay to go above and beyond what the main purpose could be if someone decided to just do it. It serves as some kind of motive to include what makes me happy and not be afraid of the limits cause there really are no limits to begin with. The author collects pots with different shapes, he thinks they are beautiful, but some of them don’t serve the objectives they’re supposed to. This still does not stop him from collecting them simply because he wants to. It is comforting to allow ourselves to do or collect random interests without needing to explain why. However, it is also a good idea to implement aesthetics into the design of an object in order to help people perform the required objective with minimal effort. For example, moments of hazards or anxiety could limit the view of surroundings to someone, so coming up with an ideal psychological design can be extremely helpful to help get out of danger safely and quickly.

A video of my switch is uploaded here.

I complete the circuit and a red light switches on by pressing two cigarettes together and open the circuit and turn off the light by pulling them apart. I taped the connecting wires to the cigarettes. A picture of the circuit is below:

The circuit itself is simple but I like the concept behind it. In smoking circles, if somebody doesn’t have a lighter, a friend will offer to light their cigarette by putting their cigarettes together. It’s surprisingly intimate because the two people have to put their faces quite close to each other for the trick to work. You pause in the moment, and then your cigarette flares bright red, and you pull back. I really liked making this circuit because it resembles that smoking experience pretty closely. There’s something meaningful in it to me, in watching the little red light, which indicates the cigarette lighting, burn and disappear by putting the cigarettes together and pulling them apart. I think it’s a pretty cool switch.

Unfortunately, I burned two red lights out before getting a friend to help me figure out that I needed a resistance wire with a higher resistance. Their remains are pictured below, RIP:

All in all, it’s simple. And it requires the use of my hands but I liked the concept too much to let it go. I want to upload this for now but I plan to ask Professor Riad to help me develop the switch a bit more for the purposes of this assignment.

(Also I am just recognizing how often cigarettes have played a role in my assignments this year. Hm.)

A friend returned from Bosnia with the nicest pack of cigarettes I’ve ever seen. They were gold tipped, shiny, and bodied black in a velvety way. Smoking one, I felt like a Roaring Twenties aristocrat, a brooding Hollywood actress swept up by the whirlwinds of doomy and gloomy, a Peaky Blinder, a potayto, a potahto, it goes on. Disappointingly, much like the Hollywood actresses I was embodying, the cigarettes were all glitter and no gold, all show and no sand. They were tasteless, bland, and vapid. I write all this to say that I understand Norman’s proclivity towards usability in design. In this day and age, everything is about being pretty to the point of sacrificing utility. Everything is curated for the aesthetic. In the Decade of the Doom Scroll and the Age of the Advert, you don’t really need substance to get by, just sexiness. It’s all tricks and no party. Just look at the Kardashians. We have christened Captain Kim to helm us into the maw of Charybdis. I shudder for our souls.

Nevertheless, we are creatures of beauty. And design really does work better when it works in tandem with the aesthetic tendencies within us. We sort of, sway, together then. Our insides match our outsides and all is right with the world. That’s why it’s important for cities to be beautiful. I hope one day humanity will gain enough sense to raze every American suburb and most Midwestern cities to the ground. Beauty is necessary for objects to reflect the higher profundity within us. Norman nailed it on the head when he said designers have to balance both. The zeitgeist of today prioritizes prettiness over punctiliousness, but I will always petition for prioritizing usability while using beauty like a cherry–an ice cream sundae is never quite right without that cherry.

Everything really is about equilibrium, ain’t it. Norman’s comments on balancing between negative and positive affect struck deep too. We live in an ultra-motivated society, and I think the best way to navigate it is to channel strength and energy from your darker emotions while retaining a positive-enough mentality that keeps you from becoming an incel. I think the greatest individuals are people who achieve both great depth and breadth and while extracting from each side to maximum effect. Margaret Hamilton was probably one such individual. I admire her more than anyone could know.

CONCEPT

You know when you sit at your desk, open up your assignments on your laptop, and after thinking about what it is you have to do, you finally come to the conclusion: “Man, I could really go for a walk right now”? I know it all too well. I did the same with my midterm project, going on walks on and around campus, beyond the barriers across the welcome center (definitely not trespassing), above the highway behind campus, below the tunnel across the highway, but not starting my project. I’d listen to my playlist on Spotify while looking at the stars in the light-polluted Abu Dhabi sky, or at the stunning night skyline from the bridge on the highway (again don’t call the cops). Struggling to settle on an idea, I finally thought of making the exact thing that I was using to procrastinate on starting work in the first place – an interactive music library interface, just like Spotify. Now I could procrastinate while working, if that makes sense.

WORKFLOW

I had come up with an idea, sure, but I soon realized that to actually bring my idea to life, it was ME who would have to work, to write code endlessly, to face disappointment because of errors, to fix said errors, to do it all over again God knows how many times. Grappling with the truth, I started first with loading whatever I would need for my project: album cover art, that font Spotify uses, the actual songs I would have in the library (definitely not downloaded from a sketchy website that might as well have phished me). I picked the songs very intricately to kind of form a parallel with the stages of procrastination as experienced by me:

Gangtey- aswekeepsearching

This song by Indian band aswekeepsearching represents for me the stage where my assignment’s deadline is far away and not thinking about it poses no immediate threat. The repeated mystifying chants are melancholic, but calm.

 

Kalga – aswekeepsearching

By the same band, this one represents the shift from the calm to the storm. It starts off calm but is then interrupted by loud drums and vocals, representing the interruption of calm by dread when the realization of incoming deadlines hits.

 

 

Nahin Milta – Bayaan

Nahin Milta, by Pakistani bad Bayaan, is a song about acceptance following hopelessness. Which in the sense of procrastination is pretty self-explanatory…

 

 

 

Tasveer – Mooroo

Another melancholic but calm song, this one you’d listen to while finally working on your assignment, maybe even singing along with it. Maybe don’t look too much into the lyrics though, because it can get sad. Tasveer means picture, and Mooroo sings about spent memories only living in pictures after they are lived.

Ayi Bahaar – Kashmir

This upbeat song is about the coming of spring. You guessed it – you’ve finally finished your assignment, and things aren’t too bad after all. There is still good in the world.

 

 

Here is the  playlist that I’ve used in my sketch:

After loading everything, I had to think of the logic behind different functions of a music player: play, pause, skip, go back, add to favorites, etc. At one point I was convinced that I would in no way be able to do all that because I could not for the life of me figure out how to implement  it. A few long walks later, I decided to start writing in the hopes that it would come to me itself; and come to me it did. I implemented the whole music player as  a class with methods for displaying relevant information like images, shapes, text, etc. It starts at a screen that introduces the concept and requires you to click to begin the experience. You can return to the screen from the music player by pressing any key on the keyboard. In the player, you can pause and play songs, skip to the next song, go back to the previous song, repeating the same 5 songs without going out of bounds. The code aspect can be understood using the comments on my sketch, the link to which I have provided below:

https://editor.p5js.org/haroonshafi/sketches/9mTUs7KrB

SKETCH

Here is how I wanted my sketch to look like:

Here is the sketch:

I am quite proud of finally figuring out the million conditions for implementing playback options. Embedded below are specific parts of the code: the first one that displays the details for a single song and the second skips the current song.

case 0:
        background("#484848"); // set background according to colour of album cover

        push(); // drop down icon
        strokeWeight(4);
        stroke("#373737");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          // duration slider constantly updating as time passes using the ratio of two methods as follows
          this.x,
          0.7 * height,
          (gangteyAudio.currentTime() / gangteyAudio.duration()) *
            (7 / 9) *
            width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();

        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y); // displaying name of song
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20); // displaying artist name

        textSize(10); // the following code displays the time of the song and its duration in minutes and instead of showing it in seconds by default by using modulus and integer division functions
        text(
          Math.floor(gangteyAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(gangteyAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(gangteyAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(gangteyAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(gangteyAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(gangteyAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );

        if (gangteyAudio.isPlaying()) {
          // for alternating between the pause/play icon shape
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }

        image(
          // displaying album cover
          gangteyImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;

if (
      // if forward icon pressed
      mouseIsPressed &&
      mouseY > height * 0.85 - 12 &&
      mouseY < height * 0.85 + 12 &&
      mouseX > width * 0.7 - 10 &&
      mouseX < width * 0.7 + 12
    ) {
      greenFlag = 1; // reset heart flag to clear as song changes
      switch (
        songNum // stop song currently playing
      ) {
        case 0:
          if (gangteyAudio.isPlaying()) {
            gangteyAudio.stop();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying()) {
            kalgaAudio.stop();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying()) {
            nahinMiltaAudio.stop();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying()) {
            tasveerAudio.stop();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying()) {
            ayiBahaarAudio.stop();
          }
          break;
      }
      if (songNum == 4) {
        // update index to next index by incrementing
        songNum = 0;
      } else {
        songNum += 1;
      }
      switch (
        songNum // play song from next index
      ) {
        case 0:
          if (gangteyAudio.isPlaying() == false) {
            gangteyAudio.play();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying() == false) {
            kalgaAudio.play();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying() == false) {
            nahinMiltaAudio.play();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying() == false) {
            tasveerAudio.play();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying() == false) {
            ayiBahaarAudio.play();
          }
          break;
      }
    }

I think it is possible to enhance the functionality even more, for example by enabling shuffle, but this specific playlist is meant to be listened to in its exact order so maybe next time! Other than that, I am quite satisfied that even though I didn’t think it possible in the beginning, by revisiting the concepts and spending hours revising everything we’ve learnt so far and even checking out some other concepts, in the end I was able to bring my concept to life. Also, you guys should definitely put this playlist on while on a walk and maybe tell me what you thought about it! Hope you like the experience!

Concept:

Boredom is a state of mind that craves some type of change. I ask myself sometimes when was the last time I have gotten bored. My answer would be is that I do not remember. While discussing other’s people state or level of boredom, I can see a glimpse of the different life each one of us has. As well as the pace humans like to take for themselves.

In my game I’m Not/Too Bored I wanted to create a dialogue between characters that experince different life pace than others. Each holds a unique lifestyle that changes how they decide to go on with their way of living. While engaging in a conversation with three people, I want to gain data, that shouldn’t be too seriously taken, to showcase the level of boredom the player might experince in life. I could also add a little input that could help them as I myself never get bored.

Process:

I started with the type of questions I wanted to ask, but I also didn’t want to make them way too deep; mostly because the results are not serious.

I started by coming up with NPC designs both in a small miniture version and the speaking version.

Drawing the background was fun as it was the first time drawing in pixels.

 

 

Code:

Coding could be said as the most diffecult and least enjoyable part. However I did manege to add my images, sound, and font to my likings.

 

In the code below is how I made my characters clickable so they could answer the questions.

    // Check if a character is clicked and handle interactions
    if (
      mouseX > 50 &&
      mouseX < 50 + hugo.width &&
      mouseY > 135 &&
      mouseY < 135 + hugo.height
    ) {
      // Handle interactions for Hugo character
      // Display questions for Hugo and handle answers
    } else if (
      mouseX > 280 &&
      mouseX < 280 + rene.width &&
      mouseY > 162 &&
      mouseY < 162 + rene.height
    ) {
      // Handle interactions for Rene character
      // Display questions for Rene and handle answers
    } else if (
      mouseX > 0 &&
      mouseX < fuLi.width &&
      mouseY > 0 &&
      mouseY < fuLi.height
    ) {
      // Handle interactions for Fuli character
      // Display questions for Fuli and handle answers
    }
  }
}

This is the class where the questions were saved:

class Questions {
  constructor() {
    this.characterQuestions = {
      hugo: [
        { question: "Is it easy for you to concentrate on your activities?", options: ["Yes", "No", "Maybe/Sometimes"] },
        { question: "Frequently when you're working do you find yourself worrying about other things?", options: ["Yes", "No", "Maybe/Sometimes"] },
        { question: "Does time always seem to be passing slowly?", options: ["Yes", "No", "Maybe/Sometimes"] },
      ],
      rene: [
        { question: "Do you often find yourself at 'loose ends,' not knowing what to do?", options: ["Yes", "No", "Maybe/Sometimes"] },
        { question: "Do you often get trapped in situations where you find yourself doing meaningless things?", options: ["Yes", "No", "Maybe/Sometimes"] },
        { question: "Does having to look at someone's home movies or travel pics bore you tremendously?", options: ["Yes", "No", "Maybe/Sometimes"] },
      ],
      fuli: [
        { question: "Do you find it easy to entertain yourself?", options: ["Yes", "No", "Maybe/Sometimes"] },
        { question: "In any situation, you can usually find something to do or see to keep yourself interested.", options: ["Yes", "No", "Maybe/Sometimes"] },
        { question: "Much of the time you just sit around doing nothing, and you are very good at being patient.", options: ["Yes", "No", "Maybe/Sometimes"] },
      ],
    };
  }

  getQuestion(character, questionIndex) {
    return this.characterQuestions[character][questionIndex];
  }

  calculateResults(answers) {
    const counts = { Yes: 0, No: 0, 'Maybe/Sometimes': 0 };

    answers.forEach(answer => {
      counts[answer]++;
    });

    const maxCount = Math.max(...Object.values(counts));
    const majorityAnswer = Object.keys(counts).find(key => counts[key] === maxCount);

    return majorityAnswer;
  }
}

// Export the Questions class for use in sketch.js
module.exports = Questions;

Possible Improvement:

I wish I could go around the local server issues when it comes to displaying my images.

I want only for certain keys to play the sound not all of them.

I wanted to showcase the results in a different way.

 

Edit: https://editor.p5js.org/mariamalkhoori/sketches/L-i2O01PV