Week 11 | Final Project Idea

Final Project Idea- Hello Kitty and her Friends Adventure route :

As I contemplated a concept for my final project, I realized my true desire was to create a game. But not just any ordinary car game with normal obstacles. Instead, I envisioned a Hello Kitty-themed adventure.

Sanrio, a beloved part of my childhood and still a cherished brand in my adult life, inspires me to incorporate their iconic imagery. My vision includes using a Sonic distance sensor as an innovative control mechanism for maneuvering Hello Kitty, though her adventure but I’m still brainstorming additional features to enrich the gaming experience.

I already have ideas about how to present this game and I can’t wait to actually proceed with this idea. It might appear as just a regular game, but this time, I am personally committed to creating one, especially since my last project was an experience rather than a game. I’m not only incorporating a significant part of my childhood into it, but also who doesn’t love car games especially with a twist?

Week 11 | Serial Communication: Serial Communication Exercises Assignment

Serial Communication Exercises Assignment:

Exercise (1) make something that uses only one sensor  on Arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on arduino is controlled by p5
ellipse(map(alpha, 0, 1023, 0, 640), 80, 80, 80);

Video Demonstration IMG_5539 2

Exercise (2) make something that controls the LED brightness from p5
function keyPressed() {
  
  // set up connection with p5:
  if (key == " ") {
    setUpSerial();
  }
  
  if (key == "1"){
    left = 10;
  }
  
  if (key == "2"){
    left = 100;
  }
  
  if(key == "3"){
    left = 255;
  }
}

Video DemonstrationIMG_5542

Exercise (3) take the gravity wind example  and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor
P5 CODE

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let isBouncing = 0;

function setup() {
  createCanvas(640, 480);
  textSize(18);

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

function draw() {
  background(255);

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    applyForce(wind);
    applyForce(gravity);
    velocity.add(acceleration);
    velocity.mult(drag);
    position.add(velocity);
    acceleration.mult(0);

    ellipse(position.x, position.y, mass, mass);
    if (position.y > height - mass / 2) {
      velocity.y *= -0.9; // A little dampening when hitting the bottom
      position.y = height - mass / 2;
      isBouncing = 1;
    } else {
      isBouncing = 0;
    }
  }
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  } else if (key == "ENTER") {
    mass = random(15, 80);
    position.y = -mass;
    velocity.mult(0);
  }
}

function readSerial(data) {
  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 1) {
      // only store values here
      // do everything with those values in the main draw loop
      let potValue = int(fromArduino[0]);
      wind.x = map(potValue, 0, 1023, -1, 1);
    }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = isBouncing + "\n";
    writeSerial(sendToArduino);
  }
}

function applyForce(force) {
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

ARDUINO CODE

int ledPin = 5;
const int potPin = A1;

void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(ledPin, OUTPUT);
  pinMode(potPin, INPUT);
  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("0,0"); // send a starting message
    delay(300);            // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }
}

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
    digitalWrite(ledPin, LOW);
    int isBouncing = Serial.parseInt();
    if (Serial.read() == '\n') {
      int potValue = analogRead(potPin);
      delay(5);
      Serial.println(potValue);
    }
    // Set LED brightness based on whether bouncing.
    if (isBouncing == 1) {
      digitalWrite(ledPin, HIGH);
    } else {
      digitalWrite(ledPin, LOW);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
}

Video Demonstration IMG_5610

Week 11 | Creative Reading Reflection: Design Meets Disability

Creative Reading Reflection – Design Meets Disability:

Exploring design is closely tied to limitations. Charles Eames wisely said, “Design depends largely on constraints,” suggesting that constraints can drive innovation. This highlights the importance of context and how limitations can guide creative solutions. The contrast between good and bad design is interesting. Bad design is like a jarring composition with elements that clash, while good design can be subtly suggested. This aligns with the idea that discretion in design, especially for special needs, doesn’t have to be invisible and the discussion on eyewear and fashion shows how positive pre-existing images can shape design considerations. The ongoing debate between functionality and design is captivating that engineers often prioritize functionality, but our love for beauty adds complexity.

Design for disability sparks thought. Why should designs mimic the norm when they can go beyond it? This challenges the suggestions that disability design should envision possibilities beyond social expectations. It calls for a shift in norms and embracing diversity in design. Inclusive design is a crucial theme, balancing functionality and simplicity. It raises ethical questions about the responsibility of designers in creating products that cater to diverse populations.

Design goes beyond just physical things. It includes culture, how we see things, and what society values. This challenges us to think not only about making products but also how we see and value design in our everyday lives. When we embrace inclusive design, we’re moving towards a kinder and fairer future. In this future, creativity has no limits, and everyone can enjoy the advantages of design that thinks about the needs of all users.

Week 10 | Make a musical instrument: “A Whimsical Musical Mixer Box” Assignment

A Whimsical Musical Mixer Box:

In creating this project, our aim was to craft something that deviates from the regular and embraces the weird. I believe that Ghalia and I achieved perfection in capturing this unique and unconventional essence. Our project is inspired by a music box but is aiming to be more funky, weird, and whimsical. The goal is to create a musical box that stands out by having the twirly thingy on the outside instead of the inside. We had multiple ideas initially, but we ultimately settled on this one because we felt a strong desire to bring it to life. While the project was enjoyable, it also presented its challenges, making the process a bit of a struggle.

Structure

We made every effort to enhance our project by incorporating various elements. We integrated a digital light, a servo motor, and an analog sonic sensor. The aluminum on the side serves as a button to control the light and servo, while the sensor plays piano keys based on the distance of the hand. Despite our numerous ideas, implementing them became a challenge, and we faced struggles with the Arduino that led us to adapt our concepts as we encountered difficulties that proved difficult to overcome. An A foil based heart to controll the tone melody.

Initially, I was working with code to play two-tone melody songs controlled by a button. However, as we progressed, I encountered multiple challenges and had to make several changes. I eventually found a code similar to what we were aiming to achieve. Unfortunately, the Arduino posed some inconsistencies – it worked at certain points but failed at others, prompting us to modify and adapt the code.

void loop() {
  unsigned long currentMillisMelody = millis();

  // Play the melody
  if (currentMillisMelody - previousMillisMelody >= noteDuration) {
    previousMillisMelody = currentMillisMelody;

    // Check if there are still notes to play
    if (currentNote < notes) {
      // calculates the duration of each note
      divider = melody[currentNote * 2 + 1];
      if (divider > 0) {
        // regular note, just proceed
        noteDuration = (wholenote) / divider;
      } else if (divider < 0) {
        // dotted notes are represented with negative durations!!
        noteDuration = (wholenote) / abs(divider);
        noteDuration *= 1.5; // increases the duration in half for dotted notes
      }

      // Play the note
      tone(buzzer, melody[currentNote * 2], noteDuration * 0.9);

      // Increment to the next note
      currentNote++;
    } else {
      // All notes played, reset to the beginning
      currentNote = 0;
    }
  }

// Move the servo
// Move the servo from 0 to 360 degrees
  if (currentMillisMelody % 30 == 0) {  // Adjust the value based on your servo speed
    if (pos < 180) {
      pos++;
    } else if (pos < 360) {
      pos++;
    } else {
      pos = 0;
    }
    myservo.write(pos);
  }
}

Reflection

For improvements, I’d like to achieve what we had in mind but couldn’t accomplish in our project. I would also like to reintroduce the button somewhere in our project since we encountered difficulties in that aspect. Additionally, I’m open to suggestions on how to enhance and refine our project further. However, despite the numerous challenges and occasional breakdowns we faced during the process, we take pride in the final outcome. The journey was marked by struggles, but looking back, I can confidently say that the effort was entirely worth it. The end result exceeded our expectations even if our original plan hasnt been achieved, and I genuinely loved how our project turned out, even though it had its share of difficulties. Throughout it all, we managed to have a fun time working together. Now, I need to troubleshoot my Arduino, as it unexpectedly caused issues with my laptop and even caused some lag on my MacBook. It’s a reminder of the unpredictability that comes with the creative endeavors!

Week 10 | Creative Reading Reflection: A Brief Rant on the Future of Interaction Design

Creative Reading Reflection – A Brief Rant on the Future of Interaction Design :

Bret Victor critiques current interactive design limitations and promotes a more unique and intuitive approach for future projects. He underscores the significance of human capabilities, especially touch and hand abilities, in tool and technology design. Victor criticizes the common use of “Pictures Under Glass” interfaces, favoring visual over tactile feedback, and advocates for a more dynamic and immersive medium that involves multiple senses. He urges readers to draw inspiration from untapped human potential and pursue ambitious, long-term visions in interaction design.

What I find compelling in this passage is the push to rethink how we design interactions. The comparison of making a sandwich and the intricate movements of our hands and bodies highlights the richness of human abilities. It can inspire us to move beyond current technology limits and explore the untapped potential of our hands and bodies in shaping the future of how we interact with computers.

Week 9 | Analog + Digital input & output: “Mario’s Magic Light-Up Mushroom” Assignment

Mario’s Magic Light-Up Mushroom:

The inspiration for my project struck me when I found myself without my Nintendo Switch, unable to play one of my all-time favorite games since childhood, ‘Mario Party.’ This game is filled with quirky and fun elements like the lucky block and the magical mushroom, both of which can greatly influence your journey in the game.

So, I decided to base my project on the game. It’s not only a personal passion but also a nostalgic trip down memory lane. I believe it’s a creative concept that encapsulates the magic of ‘Mario Party,’ and I had the input of my friends to help shape the idea.

 

 

 

 

 

 

 

 

IMG_5210_DEMOSTRATION VIDEO

Structure

The structure of my project revolves around the use of buttons and sensors from the SparkFun kit, which I gained an understanding of during one of our classes.

The materials I used are a printed out image of the iconic mushroom and lucky block from the game. These images were carefully mounted on cardboard for durability, and I affixed them with tape on the to ensure they could withstand the project.

The red is controlled by the sensor, The yellow is controlled by the button

The code provided in class examples played a crucial role in helping me bring this assignment to life. It served as a valuable starting point and a foundation for what I aimed to achieve. With the help of this code, I’m confident that the project will capture the fun and nostalgia of ‘Mario Party’ while showcasing my newfound skills in working with hardware and sensors.

Reflection

I must admit that the journey of building the Arduino circuit and working with the breadboard was a bit challenging, but it was also immensely rewarding. I spent a considerable amount of time understanding the components, making connections, and ensuring everything functioned as intended. While it tested my patience at times, it also provided me with invaluable insights into electronics and hardware, which I know will be useful in the future.

Week 9 | Creative Reading Reflection: Physical Computing’s Greatest Hits and Making Interactive Art: Set the Stage, Then Shut Up and Listen

Creative Reading Reflection – Physical Computing’s Greatest Hits:

The text discusses common themes in physical computing projects, which are interactive projects that involve using technology to create interesting interactions. These themes include making musical instruments that respond to hand movements, designing gloves for music and gesture control, creating interactive floor pads for dancing and games, building projects that mimic hand movements and more. These themes provide a base for learning and experimenting in the field of physical computing which allows students and creators to add their unique ideas and the variety to change. In essence, they serve as starting point for innovative and creative projects in the world of technology and interaction and will help continue to evolve with new ideas and technologies in physical computing.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

The second text, it elaborates on how creating interactive art is different as it involves you to provide the audience with a clear context of the art and then allow them to engage freely. Instead of ordering a fixed interpretation, interactive art should provide the the audience to listen to your work by taking it in through their senses and let them think about what each part means. Just like a director working with actors, the artist’s role is to create the framework and opportunities for engagement, much like how a director guides actors in a performance. When creating interactive art, don’t view it as a finished painting or sculpture. Instead, think of it as a live performance. The audience plays a crucial role in completing the art through their actions. This approach welcomes participants to contribute their creative ideas and add diversity to the art.

 

 

 

 

 

Week 8 | Create an unusual switch: “Light up your step” Assignment

Light up your step:

The “Light Up Your Step” assignment involves creating a foil-based light switch integrated into a rug that activates when someone steps on it. When pressure is applied to the mat, the foil switch makes contact, turning on the lights connected to the breadboard. This concept aims to create a welcoming and surprising element for guests entering your living room, as the lights switch on when they step on the rug (if made into a real rug).

This assignment took some time to conceive, but during a visit to my home over the weekend, I found inspiration. Upon arriving in my living room, I was inspired to create something based on rugs. I thought that integrating this into my project would be a fantastic idea, and it turned out to be quite appealing.

IMG_5050 = demostration video of the rug being stepped on

Structure

The structure of the project involves printing two images of a rug and sandwiching a strip of foil between them. I attached one wire from the Arduino to the foil, and the other black wire to the foil, connecting them to the breadboard. The wires are secure with tape.

 

 

Reflection

As this is my first time working with electrical components like Arduino, I’m feeling excited and enthusiastic about diving into this new experience. Despite my initial lack of knowledge, I took the time to revisit the required readings and carefully studied Professor Michael’s notes to reassemble the light switch correctly. I’m genuinely proud of how I interpreted the assignment and came up with a unique and enjoyable concept. I’m looking forward to the journey ahead!

Week 8 | Creative Reading Reflection: Her Code Got Humans on the Moon—And Invented Software Itself, Norman “Emotion & Design: Attractive things work better”

Creative Reading Reflection – Her Code Got Humans on the Moon -And Invented Software Itself:

The article talks about how back in the 1960s, when most tech jobs were filled by men, a woman named Margaret Hamilton made history. She was only 24 and worked at MIT as a programmer. Even though people didn’t expect much from women in tech back then, Margaret proved them wrong in a big way.  As a young programmer at MIT, she embarked on a journey that would mark her as one of the important figures behind the successful Apollo space missions.

She became a key person in the Apollo space program because she wrote a lot of the software that made the Apollo missions successful. There was a tense moment during the famous Apollo 11 mission when the computer started showing some unexpected errors. But, thanks to her hard work and her team, the mission was a success, and the astronauts landed safely. She thought ahead during the Apollo program, identifying issues and pushing for software changes that later became vital for the success and safety of future missions.

Margaret Hamilton made significant contributions to both software engineering and space exploration. Her dedication and leadership are remarkable. When we think about major space achievements, it’s essential to see Hamilton as an influential figure who greatly impacted technology and space missions. Her work shows how one person can change history.

Norman “Emotion & Design: Attractive things work better”

Don Norman’s essay, “Emotion and Attractive,” highlights a fundamental aspect of design that often goes unnoticed. He emphasizes that the aesthetics of a product go beyond its outer appearance. It includes usability, understandability, and ease of use, in addition to beauty. He explains that sometimes, in stressful situations, like emergencies, things should focus more on usability. They need to be easy to use so people can stay safe. But in everyday life, when things are less stressful, it’s nice to have things that look beautiful and make us happy.

Don Norman also introduces the idea of “affect,” which is how we feel when we use something. Affect can change the way we think and solve problems. When something looks nice and makes us feel good (positive affect), it can even help us be more creative and patient. When something is visually appealing, we tend to invest more mental effort in understanding its use. However, this preference for aesthetics can be influenced by our mood and circumstances.

Norman provides a concrete example with teapots. If you have the time and inclination, you might choose the most aesthetically pleasing teapot, even if it’s not the most user-friendly. But when you’re in a hurry, practicality takes precedence over aesthetics.

So, the key is to find a balance between usability and beauty in design. It’s not about choosing one over the other but making things that work well and make us happy. That way, our everyday things can be both useful and beautiful.

 

Weel 6 | Final Midterm: Glow Up Gallery: A Interactive Artwork Collage

Concept:

My project centers around the art of collaging. I have always loved collaging and scrapbooking ever since I first learned it in preschool. There’s something inherently captivating about the act of layering pictures over each other, creating a tapestry of memories and ideas. While some might perceive it as chaotic or haphazard, I see it as a unique form of art that allows for boundless creativity. In the past, I used to create physical collages on paper, but as technology evolved, I found myself drawn to the world of digital collage occasionally.

This got me thinking about a concept: What if there was a experience where people from could come together to explore their creative side through collaging? A place where individuals could take disparate images and meld them into stunning compositions. Collaging to me feels like painting with images with a way to convey emotions, tell stories and explore the depths of imagination.

The central idea behind my project is to provide an experience  for individuals to express themselves through collaging. It encourages users to dive into their artistic side, experiment freely with various images and styles, and chose their unique choices visually. It challenges users to push the boundaries of what’s possible with collaging, fostering innovation and unexpected compositions.

How it Started: Untitled Notebook (3)

How it ended up:

Coding:

As a beginner, creating my first interactive artwork/semi-game was an incredibly enjoyable and enlightening experience, particularly since I’m an avid gamer and I found it exciting. It was a journey marked by trial and error, as I grappled with new concepts and tools that felt foreign to me even though they weren’t. The initial stages were challenging; I found myself feeling stuck and uncertain about how to bring my project to life. To overcome these hurdles, I resorted to rewatching tutorials and revisiting the basics of using certain functions and processing tools, such as online resources like YouTube videos to gain insight and clarity. Seeking help from friends was also valuable, but what pleasantly surprised me the most was discovering that my aunt, an architectural engineer, was well-versed in P5. Her assistance was a game-changer. This project taught me that perseverance, a willingness to learn, and seeking help when needed and  challenges can turn into rewarding achievements as I am proud of myself

Highlight:

I dont have a particular code that I did struggle the most with, some might have been simpe while others did require alot of thinking. But if i could choose one it would be the checkPaintbrushHover. I would say I struggled the most with part as a whole, as I was very confused on how ‘dist’ work and had to watch videos to know how to amply it, but my implications were error but I achieved it at the end

function checkPaintbrushHover() {
 
  isHovering = false;  //  assume the mouse is not hovering over paintbrush
  if (currentPage === "startup") { // if the current page is 'startup'
    // calculate the distance between the mouse and the paintbrush 
    let d = dist(mouseX, mouseY, 120 + 50, 510 + 50);
    if (d < 50) { // if the distance is less than 50 pixels
      isHovering = true; // the mouse is hovering over the paintbrush
      return; // exit function 
    }
  } else if (currentPage === "boredImage") { // if the current page is 'boredImage'
    // calculate the distance between the mouse and the paintbrush 
    let d = dist(mouseX, mouseY, 120 + 50, 450 + 50);
    if (d < 50) { // if the distance is less than 50 pixels
      isHovering = true; // the mouse is hovering over the paintbrush
      return; // exit function 
    }
  } else if (currentPage === "main") { // if the current page is 'main'
    // calculate the distance between the mouse and the paintbrush 
    let d = dist(mouseX, mouseY, 490 + 45, 425 + 45); 
    if (d < 45) { // if the distance is less than 45 pixels
      isHovering = true;
      return; // exit function 
    }
  }
}

 

Reflection:

The projects concept is interesting and fun to me, as ive never gotten the chance to do something like this before. I do agree that I couldve done something even bigger and more creative but I do enjoy and proud of what I did and I find it creative and matches the theme of interactivity in an artwork. The mistakes I encountered throughout this project will be proved to be invaluable learning experiences for me,  to make me more confident in my ability I will be revisiting  as I continue to learn and grow.

 

Final work:

 

References:

Fonts

Images:

Sound:

Videos:

  • https://www.youtube.com/watch?v=mVq7Ms01RjA
  • https://www.youtube.com/watch?v=1Osb_iGDdjk
  • https://www.youtube.com/watch?v=UvSjtiW-RH8
  • https://www.youtube.com/watch?v=asvnmtVjeEk         
  • https://www.youtube.com/watch?v=7A5tKW9HGoM
  • https://www.youtube.com/watch?v=bhAUIeVe0s4