Author: Ghadir Madani

Concept

For my project I decided to use toy cars to light up a traffic light. My idea is that when the red car is on the piece of aluminum foil the red light lights up, when the grey light is on the aluminum the yellow light lights up, and when the black car is on the aluminum foil the green light lights up. This is a way to use code to control a traffic light using an unusual switch.

I used the idea that we did in the class for the digital input but instead of the light turning off the light is turning on, and instead of one switch I have three different switches connected to three different lights.

Code I am Proud of

// Control the red LED based on red button state
    if (redButtonState == HIGH) {
        digitalWrite(5, HIGH);   // Turn on red LED
    } else {
        digitalWrite(5, LOW);    // Turn off red LED
    }

    // Control the blue LED based on blue button state
    if (blueButtonState == HIGH) {
        digitalWrite(3, HIGH);   // Turn on blue LED
    } else {
        digitalWrite(3, LOW);    // Turn off blue LED
    }

    // Control the yellow LED based on yellow button state
    if (yellowButtonState == HIGH) {
        digitalWrite(4, HIGH);   // Turn on yellow LED
    } else {
        digitalWrite(4, LOW);    // Turn off yellow LED
    }
}

This code is used for turning on the light when the two pieces of aluminum foil are touching each other.

Setup

I used TinkerCad to develop my Arduino and the placement of the wires and code it to make sure everything is correct.

Code

GitHub

Demonstration

Emotion & Design: Attractive things work better

In Emotion & Design: Attractive Things Work Better, Donald Norman argues that good design goes beyond just function, attractive objects actually work better because they make us feel good, which improves how we interact with them. He explains this through three levels of emotional response: visceral (our immediate reaction to an object’s appearance), behavioral (how enjoyable and smooth it feels to use), and reflective (the personal meaning or identity we attach to it). Norman suggests that when we find something visually appealing, we’re more likely to approach it with a positive attitude, which makes us more flexible, creative, and forgiving of any minor flaws.

I agree with Norman’s argument because I’ve noticed that when something is well-designed, it feels more intuitive and satisfying to use. For example, using a beautifully designed phone or website often makes me feel more engaged, and I’m less likely to get frustrated over small issues. Norman’s insight that aesthetics can improve functionality resonates with me; it emphasizes that our experience with an object is about more than just practicality. When design speaks to us emotionally, it creates a connection that makes the interaction smoother and more enjoyable, showing that beauty and usability truly go hand in hand.

Her Code Got Humans on the Moon

In Her Code Got Humans on the Moon, the story of Margaret Hamilton’s contributions to the Apollo space missions is explored, showcasing her pioneering work in software engineering at NASA. Hamilton led a team that developed the code for the Apollo Guidance Computer, which ultimately helped land humans on the moon in 1969. Her code was not only innovative but also designed to handle potential errors and prioritize critical tasks, a crucial feature during the Apollo 11 mission when the computer was overloaded with data right before landing. Hamilton’s careful programming allowed the computer to focus on essential functions, averting what could have been a mission-ending disaster.

Hamilton’s story highlights the critical role of women in STEM and the power of resilience and ingenuity in high-stakes situations. Her work laid the foundation for modern software engineering practices, particularly in error detection and real-time computing. I find her story inspiring, as it demonstrates that technological achievements often rely on unseen contributions and relentless dedication. Hamilton’s emphasis on building fail-safe systems feels especially relevant today, reminding us of the value of anticipating and addressing challenges in programming. Her contributions underscore that space exploration is not just about astronauts but also the people who build and support the technology that takes us there.

Sketch:
link to fullscreen: https://editor.p5js.org/GhadirMadani/full/e7SLueayo

Concept:

The concept of my project was to make the user interact with more than one game using only one game. So my idea was to make an arcade game with five arcade machines, and when the user clicks on the screen of one of the arcade machines they will be able to play the game linked to that screen, and then they can go back to the arcade room to play the other games. By creating this game, I incorporated a lot of what we have studied in class and I made it more user-friendly and interactive.

How the Project Works:

When you enter the game this is the first screen that is shown, if you follow the instructions correctly it will link you to the arcade room code.

This is the arcade room. You can go back to the instructions page by clicking the “Instructions” button and it will link you back to the instructions code. Or you can play on the screen of one of the arcade machines (as mentioned in the instructions page) to play the game linked to it.

function mousePressed() {
  
    // Check clicks only when in the arcade room
    // First arcade machine (redirects to skeleton.html)
    if (mouseX >= 60 && mouseX <= 160 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "skeleton.html";
    }

    // Second arcade machine (redirects to squares.html)
    if (mouseX >= 190 && mouseX <= 290 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "squares.html";
    }

    // Third arcade machine (redirects to error.html)
    if (mouseX >= 320 && mouseX <= 420 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "error.html";
    }

    // Fourth arcade machine (redirects to jukebox.html)
    if (mouseX >= 450 && mouseX <= 550 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "jukebox.html";
    }

    // Fifth arcade machine (redirects to jackpot.html)
    if (mouseX >= 580 && mouseX <= 680 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "jackpot.html";
    }
  
  // Check if the "Instruction" button is clicked
  if (mouseX >= 20 && mouseX <= 120 && mouseY >= height - 60 && mouseY <= height - 10) {
    // Redirect to the arcade home page 
    window.location.href = "index.html"; 
  }
  }

 

The code I am mostly proud of is linking each screen with a different game, for example the first one is linked to the skeleton game, the second to the squares and so on.

When you click on the first screen you are directed to the skeleton game. You will have an instruction page before playing the game and if you follow the instructions carefully you will be able to play the game. The way this game works is you have to move the skeleton (spritesheet) to collect the bones, when you reach 10 points you win the game and you can press the “R” key to restart the game. But you can also lose the game if you touch the borders of the screen and you can also restart the game by pressing the “R” key. If you want to go back to the arcade room you have to press the “Home” button.

The second game (the second arcade machine) is a previous assignment that I added to this project. You will have to press on the mouse to let the squares change and press it again to change the speed of the squares. What I added to this project was the instruction page, where if you follow the instructions you will be able to play the game. If you want to restart the game you will have to press the spacebar twice, one to stop the game and one to reset the squares and then you will be able to play the game again. If you want to go back to the arcade room you have to press on the “Home” button.

For my third game I created non functional game, and this is because whenever I go to an arcade room most of the machines are broken. You can go back to the arcade room by pressing the “Home” button.

For my fourth game I created a jukebox, this was to implement music to my game. When you click on one of the “Play” buttons the corresponding music will be played and if you press on the stop button the music will stop playing. You can control the volume levels using the “Volume Control” slider. You can go back to the arcade room by pressing the “Home” button.

For my last game I created a Jackpot where you have to press your mouse so the wheel spins. You can then go back to the arcade room by pressing the “Home” button.

Areas of Improvement and Problems:

Since my project had many javascript codes and the games were dependent on the size of the screen that was chosen (width=800 and height=400), it was really difficult for me to code all the different javascripts to be in full size and responsive to the size of the screen. So as an improvement for my future project I want to implement the full screen option and make my project responsive to the size of the screen being used.

Concept:

For my midterm I got the idea to recreate some of the arcade games, but the only difference would be that in this version we can easily access our favorite games on our devices. For my initial idea I decided to create 6 games and it would look somewhat like the image below.

This would be the starting screen. The way I want this to work is that if you press on one of the screens of the arcade machine, or if you press on the air hockey table the game corresponding with what you pressed would appear.

For the first game I decided to use a spritesheet of a skeleton and create a game from it. For my second game I decided to create a jukebox, where I will add different music and the player could change the song by pressing the arrows. For the third game I decided to make the machine not functional and that is because whenever I go to the arcade most of the machines are not working. For my fourth game I decided to add the moving squares a previous assignment of mine. And for my fifth game I decided to add a Jackpot slot machine. For my air hockey table I was thinking of not creating a two player game, but instead a one player, where the player just places the air hockey puck on the table and the puck moves around.

Code Progress:

The progress I have so far is the layout of my arcade room. I also started working on some of the games.

This is the skeleton game that I started working with. You have to press the spacebar to start the game, use the up, down, right, and left keys to move the skeleton and collect the bones, and when the points reach to 10 you have to press the “R” key to restart the game. What I want to add to this game is when the skeleton touches the sides of the screen you lose the game.

This is the error screen that I created for the broken machine. I used pixels to create this effect. What I want to add to this game is a text.

Challenges:

The challenges that I am facing with this project is how I will add all these games into one code and one game. And how will I create the interactivity if you press the screen of a game the selected game pops up.

 

 

 

 

Something that drives me crazy is the confusion around door handles, especially when it’s unclear whether to push, pull, or if the door is automatic. Many doors have handles that imply pulling, but they actually require pushing, or they’re automatic but give no indication of it. This creates unnecessary frustration. Norman’s principles can easily improve this. First, using appropriate affordances would help—push bars for pushing and handles for pulling. This would visually communicate the correct action, reducing hesitation. Additionally, signifiers like clear signs or arrows could guide users, especially in high-traffic areas like stores or airports.

For automatic doors, better feedback could be useful. Subtle lights or sounds could indicate when a sensor has been triggered, letting users know the door will open. For example, in C2, the doors don’t always respond to you, and sometimes you are required to pull the doors so they open. This unpredictability creates unnecessary confusion and frustration.

In this case, enhancing the visibility of door functions and matching the conceptual model to user expectations (handles for pulling, plates for pushing) would make navigating doors far less frustrating. By aligning with Norman’s principles, door design could become far more intuitive and user-friendly.

Concept:

For this project I decided to connect it to one of my favorite movies, Harry Potter. One of the best scenes in Harry Potter is when they have just arrived to Hogwarts and the are sorted into four houses (Gryffindor, Slytherin, Ravenclaw, and Hufflepuff) by wearing the sorting hat.

So I decided to use the generative text to sort all our names into these four houses randomly.

Highlighted Code:

function mousePressed() {
  if (csvLoaded && names.length > 0 && houses.length > 0) {
    // Once the mouse is pressed and the CSV is loaded, show the castle
    showCastle = true;
    
    // Pick a random name and a random house
    let name = names[int(random(names.length))];
    let house = houses[int(random(houses.length))];
    
    // Random House picker message 
    message = name + " is in " + house + " house";
  } 
   
}

The code that I am mostly proud of is the randomized picker. So when you press the mouse, the castle and stars appear and the random name picker starts, and when you press the mouse again another name appears.

Sketch:

Future Improvements:

For the future, I want to try to let the name be picked once and a name does not repeat, for example if it chose my name it should no choose my name again.

 

Concept:

For this project I did my research more about generative artwork and I saw this picture from the following website: https://panopticon.am/generative-art/ Inspiration for my project

I really got inspired by this artwork, so I decided to create my project based on this piece. My idea was to loop squares on a black screen with random colors and when the mouse is clicked the squares start moving and if the mouse is clicked again the squares move faster, there are three different speeds and every time you click the speed changes from 1 to 3 to 10 to 1 and the cycle repeats.

Highlighted code:

// MovingSquare class
class MovingSquare {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = 0; // Initial horizontal speed
    this.speedY = 0; // Initial vertical speed
  }
  
  // Method to set the speed of the square
  setSpeed(speedX, speedY) {
    this.speedX = speedX;
    this.speedY = speedY;
  }
  
  // Move the square based on its current speed
  move() {
    // Move the square
    this.x += this.speedX;
    this.y += this.speedY;
    
    // Bounce back when hitting the canvas edges
    if (this.x <= 0 || this.x + this.size >= width) {
      this.speedX *= -1; 
    }
    
    if (this.y <= 0 || this.y + this.size >= height) {
      this.speedY *= -1; 
    }
  }

The part of code I am particularly proud of is the MovingSquare class. I am proud of this code because I was having difficulties while I was doing the in class exercise that was related to the classes. It was still quite difficult to use the classes in this project but with trial and error I did it.

Future Improvements:

For the future I wish I could bring the animation back to its static position where all the squares were aligned in a loop function after the mouse is pressed for the fourth time, I tried to do it in this project but it was quite hard to figure it out.

When I changed my major from Biology to Interactive Media, I didn’t fully understand what interactivity really meant. Reading Chapter 3 of The Art of Interactive Design by Chris Crawford helped me make a clear distinction between interactivity and related concepts like reaction, participation, and design. Crawford defines true interactivity as a cyclical process where two actors alternately give input, process it, and provide output, much like a conversation.

Before reading, I assumed that systems allowing user participation, such as clicking buttons, were interactive. However, Crawford’s explanation made me realize that true interactivity requires meaningful feedback. Unlike simple reactions, which are one-way responses, interactive systems respond to the user’s input in ways that adapt and engage, creating a dynamic loop.

This new understanding has changed how I approach design, as I now realize the importance of creating systems that actively respond to user input in meaningful ways. Crawford’s insights will guide me in future projects, pushing me to design experiences that are truly interactive, with a focus on creating dynamic, engaging feedback loops between the user and the system.

In Casey Reas’ presentation, he explores the tension between order and chaos through the lens of visual art, particularly how software and algorithms have allowed for a deeper engagement with these concepts. His work demonstrates how randomness can coexist with controlled systems, creating art that is both calculated and unpredictable, offering new perspectives on the artistic process. What stood out to me was how his work evolved from simple systems to complex installations, with the unpredictability of the process being the common thread between all his artworks. His reliance on algorithms and chance, combined with borders, reflects a deep connection between control (borders) and randomness(algorithms and chance), making each artwork unique yet part of an artistic collection.

But the real question on my mind is whether his work is considered art. Even though his work stood out to me and it was interesting to see what pieces were created from software, algorithm, randomness and chance, I’m still wondering if this is actually considered a piece of art. I’ve been thinking about this because my twin, who is majoring in visual art, often questions what is considered art. In my opinion, not everything can be considered art; true art is what has been made with genuine feelings, created by hand, and has a meaning or story behind it. Some might argue that it is considered a piece of art because this person programmed it to do this piece of work, but I still argue that even though the person gave the commands the person still didn’t know how the artwork will end up looking like and there isn’t any story or meaning behind this piece of work. So, the question remains: is his work considered art?