Hello Kitty’s Adventure: The Car Dodging Challenge

let car, helloKitty; // images for car and Hello Kitty character
let phase = "startScreen"; // current phase of the game: startScreen, game, endScreen, instructions
let speedCount = 0; // counter to track speed and timing of game elements
let speed = 1; // initial speed of moving cars
let cars = []; // array to hold car objects for collision detection and rendering
let gameOverImg; // image to be displayed when the game is over
let arduinoData = 0; // data received from Arduino for control
let useArduinoControl = true; // flag to enable or disable Arduino control
let rVal = 0; 


// -------------------------------------------------------------------------------------

// preloads game assets (images, fonts, sounds) 
// before starting the game

function preload() {
  car = loadImage("pink1.png"); 
  helloKitty = loadImage("hellokitty.png");
  StartUp = loadImage("workpls.png")
  customfontkitty = loadFont('kittyfont2.ttf');
  customfontsan = loadFont('san.ttf');
  gameOverSound = loadSound("ouch.mp3");
  introSound = loadSound("introsong.mp3");
  leftBorder = loadImage("leftBorder.png");
  rightBorder = loadImage("rightBorder.png");
  instructionImg = loadImage("instructions8.png");
  }

// ----------------------------------------------------------------------------

// sets up the initial state of the game canvas and variables

function setup() {
  createCanvas(400, 600);
  
  rectMode(CENTER);
  imageMode(CENTER);
  
  kittyX = 115; // initial X position for Hello Kitty
  kittyY = 550; // initial Y position for Hello Kitty
  score = 0; // initialize score
  level = 1; // initialize game level
}


// ----------------------------------------------------------------------------


// The main game loop, executed continuously to render the game


function draw() {
  
  background(50, 140, 80); // set the background color
  
  if (phase == "game") {
    fill(255,204,220);
    noStroke();
    
    // fisplay the left and right border images on the screen
    image(leftBorder, 20,height/2,leftBorder.width*0.55,leftBorder.height*0.55);
    image(rightBorder, 380,height/2,rightBorder.width*0.55,rightBorder.height*0.55);
    
    // draw the central playing area
    rect(width / 2, height / 2, 320, height);
    fill(255);
    
    // creates the road markings
    for (let i = 0; i < 4; i++) {
    for (let j = -1; j < 10; j++) {
    rect(75 + i * 80, (speedCount % 60) + 30 + 60 * j, 6, 50);
      }
    }
    
   // increment speedCount to control the moving speed of road markings
    speedCount += speed;
    
   // arduino Control: Move Hello Kitty based on Arduino input
      if (useArduinoControl && arduinoData !== null) {
  
      if (arduinoData < 10) { // move left
           kittyX = 115; 
        } else if (arduinoData >= 10 && arduinoData < 20) {  // Move center
           kittyX = 195; 
        } else if (arduinoData >= 20) {  // Move right
           kittyX = 275; 
        }
     }
    
    // returns the hello kitty to current position

    image(helloKitty, kittyX, kittyY, 70, 100);
    
  
    // on every 50th speed count a car will come down
    if (speedCount % 200 == 0) {
        cars.push({
            x: random([115, 115 + 80, 115 + 160]), // Random lane
            y: -40, // Start above the screen
        });
    }
    
    // move each car
    for (let i = 0; i < cars.length; i++) {
        image(car, cars[i].x, cars[i].y, 70, 100);
      
      
    // checks for collision with Hello Kitty
      if (dist(cars[i].x, cars[i].y, kittyX, kittyY) < 60) {
        phase = "gameOver";
        gameOverImg = get(0, 0, width, height);
        gameOverSound.play();
        introSound.stop();
    }
    
    // update car position
      cars[i].y += speed * 2;
    }
    
    
    // display score and level
    textSize(16);
    stroke(255);
    strokeWeight(2);
    fill("#9B858D");
    text("SCORE : " + score, 20, 30);
    text("LEVEL : " + level, 320, 30);
    
    // increment score over time
    if (frameCount % 60 == 0) {
      score++;
    }
   
    // increase speed and level after certain intervals
    if (speedCount % 1000 == 0) {
      speed += 1;
      level += 1;
    }
  }
  
// ----------------------------------------------------------------------------

 // display the game over screen and show score and level reached
  
  if (phase == "gameOver") {
    image(gameOverImg,width/2,height/2);
    textSize(16);
    strokeWeight(2);
    stroke(0);
    fill(0, 100);
    rect(width / 2, height / 2, 240, 150);
    fill(255);
    stroke(255);
    strokeWeight(1);
    text("Level " + level + " Reached", 145, 250);
    textSize(14);
    text("   You Scored " + score, 145, 360);
    text(" press Enter to Restart", 135, 330);
    fill(255);
    textSize(32);
    text(" GAME OVER", 105, 300);
  }
  
  // checks if the current game phase is the start screen
  if (phase == "startScreen") {
    if(!introSound.isPlaying()){
      introSound.loop();
    }
    

// ----------------------------------------------------------------------------
    
// start up image and text
    
    background("#9B858D");
    fill(255,192,203,0.60);
    image(StartUp, width/2, height/2, StartUp.width*0.7, StartUp.height*0.7);
    rect(width / 2, height / 2, 380, 580);
    stroke(255);
    
    fill(255);
    strokeWeight(6);
    stroke(255, 192, 230);
    fill(255, 105, 180);
    textFont(customfontkitty);
    textSize(86);
    text("hello kitty", 20, 120);
    
    fill(255, 105, 180)
    textSize(60);
    strokeWeight(2)
    stroke(255);
    textFont(customfontkitty);
    text("adventure", 70, 175);
    
    fill(171,209,158);
    rect(width / 2, 480, 200, 80, 50);
    fill(255);
    textFont(customfontkitty);
    text("start", 140, 500);
   
    stroke(171,209,158);
    strokeWeight(2)
    fill(255);
    textSize(28);
    text("   Press Enter for Instructions",10,570)
    
 
    // check if the mouse position is within a specified rectangular area
    if (
      mouseX > width / 2 - 100 &&
      mouseX < width / 2 + 100 &&
      mouseY > 460 &&
      mouseY < 540
    ) {
    
    // If the mouse is within the specified area it changes to game phase
    if (mouseIsPressed) {
      mouseIsPressed = false; 
      phase = "game";
      }
    }
  }
  
// -------------------------------------------------------------------------------------

// intruction page
  
  if (phase == "instruction"){
   
    image(instructionImg,200,300,400,600); // display the instruction image
  
    strokeWeight(2);
    stroke(0);
    textSize(60);
    textFont(customfontkitty);
    fill(0);
    text("How To Play",40,120);
    textFont();
    
    textFont(customfontsan);
    strokeWeight(1);
    textSize(20);
    text("      \n     1) move your hands left   \n          and right to move \n                  hello kitty  \n       2) try to avoid the cars   \n                3) BE SAFE!",60,330);
    textSize(20);
    text("      press enter to go back \n                 and start! ",70,500)
  }
}

// function to handle keyboard inputs


function keyPressed() {
  
  // game control using arrow keys during the 'game' phase
  if (phase == "game") {
    switch (key) {
      case "ArrowLeft":
        if (kittyX > 115) {
          kittyX -= 80;
        }
        break;
      case "ArrowRight":
        if (kittyX < 260) {
          kittyX += 80;
        }
        break;
      default:
        break;
    }
  }
  
  // restart the game when 'Enter' is pressed in the 'gameOver' phase
  if (phase == "gameOver") {
    if (key == "Enter") {
      score = 0;
      level = 1;
      speedCount = 0;
      speed = 0;
      cars = [];
      phase = "startScreen";
      kittyX = 75;
      kittyY = 550;
      key="";
    }
  }
  
  // handle key presses for navigating between instruction and start screen
  if(phase=="instruction"){
    
    if(key== "Enter"){
      phase = "startScreen";
      key="";
    }
  }
  
  if(phase=="startScreen"){
    if(key== "Enter"){
      phase = "instruction";
      key="";
    }
  }
  
  //  setup serial communication when spacebar is pressed
  if (key == " ") 
  {
    setUpSerial();
  }
}


// -------------------------------------------------------------------------------------

// arduino

function mouseIsPressed()
{
  readSerial();
}

// This function will be called by the web-serial library
// with each new line of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function

let lastDataReceivedTime = 0;

function readSerial(data) {
  if (data != null) {
    arduinoData = parseInt(data);
    lastDataReceivedTime = millis();
    useArduinoControl = true;
  } else if (millis() - lastDataReceivedTime > 2000) { // 2 seconds timeout
    useArduinoControl = false;
  }
  
    
 let sendToArduino = 0;
  switch (phase) {
    case 'game':
      sendToArduino = 1;
      break;
    case 'instruction':
    case 'startScreen':
      sendToArduino = 2;
      break;
    case 'gameOver':
      sendToArduino = 3;
      break;
  }
  writeSerial(sendToArduino + "\n");
}

const int trigPin = 9;  // Pin number for the ultrasonic sensor's trigger pin
const int echoPin = 10; // Pin number for the ultrasonic sensor's echo pin
const int ledgreen = 4; // Pin number for the green LED
const int ledred = 7;   // Pin number for the red LED
long duration;          // Variable to store the duration of the echo pulse
float distance;         // Variable to store the calculated distance

void setup()
{
  pinMode(trigPin, OUTPUT);  // Set the trigPin as an output
  pinMode(echoPin, INPUT);   // Set the echoPin as an input
  Serial.begin(9600);        // Start serial communication at 9600
  pinMode(ledgreen, OUTPUT); // Set the green LED pin as an output
  pinMode(ledred, OUTPUT);   // Set the red LED pin as an output
}

unsigned long ultrasonic_clock = 0;
unsigned long led_clock = 0;
float sum = 0;
int iterator = 0;

void loop()
{

  if (millis() - ultrasonic_clock >= 5) // Take reading every 5 ms
  {
    ultrasonic_clock = millis();

    digitalWrite(trigPin, LOW); // Clear the trigPin
    delayMicroseconds(2);
    digitalWrite(trigPin, HIGH); // Set the trigPin to HIGH state for 10 microseconds
    delayMicroseconds(10);
    digitalWrite(trigPin, LOW); // Set the trigPin to LOW state

    duration = pulseIn(echoPin, HIGH); // Read the echoPin, returns the sound wave travel time in microseconds
    distance = duration * 0.034 / 2;   // Calculate the distance

    sum += distance;
    iterator++;

    if (iterator == 5) // Average the last 5 readings
    {
      Serial.println(int(sum / 5));
      iterator = 0;
      sum = 0;
    }
  }

  if (millis() - led_clock >= 10) // Take reading every 10 ms
   {
  led_clock = millis(); //record the time this code ran

  // reading brightness level from serial
  //   int brightness = Serial.parseInt();
  if(Serial.read() == '\n'){
  
  // controlling LED based on brightness level
      if(brightness == 1){
         digitalWrite(ledgreen, HIGH);
        digitalWrite(ledred, LOW);
       }
     else if(brightness == 2){
        digitalWrite(ledgreen, LOW);
        digitalWrite(ledred, LOW);
       }
      else if(brightness == 3){
         digitalWrite(ledred, HIGH);
         digitalWrite(ledgreen, LOW);
       }
     }
    }
}

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

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

Creative Reading Reflection – Design Meets Disability:

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.

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);
  }
}

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.

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.

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).

IMG_5050 = demostration video of the rug being stepped on

Structure

Reflection

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.