Week 11 — Reading Response — Design Meets Disability

What stood out to me most in this reading is how deeply innovation is tied to the desire to solve a problem. I didn’t read this text as “design theory”  I read it as a reminder of something I’ve always believed: when something doesn’t work for the human body, we don’t stop; we fix it. Disability becomes a spark that pushes design forward, not a limitation that holds it back. This idea felt almost obvious once I saw it in writing. Synthetic legs exist because someone needed to walk. Hearing aids exist because someone needed to hear. Braces exist because someone needed their teeth to function better. When life presents a barrier, our instinct as humans is to invent ways around it. I’ve always been a problem solver by nature, so this perspective resonated with me on a personal level it aligns with the way I already think.

Another part I connected with was the discussion about discretion vs. expression. I honestly never understood why disability-related devices were expected to be “hidden,” made to look like they don’t exist. Glasses used to be seen this way too, and now they’re almost a fashion statement. I love the idea that assistive technologies shouldn’t be things people are ashamed of. If an object was created to make someone’s life easier, why wouldn’t that be something to show proudly? I hope more devices follow the path that glasses took — becoming normal, stylish, and expressive. There’s something beautiful about the idea of a prosthetic leg being carved out of wood like art, or a hearing aid designed like jewelry. These devices are part of someone’s identity, and identity shouldn’t be minimized.

What the text made me think about is how much of our world is actually built on disability innovation without people noticing. A lot of mainstream design only exists because someone once had a challenge that needed solving. Things we take for granted today ergonomic chairs, Velcro, touchscreens, even certain furniture techniques came from disability-driven constraints. I like how the book almost flips the conversation: instead of treating disability as something society has to “cope” with, it becomes a source of creativity and new possibilities.

Week 11 – Final Project Concept

UAE History Interactive

I want to create an interactive piece that shows the transformation of the UAE the same way my grandpa used to describe it to me. When he talked about his childhood, he always used to say, “Everything was sand… everything was quiet,” and it honestly shocked me how different life was back then. We grow up surrounded by skyscrapers, malls, lights, and busy streets, and sometimes we forget that underneath all of this was once nothing but desert, small fishing villages, and long stretches of empty land. I want this project to make people feel that transition  not just see it.

I’m going to create a set of images using generative AI: first, an empty desert with soft, muted colors, representing the UAE before development. Then, a second stage with small hints of growth, old houses, dhow boats, maybe the beginnings of trade and community. And finally, a fully developed UAE today: bright, modern, busy, full of life. These images will live inside my P5 sketch, and as the user interacts with the physical object, the scene will change smoothly from past to present. It’s almost like time is responding to their touch.

The interaction will come from the Arduino. I want to use one simple input — probably a pressure sensor or something that can “feel” how much the user is pressing. The Arduino will read how soft or strong the touch is, like it’s sensing the user’s curiosity. Light pressure will show the early UAE, the untouched sand dunes. A little more pressure will reveal the beginning of development. And a stronger press will bring the scene into the modern UAE we know now. It’s not about force it’s about guiding the story. The sensor becomes like a storyteller’s tool, the thing that decides which chapter you’re seeing.

I also want the Arduino to do something small in the real world, so it feels alive on both sides. Maybe a soft LED that glows brighter as the UAE “grows,” or a tiny sound from a buzzer that plays a subtle tone when the country reaches the modern stage almost like the present humming with life. But nothing loud, nothing dramatic, just small hints of the past and present waking up.

This whole idea is about honoring heritage and culture through interaction. When my grandpa tells stories, I always feel this warm, emotional contrast between the silence of the old desert and the energy of the city today. I want my project to recreate that feeling the quiet beginning, the slow growth, and the incredible transformation. Not as a history lesson, but as an emotional journey. A way to let people travel through the UAE’s story just by placing their hand on a simple sensor, turning their touch into a timeline. It’s simple, but I want it to feel meaningful.

Week 11 – Serial Communication Exercises

 

Exercise 1

Reflection:

I built a simple circuit using the Arduino and a 10kΩ potentiometer to control an on-screen ellipse in p5.js. I connected the potentiometer’s outer legs to 5V and GND and the middle leg to the analog pin A0, allowing it to act as a variable voltage divider. After uploading the Arduino code and checking the serial monitor, I could see how turning the knob changed the analog readings from 0 to 1023. This helped me understand how analog sensors translate physical movement into numerical data that can be visualized digitally. It was satisfying to see the system work after troubleshooting my wiring and realizing how the order of connections affects the readings.

Codes:

p5js

// === Arduino + p5.js WebSerial (directional movement, fixed) ===
// Pot controls direction/speed by how its value changes. p5 does NOT control Arduino.

let port;
let reader;
let connectButton;
let isConnected = false;

let latestData = null; // last parsed int from serial (0..1023)
let prevData   = null; // previous sample to compute delta
let lineBuffer = '';   // accumulate serial chunks until '\n'

let posX = 0;          // ellipse position
let speed = 0;         // horizontal velocity

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(240);
  textFont('monospace');

  connectButton = createButton('Connect to Arduino');
  connectButton.position(20, 20);
  connectButton.mousePressed(connectToSerial);

  // start centered; we'll keep it centered until first data arrives
  posX = width / 2;
}

async function connectToSerial() {
  try {
    // Request and open port
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    isConnected = true;
    console.log(' Port opened');

    // Create a text decoder stream and reader for clean line-by-line reads
    const textDecoder = new TextDecoderStream();
    const readableClosed = port.readable.pipeTo(textDecoder.writable);
    reader = textDecoder.readable.getReader();

    // Kick off read loop
    readSerialLines();
  } catch (err) {
    console.error(' Connection failed:', err);
    isConnected = false;
  }
}

async function readSerialLines() {
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) break; // reader released
      if (!value) continue;

      // Accumulate and split by newline
      lineBuffer += value;
      let lines = lineBuffer.split(/\r?\n/);
      lineBuffer = lines.pop(); // save incomplete tail

      for (let line of lines) {
        line = line.trim();
        if (!line) continue;
        const v = parseInt(line, 10);
        if (!Number.isNaN(v)) {
          // Clamp to expected 10-bit range
          latestData = Math.min(Math.max(v, 0), 1023);
          // Initialize prevData on first valid sample
          if (prevData === null) prevData = latestData;
        }
      }
    }
  } catch (err) {
    console.error(' Read error:', err);
  } finally {
    try { reader && reader.releaseLock(); } catch {}
  }
}

function draw() {
  background(240);

  if (!isConnected) {
    fill(200, 0, 0);
    noStroke();
    textAlign(CENTER, CENTER);
    textSize(20);
    text("Click 'Connect to Arduino' to begin", width / 2, height / 2);
    return;
  }

  // If we haven't received any valid data yet, show waiting status
  if (latestData === null || prevData === null) {
    fill(0);
    textSize(16);
    textAlign(LEFT, TOP);
    text('Waiting for data...', 20, 60);
    // Keep ellipse centered until first data arrives
  } else {
    // Change in pot reading determines direction and speed bump
    const delta = latestData - prevData;

    // Deadband to ignore small noise
    const deadband = 4;
    if (delta > deadband) {
      speed = constrain(speed + 0.6, -12, 12); // turn right -> move right
    } else if (delta < -deadband) {
      speed = constrain(speed - 0.6, -12, 12); // turn left -> move left
    } else {
      // friction when knob still
      speed *= 0.90;
    }

    // Integrate position and clamp
    posX += speed;
    posX = constrain(posX, 0, width);

    // Update prev for next frame
    prevData = latestData;
  }

  // Draw ellipse at vertical center
  noStroke();
  fill(50, 100, 255);
  ellipse(posX, height / 2, 80, 80);

  // HUD
  fill(0);
  textSize(14);
  textAlign(LEFT, TOP);
  const shown = latestData === null ? '—' : latestData;
  text(⁠ Sensor: ${shown} ⁠, 20, 60);
  text(⁠ Speed:  ${nf(speed, 1, 2)} ⁠, 20, 80);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Keep position on-screen if you resize smaller
  posX = constrain(posX, 0, width);
}

Arduino IDE

const int potPin = A0;

void setup() {
  Serial.begin(9600);  
}

void loop() {
  int val = analogRead(potPin);   // 0..1023
  Serial.println(val);            
  delay(10);                     
}

Schematic + Board

Exersize 2

Reflection

Reflection on the Schematic and Circuit

For this project, I created both the schematic and the circuit, and I kept them very simple. My setup only included one LED and one resistor connected to the Arduino and grounded. The main purpose of the assignment was to use serial communication with p5.js to control the brightness of the LED, so I focused more on the coding rather than making the hardware complex. Before starting the p5 part, I tested my circuit using a simple Arduino code just to make sure that the LED was lighting up correctly and everything was connected properly. Once I confirmed that it worked, I added the schematic and moved on to the serial communication part. The schematic itself was very basic something I’ve done before so it wasn’t hard to figure out. I liked that I could keep the circuit minimal but still meet the goal of the exercise, which was to control the LED’s brightness through p5. It showed me how even a simple circuit can become interactive and meaningful when combined with code.

Reflection on the Code

The coding part was definitely the hardest and most time-consuming part of this project. I’ve never connected p5.js and Arduino together before, so figuring out how to make them communicate took a lot of trial and error. At first, I kept trying to make it work on Safari without realizing that the serial connection doesn’t actually work there, it only works on Google Chrome. So, I kept rewriting and rechecking my code, thinking there was something wrong with it, even though the logic itself was fine. My professor had already shown us the structure for serial communication, so I kept following it, creating and recreating the same code over and over again, but it just wouldn’t connect.

It got really frustrating at one point because I had everything wired correctly, and my code looked right, but the Arduino and p5 still weren’t talking to each other. I spent a lot of time trying to figure out what was wrong. Once I finally switched to the right browser and saw the serial connection actually working, it was such a relief. The LED started responding, and it felt like everything finally came together. After so many attempts, seeing both the Arduino and p5.js working together perfectly was honestly so rewarding. I was really proud of how it turned out in the end it looked simple but worked exactly how I wanted it to. All that frustration was worth it because the final design turned out really good, and it felt amazing to watch it finally come to life.

Codes

P5js embedded

Arduino IDE

// ===== Arduino: LED brightness  =====

const int ledPin = 10;  // LED connected to pin 10

void setup() {
  Serial.begin(9600);   // must match p5.js baud rate
  pinMode(ledPin, OUTPUT);
}

void loop() {
  if (Serial.available() > 0) {
    int brightness = Serial.read();      // read 0–255
    brightness = constrain(brightness, 0, 255);
    analogWrite(ledPin, brightness);     // control LED brightness
  }
}

Circuit + Schematic

Exersize 3

codes

p5

let velocity;
let gravity;
let position;
let acceleration;
let drag = 0.99;
let mass = 50;

let brightnessValue = 0; // Potentiometer value from Arduino (0–5)
let ballDropped = false;
let ledOn = false;

function setup() {
  createCanvas(640, 360);
  noFill();
  textSize(18);

  position = createVector(width / 2, 0);
  velocity = createVector(0, 0);
  acceleration = createVector(0, 0);
  gravity = createVector(0, 0.5 * mass);
}

function draw() {
  background(255);

  fill(0);
  if (!ballDropped) {
    text("Press D to drop the ball", 20, 30);
    text("Press Space Bar to select Serial Port", 20, 50);
    return;
  }

  if (serialActive) {
    text("Connected", 20, 30);
    text(⁠ Potentiometer: ${brightnessValue} ⁠, 20, 50);
  } else {
    text("Serial Port Not Connected", 20, 30);
  }

  // Gravity only (no wind)
  applyForce(gravity);

  // Update ball
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);

  // Draw ball
  ellipse(position.x, position.y, mass, mass);

  // Bounce
  if (position.y >= height - mass / 2) {
    velocity.y *= -0.9;
    position.y = height - mass / 2;

    // Tell Arduino: turn LED on briefly
    if (serialActive && !ledOn) {
      writeSerial("1,0\n");
      ledOn = true;
    }
  } else if (ledOn) {
    // Tell Arduino: turn LED off
    writeSerial("0,0\n");
    ledOn = false;
  }
}

function applyForce(force) {
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

// Serial setup and drop ball
function keyPressed() {
  if (key == " ") setUpSerial();
  if (key == "D" || key == "d") dropBall();
}

function dropBall() {
  position.set(width / 2, 0);
  velocity.set(0, 0);
  mass = 50;
  gravity = createVector(0, 0.5 * mass);
  ballDropped = true;
}

// Read data from Arduino
function readSerial(data) {
  if (data != null) {
    let fromArduino = split(trim(data), ",");
    if (fromArduino.length === 1) {
      brightnessValue = int(fromArduino[0]); // Potentiometer value
    }
  }
}

Arduino IDE

int potPin = A5;   // Potentiometer
int ledPin = 3;    // LED on PWM pin

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);

  // Blink LED to confirm setup
  analogWrite(ledPin, 255);
  delay(200);
  analogWrite(ledPin, 0);
}

void loop() {
  // Read potentiometer (0–1023)
  int raw = analogRead(potPin);

  // Map to PWM range (0–255)
  int brightness = map(raw, 0, 1023, 0, 255);

  // Continuously send brightness value to p5 if you need it
  Serial.println(brightness);

  // Check for serial commands from p5
  if (Serial.available()) {
    String data = Serial.readStringUntil('\n');

    // When ball hits ground → p5 sends "1,0"
    if (data == "1,0") {
      analogWrite(ledPin, brightness);  // flash with pot brightness
      delay(100);
      analogWrite(ledPin, 0);           // turn off after flash
    }
  }

  delay(30); // loop stability
}

Schematic + Circuit

IMG_9469

Week 10 —Piano keys

Reflection on My Schematic

For this project, I decided to use three pushbuttons and a potentiometer because I wanted to keep the design simple but still interactive. My idea was to make the buttons act like keys—each one triggering a different tone on the piezo speaker. I also included the potentiometer to control the volume of the sound, which made the circuit more dynamic and gave me a sense of how analog and digital components can work together.

Designing the schematic was a fun and challenging part of the process. I had to carefully think about where each component should go and how to connect everything so it would be electrically correct. The piezo speaker was, of course, essential for producing sound it’s what brings the “instrument” to life.

What I enjoyed most was the problem-solving aspect figuring out how all the parts would communicate through the Arduino. It required patience and logical thinking, but once I understood the flow of current and how each input affects the output, it all made sense. Seeing the schematic come together gave me a real sense of accomplishment because it represented both my planning and my creativity.

IMG_0620

Reflection on the Arduino Build

The Arduino part of this project was honestly very easy and smooth, especially because I had already planned everything out in my schematic. All I had to do was follow my own plan carefully and make sure that every wire and component was connected in the correct place.

One of the first things I did was connect the GND pin on the Arduino to the negative railon the breadboard. That allowed me to connect all my components that needed ground like the potentiometer, buttons, and piezo speaker to the same shared ground.

I had to be precise and double-check my connections, especially where the potentiometer linked to the speaker and where each button was wired. To make the process easier and more organized, I actually color-coded my wires. For example, I used red wires for all the connections that went to ground. That made it much simpler to trace the circuit visually and fix small mistakes when I needed to adjust something later.

Overall, the Arduino part went very smoothly because I had a solid plan and followed it carefully. Seeing everything come together and actually work just like I designed it in the schematic felt really rewarding.

//set the pins for the button and buzzer
int firstKeyPin = 2;
int secondKeyPin = 3;
int thirdKeyPin = 4;

int buzzerPin = 10;


void setup() {
  //set the button pins as inputs
  pinMode(firstKeyPin, INPUT_PULLUP);
  pinMode(secondKeyPin, INPUT_PULLUP);
  pinMode(thirdKeyPin, INPUT_PULLUP);

  //set the buzzer pin as an output
  pinMode(buzzerPin, OUTPUT);
}

void loop() {
  
  if(digitalRead(firstKeyPin) == LOW){        //if the first key is pressed
    tone(buzzerPin, 262);                     //play the frequency for c
  }
  else if(digitalRead(secondKeyPin) == LOW){  //if the second key is pressed
    tone(buzzerPin, 330);                     //play the frequency for e
  }
  else if(digitalRead(thirdKeyPin) == LOW){   //if the third key is pressed
    tone(buzzerPin, 392);                     //play the frequency for g
  }
  else{
    noTone(buzzerPin);                        //if no key is pressed turn the buzzer off
  }
}

Reflection on the Coding

The coding part of this project was very straightforward. I already had my circuit ready, so I just needed to make sure that everything in my code matched the pins I used in my schematic and breadboard. I started by defining all of my pins clearly one for each of the three buttons and one for the piezo speaker.

I wanted each button to act as a different key, so I chose three different frequencies (in hertz) to create distinct sounds. I adjusted the hertz values to my liking until each key sounded right and had its own tone. This made the instrument feel more realistic and musical.

I also made sure to define all the variables and constants I needed in my code so that everything was organized and easy to change later if I wanted to experiment with new sounds or pin connections. Overall, the coding was simple but satisfying because it brought the entire project to lifethe schematic, the Arduino wiring, and the code all worked together perfectly.

Week 9 — Reading Response

Reflection on “Physical Computing’s Greatest Hits (and Misses)”

What really stood out to me in this reading was how the author said that even if an idea has been done before, you can still make it your own. I really liked that because it’s true that’s what innovation is about. You don’t have to come up with something completely out of nowhere; you can take inspiration from something that already exists and build on it in a new, creative way. I think that’s how creativity actually grows. You start with something familiar, but through your own thinking and style, it becomes something unique. This really reminded me of when I used to take AP Art. At first, I had no idea what I wanted to do for my project. Then I saw one of my sister’s artworks that explored the theme of identity, and it completely inspired me. I didn’t copy her work, but that idea sparked something in me. From that one starting point, I was able to create five very different artworks that still connected to the same concept but were completely my own. That’s why I loved how the author talked about using old ideas as a base because it’s not about repeating; it’s about reimagining.

I also liked what he said about human interaction versus machine automation. Physical computing isn’t just about building a machine that runs on its own; it’s about creating something that responds to people that comes to life when you interact with it. It makes technology feel more alive, more connected to us as humans. It’s the same reason interactive things have always felt more exciting to me. Even when I was a kid, I loved books that had textures you could feel or pop-up pages that moved when you turned them. They were so much more fun and engaging than flat, ordinary books. It’s the same in learning, too when a class is just lecture-based, it’s hard to stay focused. But when you get to dosomething, to interact with it, you remember it better. It becomes real. So, I think that’s what makes physical computing so special  it brings art, design, and technology together in a way that feels alive. It reminds us that interaction, whether through touch, movement, or emotion, is what truly connects us to what we create.

Reflection On  “Making Interactive Art: Set the Stage, Then Shut Up and Listen”

I really liked how this reading talks about giving people the space to experience and interpret art on their own. It makes the artwork feel alive because the audience becomes part of it they create their own meaning instead of just being told what to think. That’s what makes interactive art special; it’s an experience, not just something to look at. It also reminds me of modern art, where there isn’t always one fixed meaning. Everyone can see it differently, and that’s what keeps it interesting. When you explain everything, it becomes dull and predictable, but when you leave room for imagination, it feels more human and engaging.

I’ve been taking this in my first-year writing seminar, where we’ve been learning about how different people view art and meaning. Anish Kapoor, who is a really famous and worldwide-known artist, once said, “The work itself has a complete circle of meaning and counterpoint. And without your involvement as a viewer, there is no story.” I think that perfectly connects to what this reading talks about the idea that art isn’t something that should explain itself to you, but something you experience and find meaning in yourself. Kapoor’s artworks don’t have one fixed meaning; instead, they give space for the viewer to create it. That’s what makes his art so powerful and interactive. Homi Bhabha also says, “It is the in-between space that carries the burden of the meaning of culture,” which I think means that real meaning is found in that space between the artwork and the person experiencing it. So the beauty of Kapoor’s work and interactive art in general is that it doesn’t just lack meaning; it creates room for meaning.

Week 9 — Analog and Digital Sensors

 

The Planning Process

When I first started working on my Arduino project, I was really excited to just begin building the circuit. I started connecting the wires and components right away without any plan, but everything quickly got messy. The setup didn’t look neat, and nothing was working properly.

That’s when I decided to stop and make a clear plan. I drew a circuit sketch first, showing where every wire, resistor, LED, and sensor would go. Having that plan made a huge difference it helped me organize everything and made the setup much cleaner and easier to follow.

I realized that starting with a plan is the foundation of any successful Arduino project. Without it, things can get confusing fast. But when you have a sketch or diagram to look back at while you’re working, you always know what to do next. This experience really taught me that planning first saves a lot of time and makes the whole process smoother and more enjoyable.

Arduino Setup

This setup was a little complicated for me because it was my first time doing something more advanced on the Arduino that involved several wires and components. I used about seven different wires, and at first, it was really confusing to figure out where everything should go.

At the beginning, when I tried building the circuit without any plan, it turned into a big mess and nothing worked properly. But after creating a proper plan and sketch, everything became so much clearer. I started connecting each part slowly and carefully, double checking as I went along.

Sometimes I made small mistakes, like connecting the long leg of the LED to the resistor instead of the correct side, but having the plan helped me find and fix them easily. I realized how important it is to work precisely and patiently, making sure each wire is placed in the right spot before moving on.

Overall, the planning process made the project much easier and more enjoyable. I also liked that my circuit included two different sensors a button (digital sensor) and an LDR (Light Dependent Resistor), which is an analog sensor with a squiggly pattern on top. It was really cool to see how both types of sensors could work together in one project.

Coding Process

// Pin setup 
const int buttonPin = 2;   // Button connected to D2 
const int ledDigital = 8;  // Digital LED (on/off)
const int ledAnalog = 9;   // Analog LED (brightness control)
const int ldrPin = A0;     // LDR sensor connected to A0

void setup() {
  pinMode(buttonPin, INPUT_PULLUP); 
  pinMode(ledDigital, OUTPUT);
  pinMode(ledAnalog, OUTPUT);
}

void loop() {
  // Digital LED controlled by button 
  bool pressed = (digitalRead(buttonPin) == LOW); // LOW = pressed
  digitalWrite(ledDigital, pressed ? HIGH : LOW);

  // Analog LED controlled by LDR light level 
  int lightValue = analogRead(ldrPin);        // Reads LDR 
  int brightness = map(lightValue, 0, 1023, 0, 255); 
  analogWrite(ledAnalog, brightness);         // Set LED brightness

  delay(10); 
}

I really liked the simplicity of the code in this project. The Arduino part allowed me to be more creative with how I connected the components, but the coding felt more like solving a puzzle. I just had to match everything correctly each sensor, LED, and button had its own number, and I connected them in the code like putting puzzle pieces together.

What I enjoyed most was how logical the coding process was. Once I understood how each part worked, everything made sense and came together smoothly. The code itself was clear and easy to follow, and the only thing I really had to play around with was the numbers to get the behavior I wanted. Overall, it was a really satisfying and smooth experience seeing the hardware and code work perfectly together.

Blink Test

Before starting my main circuit, I first tried the Blink Test, which is the simplest Arduino program that makes an LED turn on and off. It helped me confirm that my Arduino board was connected properly and that the code could upload successfully. Even though it’s a very basic test, it gave me confidence that everything was working before I started adding more components and sensors. It also helped me understand how timing and digital outputs work in Arduino.

Week 8 — Creative switch

Project Reflection

For this project, the goal was to create a creative switch using Arduino that could be activated with a body part other than the hand. At first, I wanted to make something you could blow on, kind of like a tiny football field made out of cardboard where you blow a ball to complete the circuit. But I quickly realized the ball I was using was too light, so it didn’t push the wires together properly.

After trying a few different ideas, I switched to a bigger marble. But since it was heavier, blowing on it didn’t work either. That’s when I got the idea to make it something more fun and active, something you kick instead of blow. It turned into more of a little game than just a switch, which made it a lot more exciting to work on.

In the final version, the goal is to kick the ball into a hole. When the ball lands perfectly in the hole, it completes the circuit and makes the bulbs light up. If you miss, the lights stay off. I really liked this idea because it feels like a reward, the light turning on means you “won.” It doesn’t happen automatically; you have to earn it.

What I enjoyed most about this project is how it started as a simple idea and ended up becoming something playful and interactive. It reminded me that creativity often comes from solving problems, sometimes when something doesn’t work, it actually pushes you toward a better idea. I also liked how it connected movement and technology. Using my foot instead of my hand made it feel more like a real-world challenge or game.

Design

The design of my project is a cardboard slope that works kind of like a mini golf game. At the end of the slope, there’s a hole made out of cardboard that acts as the main target. I covered the inside of the hole with copper tape because it’s a good conductor of electricity. Underneath, I made two small holes where I inserted the wires. These wires touch each other only when the ball goes into the hole, completing the circuit and lighting up the bulb. I really like how simple but effective it is when you kick the ball just right, the light turns on as a little celebration of success.

 

Week 8 — Creative Reading Response

I really liked what Don Norman said in “Emotion and Design: Attractive Things Work Better.” The part about how positive emotions make things work better really stuck with me, because it’s something I’ve actually noticed ever since I was a child. It’s something I’ve always believed that when something looks good, we automatically treat it differently. It reminds me of the saying “Don’t judge a book by its cover,” but honestly, that’s what all of us do. The first thing we do is see. Sight is our first sense, before we touch something, taste it, or use it we see it. And that first impression already shapes how we feel.

I’ve noticed it especially with food. When a dish looks good, people automatically expect it to taste good too. That’s confirmation bias, when you already believe something will be good, your brain looks for ways to confirm it. So even if the taste is just okay, you feel like it’s amazing because it looked amazing first. But when food looks unappetizing, people get turned off before even trying it. It’s like it doesn’t even get a fair chance. The same thing happens with Apple products. Apple isn’t necessarily the most advanced or customizable compared to other technology, but people love it because it’s so visually clean and simple. The design itself feels satisfying and premium, and it makes people want to use it more. So I think Norman is completely right attractive things really do work better, because they make us feel better, and that feeling affects everything we do afterward.

And I really liked what Margaret Hamilton did too. She honestly inspires me so much. I love how she made something completely new and powerful during a time when women in STEM faced so many challenges. She didn’t let that stop her, she pushed through and proved that engineering and programming were just as creative and valuable as any other field it is the foundation of almost every field and it is our future. She made software engineering something real and respected, even when people didn’t think of it that way. What really stood out to me was how careful and disciplined she was with her work. It made me realize that real innovation isn’t just about having ideas only, it’s about discipline, care, and anticipating mistakes before they happen. It showed me how much progress depends on the people we don’t always see, the quiet thinkers, programmers, and engineers behind the scenes who carry so much responsibility. One small mistake can ruin everything, so being precise, testing carefully, and paying attention to detail are so important. Her story really reminded me how much patience, focus, and love go into the things that shape our world, even when most people never notice who’s behind them.

Week 7 — Final Game (Midterm Project)

https://editor.p5js.org/hajar.alk.2007/sketches/

Concept Recap

Now that I’ve finished my game, I just want to restate my concept briefly (which I explained in detail in my Week 6 submission). The original idea started as a candy game, but I decided to make it more traditional and personal by turning it into a Gahwa Rush theme. The inspiration came from my grandpa and my little brother how in our culture, gahwa is always seen as fine for kids while soft drinks aren’t. I found that really funny, so I made the goal of the game to catch the gahwa and avoid the Pepsi. It’s a simple idea, but it means a lot to me because it connects to my family and culture, and I’m really happy with how it turned out.

Week 7 Progress

This week, I was mainly working on the final details to perfect the game. Most of it was already done since last week the whole structure and idea were already there. What I focused on this week was adding sounds to make the game feel more alive and interactive. I also let my friend play it, and I noticed that it was really hard for her, even though for me it felt easy. That’s when I realized I had been increasing the difficulty too much without noticing because I kept testing and improving my own gameplay, so I was getting better while others weren’t. To fix that, I decided to lower the difficulty level to make the game more beginner-friendly and enjoyable for everyone.

I also found a small bug where the player would lose even when the character didn’t actually touch the Pepsi. To fix this, I adjusted the collision detection by making smaller rectangle frames around the Pepsi so that it only counts as a collision when it really touches the character.

Sources/Credit

https://youtu.be/enLvg0VTsAo?si=mPNyWkxCoWeOn3CG

https://youtu.be/bMYQbU01u04?si=KDpfq1w9eC_Bifax

https://youtu.be/Z57hx4ey5RY?si=ruAPhn2WmEeyHKXG

https://youtu.be/MuOcdYjF2F4?si=Z160JD3BE2VQnpvr

Although these YouTube links aren’t the same concept as my game and are actually very different, I used them to help me with the technical parts of creating my game. Since I’m still a beginner at coding, some things especially the math equations were really hard for me to figure out on my own. These videos really helped me understand how to make objects fall, how to make them appear randomly, and how to control different elements in the game. Even though their games had completely different themes, they included similar components that I could learn from, and I applied those ideas to make my own game work.

Code Highlight

const pw = p.w * PLAYER_HIT_SCALE.w;
const ph = p.h * PLAYER_HIT_SCALE.h;
const s  = ITEM_HIT_SCALE[it.kind] || { w: 0.5, h: 0.7 };
const iw = it.w * s.w, ih = it.h * s.h;

return (Math.abs(p.x - it.x) * 2 < (pw + iw)) &&
       (Math.abs(p.y - it.y) * 2 < (ph + ih));

When I was fixing the collision bug, it took me many tries to get it right. Even though I found YouTube videos about collision detection, I still couldn’t really figure it out at first because my game’s sprites and hitboxes didn’t match properly. The player would lose even when the Pepsi was far away. I kept testing and adjusting the numbers, but it wasn’t working. Then I found one YouTube video that explained hitboxes in a really simple way, and it finally made sense to me. That video helped me understand how to scale the hitboxes separately for each object, so I created smaller hitboxes around the Pepsi and the gahwa, and after that, the collisions finally worked perfectly. https://youtu.be/HK_oG_ev8FQ?si=BqtCL3WpHv3UpPQ0

End Of Project Reflection

Overall, I really enjoyed this project I genuinely, genuinely did. I loved developing my idea and adding more to it every single week. It’s crazy to see how much it changed from week 5, when I first thought of it, to how it looks now. It’s such an inspiring project for me because I got to be creative and technical at the same time. I also really enjoyed sharing it with my friends and family; everyone wanted to try it and play.

Even though it was a heavy project that took hours of work and a lot of effort, the result was completely worth it. I felt so accomplished when I finally finished it. It took a lot of trial and error, but that’s honestly what helped me learn the most. This project pushed me to apply everything I learned in class not just follow instructions, but actually take risks, test ideas, and build something real. It also made me go beyond what we learned and look for new solutions from other sources, like YouTube tutorials.

In the end, it was a very in-depth and challenging project, but I truly enjoyed every step of it not just the outcome. I loved the process of testing, debugging, and improving. It was fun, creative, and one of the most rewarding projects I’ve ever done.

There were definitely moments when I found bugs that I just couldn’t fix, and it felt so overwhelming. It was really frustrating because I would go through the code again and again and still couldn’t figure out what was wrong. But I started using the debugging techniques we learned in class, and that really helped me calm down and approach the problem more logically instead of panicking. There were also days when I spent hours trying to fix one thing, and after a while, my brain would just stop functioning. I couldn’t think straight anymore. But whenever I took a break and came back later, it was like my mind was refreshed, I could suddenly see the problem so much more clearly and finally debug it.

At some points, I honestly wanted to delete the whole code and just make a simpler game because I was so frustrated. But I’m really glad I didn’t. Finishing it made me feel so accomplished, and it really boosted my confidence in coding. I kept going even when I wanted to give up, and I pushed myself to find answers and look for external resources when I got stuck. That persistence made me realize that even if something feels impossible at first, I can figure it out if I stay patient and keep trying.

This project definitely required a lot of patience and I think that’s a skill I’m really starting to develop. I realized that when you’re coding, you’re not always going to get it right the first time, and that’s completely okay. There’s nothing wrong with making mistakes or needing multiple tries. Especially when you’re creating a game or something complex, patience is everything. You have to be willing to try again and again, test small changes, and stay calm even when things don’t work right away. This project really taught me that. It helped me understand that patience isn’t just something nice to have it’s one of the most important skills in programming.

Week 6 – Game Progress

 

Project concept

Last week, when I first thought of my game idea, I had almost the same concept as now, but it was originally a candy-themed game. Then I decided to make it closer to home, more customizable, and more traditional. I was trying to think about what should fall from the sky instead of candy, but I really couldn’t come up with anything at first.

Then one day, I was at my grandpa’s house, and I saw him drinking coffee with my little brother. It made me laugh because in our culture, especially in Arab families, they always tell kids not to drink soft drinks, but somehow Gahwa (Arabic coffee) is always allowed, even though it’s full of caffeine! What’s even funnier is that my grandpa used to give my little brother kahwa when he was literally a baby. He could only drink milk, but my grandpa would secretly give him kahwa without my parents knowing. In his mind, kahwa was totally fine, but soft drinks were bad.

That moment gave me the idea to make the game about Gahwa. So now, in my game, the goal is to catch the Gahwa and avoid the Pepsi , if you catch the Pepsi, the game is over. That twist made the game feel really traditional and personal to me.

I also decided to name the characters with Arab names and base them on my younger brother and sister. I really enjoyed that part because it made the game feel more meaningful and connected to my culture. Even though it’s a simple game and my technical experience isn’t that advanced yet, I really love the creative side of it. It feels fun and personal, and that’s what I enjoyed most.

What I am proud of

For my Week 6 submission, what I’m most proud of is that I made this entire game from scratch it’s my first time ever creating a full game, and that alone makes me really proud of myself. I’m also proud of how resourceful I was throughout the process. Even though the YouTube videos I found weren’t the same as my game at all, I still managed to understand their concepts and figure out how to apply them to my own project. I feel like I found really good sources that helped me learn and improve, and it showed me that I’m capable of teaching myself new things and solving problems independently.

I’m also really proud of my concept because it has a story behind it that makes it personal and meaningful. I feel like I did really well in both the creative and technical parts of the project. On the technical side, I worked hard to understand new concepts and used different sources to make my game function the way I wanted. On the creative side, it all came naturally because I was genuinely passionate about the idea. I really enjoyed bringing my story to life through the game, and that made the whole process even more special for me.

Bug

The only thing that’s bothering me about my game right now is that sometimes you lose even when the Pepsi is kind of far from the character. It doesn’t actually touch or collide with the player, but the game still ends as if it did. I think it’s because the data or hitbox isn’t directed properly to the character, so I’m planning to fix that bug. I also haven’t added any sounds yet, but I really want to, I just need to watch some tutorials first to learn how to do it correctly.

Code Highlight

This part of the code is one of the main things we learned in class, and it really became the foundation for my whole project. It basically controls what shows up on the screen depending on which stage of the game you’re in, like the home screen, instructions, character select, gameplay, or game over. This structure made everything so much easier for me because it helped organize my code and made it clear what each part should do. I started with this as my base and then kept building on it, adding more functions and features as I went along. It really helped me understand how to manage different screens in a game.

function draw() {
  background(0);
//conditions for screens 
  if (currentScreen === 'home')       drawHome();
  else if (currentScreen === 'instructions') drawInstructions();
  else if (currentScreen === 'character')    drawCharacterSelect();
  else if (currentScreen === 'game')         drawGame();
  else if (currentScreen === 'gameover')     drawGameOver();

Some Images I Used