Category: Spring 2024 – Aaron (Section 001)

Concept:

For this assignment I use my knowledge of drawing basic shapes in p5*js to create a self-portrait. This portrait is a rough sketch of me, wearing my favorite hairstyle—a high ponytail. Since I’m still relatively new to coding, I chose to keep my approach simple by using basic shapes, lines, and curves to create this sketch. Understanding how the order of code affects the final drawing inspired me to stack shapes strategically, allowing me to capture minute details like the facial features in my portrait.

Highlight:

I’m particularly proud of the eyes in this sketch, as I invested a lot of effort into adding detailed elements that took some time to perfect. My biggest challenge was getting the curves right, especially when it came to the eyebrows and eyelids. Positioning them correctly was tricky, but using the mouseX and mouseY variables was incredibly helpful in determining their relative placement. However, achieving consistent curves across the sketch was the most time-consuming aspect of the entire process.

//eyes
fill(250);
ellipse(180,195,15,20);
ellipse(220,195,15,20);

noFill();
curve(175,230,167,190,194,190,200,230);
curve(180,240,206,190,235,190,220,220);
curve(200,170,167,200,194,200,200,150);
curve(200,155,206,200,235,200,200,170);

//eyebrows
curve(200,175,207,175,239,175,250,220);
curve(150,220,165,175,197,175,280,200);

Reflections:

When drawing the eyelids and eyebrows, I initially used the curve() function, but I later realized that combining noFill() with bezier() would have been a quicker and more efficient approach for creating curves. Additionally, I used the width and height variables to center the head on the canvas, which worked well. However, I believe that applying these variables more consistently throughout my sketch would make the portrait scalable for any canvas size in the future.

Russian Roulette Final Project

To summarize this project was about making a game that was like Russian Roulette but without the gun. Instead two players would stand opposite each other and would have two options. First there is a “gun” (it just exists in the p5js sketch) that is loaded with a certain amount of live rounds and the rest are blank and then like the real Russian Roulette each player would get chances to shoot the other opponent or not or shoot themselves. If a player shoots themselves and its a blank then they get another turn making it more likely that the next round will be live and hence more likely that they will win and if they do shoot the other player and it is blank then their turn ends and they swap and the cycle continues. There is also 3 lives for each player and if one of them loses, i.e. runs out of lives they have to use a shock pen. The purpose of the shock pen was to create some kind of stakes just like the real Russian Roulette but more sane.

To me this project represents more than a fun creation. Genuinely, while I did enjoy it this was a huge learning experience and not just when it came to coding and soldering and whatever other physical things I did. I’ll explain how so as I go from beginning to end.

I originally had this idea before the midterm and I thought about creating a Russian roulette for my midterm. I chose a different path and made a Mexican Standoff game for my midterm. It was arguably slightly harder to make and for me going into it I really had little idea what I was doing. I learned how to change from different scenes (thanks to Pi telling me about a scene management class), but more importantly I learned a lot about planning as halfway through making it I had to sit down and I sketched a diagram of what I wanted the game to be like on a whiteboard in a library study room.

So in the midterm I just began to plan things properly and I wasn’t very efficient at it. So going into this project I also planned but unlike before I also had to consider the physical: Making and wiring all the components that I’ll need. Even planning it was difficult to be honest. Difficult because I didn’t really know where to start but also I didn’t know what was available in the intro to IM lab. I was very fortunate to learn more about what was available through our lessons where we learned about renting equipment but also saw the different sections in the lab, like the consumables or the blue closet (i dont know if it has a name).

Then when I had to start I had to learn serial communication. I think a lot of people can agree when I say it was very confusing and I would argue it remained a problem with my project from beginning to end even though I thought I understood it at the beginning. That was the biggest hurdle by far mentally because it had been bothering me for a couple days before because when I would go to try to understand the code from professor Aaron and change it to fit my project (4 buttons, a potentiometer and 2 LEDs) it wouldn’t work even though just before that it I felt I understood it when working with Snehil and Khalifa on the previous assignment.

• Include some pictures / video of your project interaction
• How does the implementation work?
  • Description of interaction design
  • Description of Arduino code and include or link to full Arduino sketch
  • Description of p5.js code and embed p5.js sketch in post
  • Description of communication between Arduino and p5.js
• What are some aspects of the project that you’re particularly proud of?
• What are some areas for future improvement?

The way that my project works is first that the Arduino detects the button presses from each of the four buttons as well as the input from the potentiometer. Then using serial communication the Arduino sends the signals received from the buttons and potentiometer to the p5js sketch and in response the sketch relays back a message to create a handshake.

The p5js code is slightly more complex. First I have multiple scenes each of which managed by a scene management class where depending on the number that the class receives it calls on different functions, each of those functions are actually the scenes. For example the disclaimer scene is actually just a function which has all the shapes and so on being drawn and the function itself is only called upon when the scene number is 2. The same goes for the other scenes. As for the game itself: Firstly, after the animation there is an array of booleans totaling 6. If an element is true it means it is a live round and vice versa and then there is another global variable called selected_round and that is added up incrementally to signify which round is being selected from the chamber. As for the players, they have two options represented as two buttons. One button (the red one) means that the player can shoot themselves, and the other (the blue button) means that the player can shoot the other person in front of them. If the player chooses to shoot themselves and it’s a blank then it remains their turn and makes it more likely that the next round will be live and hence more likely that they can win the round. However, if a player chooses to shoot the other but it’s blank they switch turns making the odds in the favor of the other player as its now more likely for them that the next round is live. Furthermore, I added difficulties which means that depending on the difficulty chosen by the player there will be a varying amount of live rounds with the easiest difficulty being “Standard” which means only one live round, and the hardest being “Masochist” which can have between 3 and 5. Each of the players have 3 lives, then at the end of it all, if they choose to the loser has to use a shock pen so that there are stakes and to make the game more interesting.

I’m particularly proud of the UI elements, specifically holding down a button to go to the next page and so on. To me it felt the most satisfying.

For the future there are a lot of things I would change. I would have started by making the game aspect first, as I had made the mistake of starting at the start page ironically. This would have made my life a lot easier but at the same time I am somewhat glad that I did what I did because I felt that the UI was a large part of what I liked and I hope others liked about the game.

The sketch on p5js may be a bit weird because I had coded it on vscode and made it such that the canvas fit my mac screen so it may take a while to load and/or may be hard to use.
 

VR Archery

My game was all about creating a virtual archery game and linking a flex sensor to the bow, so it detects the bending motion and once bent the arrow shoots onto the target. For the theme of the entire game, I decided to link it with my childhood as well and use Minecraft as the main theme. As a 9 year old, I used to go to the archery range and play Minecraft at the time so it brought up a sense of nostalgic feeling.

For the bow, in order to give it a pixelated look, I decided to super glue the tiny wooden square blocks and paint over it. I attached the flex sensor on the top of the bow and attached a string to the flex sensor so when the string is pulled it shoots the arrow.

Future Improvements:

For future improvements, I’d like to add more visuals. I felt like it would’ve been more engaging if I did.

Pictures and Documentation:

Soldering documentation :

https://youtube.com/shorts/Cn9bonfPVeI?feature=share

Game play:

https://youtube.com/shorts/6olYsuVx5k8?feature=share

The Game & Codes:

<iframe src=”https://editor.p5js.org/sa6607/full/wcM5zq8Fr”></iframe>

P5 Code:

const serial = new p5.WebSerial();
let startButton;
let portButton;
let closeButton;
let sensorValue = 0;
let width = 900;
let height = 506;
let arrowSpeed = 5; // Speed at which arrow moves
let arrowDirection = 1;
let score = 0;
let shooting = false; // Indicates whether the arrow is currently being shot
let arrowX = width / 2; // X-coordinate of the arrow
let arrowY = height; // Y-coordinate of the arrow
let arrowScaleX = 1;
let arrowScaleY = 1;
let arrowWidth = 60;
let arrowHeight = 120;
let targetX = width / 2;
let targetY = height / 2;
let targetRadius = 100;

let started = false;

let bgImg;
let arrowImg;
let targetImg;
let sliderX = width - 50;
let sliderY = height / 2;
let lastScore = 0;
let textOpacity = 0;
let sliderHeight = 0;
let startShootFlag = 0;
let sliderIncrementor = 1;
let sliderTotalHeight = 100;
let startShootThreshHold = 40; //set flex sensor value at which we start for targetting

function allSerialStuff() {
  if (!navigator.serial) {
    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
  }
  // check for any ports that are available:
  serial.getPorts();
  // if there's no port chosen, choose one:
  serial.on("noport", makePortButton);
  // open whatever port is available:
  serial.on("portavailable", openPort);
  // handle serial errors:
  serial.on("requesterror", portError);
  // handle any incoming serial data:
  serial.on("data", serialEvent);
  serial.on("close", makePortButton);
  // add serial connect/disconnect listeners:
  navigator.serial.addEventListener("connect", portConnect);
  navigator.serial.addEventListener("disconnect", portDisconnect);
}

function serialEvent() {
  sensorValue = Number(serial.read());
  console.log(sensorValue);
  //if certain value from flex sensor get passed we get prepared for the shoot
  if (!shooting && sensorValue > startShootThreshHold) {
    startShootFlag = 1;
    sliderHeight = sensorValue + 20; // add 20 to elevate the value we need something in between 0-120
  }
  //if that value again crossed then we shoot
  if (!shooting && sensorValue < startShootThreshHold && startShootFlag) {
    startShootFlag = 0;
    if (!shooting && arrowY == height) {
      shooting = true; // Start shooting
    }
  }
}

// if there's no port selected,
// make a port select button appear:
function makePortButton() {
  // create and position a port chooser button:
  portButton = createButton("Choose Port");
  portButton.position(innerWidth / 2, 10);
  portButton.center("horizontal");
  // give the port button a mousepressed handler:
  portButton.mousePressed(choosePort);
}

// make the port selector window appear:
function choosePort() {
  if (portButton) portButton.show();
  serial.requestPort();
}

// open the selected port, and make the port
// button invisible:
// open the selected port, and make the port
// button invisible:
function openPort() {
  // wait for the serial.open promise to return,
  // then call the initiateSerial function
  serial.open().then(initiateSerial);

  // once the port opens, let the user know:
  function initiateSerial() {
    console.log("port open");
  }
  // hide the port button once a port is chosen:
  if (portButton) portButton.hide();
  makeCloseButton();
  if (closeButton) closeButton.show();
}

// pop up an alert if there's a port error:
function portError(err) {
  alert("Serial port error: " + err);
}
// read any incoming data as a string
// (assumes a newline at the end of it):

// try to connect if a new serial port
// gets added (i.e. plugged in via USB):
function portConnect() {
  console.log("port connected");
  serial.getPorts();
}

// if a port is disconnected:
function portDisconnect() {
  serial.close();
  console.log("port disconnected");
}

// if there's no port selected,
// make a port select button appear:
function makeCloseButton() {
  // create and position a port chooser button:
  closeButton = createButton("Close Port");
  closeButton.position(innerWidth / 2, 10);
  closeButton.center("horizontal");
  // give the close port button a mousepressed handler:
  closeButton.mousePressed(closePort);
}

function closePort() {
  serial.close();
  if (closeButton) closeButton.hide();
}

function preload() {
  bgImg = loadImage("/assets/background.jpg");
  targetImg = loadImage("/assets/target.png");
  arrowImg = loadImage("/assets/arrow.png");
}

function setup() {
  createCanvas(width, height);

  startButton = createButton("Start Game");
  startButton.addClass("start-button");
  startButton.position(innerWidth / 2, innerHeight / 2 + 10);
  startButton.center("horizontal");
  startButton.mousePressed(startGame);

  allSerialStuff();
}

function draw() {
  imageMode(CORNERS);
  image(bgImg, 0, 0, width, height);

  if (!started) {
    drawMenu();
  } else {
    // Draw target
    drawTarget();

    if (startShootFlag) {
      drawSlider();
    }

    //Draw score
    textAlign(LEFT, TOP);
    textSize(26);
    fill("red");

    text("Score: " + score, 10, 10);

    makeShooting();
    drawArrow();
    drawAddedScore();
  }
}

function drawMenu() {
  textSize(48);
  fill("#ff0033");
  textStyle(BOLD);
  textAlign(CENTER, BASELINE);
  text("VR Archery", width / 2, height / 2 - 100);
}

function startGame() {
  if (startButton) startButton.hide();
  started = true;
}

function makeShooting() {
  if (shooting) {
    // Calculate the trajectory towards the target
    let deltaY = height - targetY; // Difference in y-coordinates between arrow and target
    arrowY -= deltaY / 50; // Move the arrow towards the target
    if (arrowScaleY > 0.4) {
      arrowScaleY -= 0.004;
    }
    if (arrowScaleX > 0.4) {
      arrowScaleY -= 0.005;
    }
    // Stop shooting when arrow reaches the target
    if (arrowY - (arrowHeight * arrowScaleY) / 2 <= targetY) {
      shooting = false;

      // Check if the arrow hits the target
      let distance = dist(arrowX, arrowY - (arrowHeight * arrowScaleY) / 2, targetX, targetY); // Calculate distance between arrow tip and target center
      if (distance <= targetRadius - 20) {
        console.log("Hit!");
        arrowSpeed = 0;
        textOpacity = 255;
        updateScore(distance);
        //reset arrow after 2 seconds
        setTimeout(() => {
          arrowY = height;
          arrowScaleX = 1;
          arrowScaleY = 1;
          arrowSpeed = 5;
          textOpacity = 0;
        }, 2000);
      } else {
        console.log("Miss!");
        arrowY = height;
        arrowScaleX = 1;
        arrowScaleY = 1;
        shooting = false;
      }
    }
  } else {
    // Move arrow
    arrowX += arrowSpeed * arrowDirection;
    if (arrowX >= width || arrowX <= 0) {
      arrowDirection = -arrowDirection; // Reset arrow when it goes beyond the canvas
    }
  }
}

function drawTarget() {
  imageMode(CENTER);
  image(targetImg, targetX, targetY, targetRadius * 2, targetRadius * 2);
}

function drawArrow() {
  imageMode(CENTER);
  image(arrowImg, arrowX, arrowY, arrowWidth * arrowScaleX, arrowHeight * arrowScaleY);
}

function drawAddedScore() {
  fill(80, textOpacity);
  text("+ " + lastScore, targetX + 70, targetY - 60);
}

function drawSlider() {
  line(sliderX, sliderY, sliderX, sliderY + 120);
  line(sliderX - 10, sliderY, sliderX + 10, sliderY);
  line(sliderX - 10, sliderY + 60, sliderX + 10, sliderY + 60);
  line(sliderX - 10, sliderY + 120, sliderX + 10, sliderY + 120);
  fill(sliderHeight + 100, 200, 0);
  rect(sliderX - 10, sliderY, 20, sliderHeight);
}

//update score
function updateScore(distance) {
  console.log(distance);
  if (distance < 10) {
    score += 100;
    lastScore = 100;
  } else if (distance < 25) {
    score += 80;
    lastScore = 80;
  } else if (distance < 40) {
    score += 60;
    lastScore = 60;
  } else if (distance < 55) {
    score += 40;
    lastScore = 40;
  } else {
    score += 20;
    lastScore = 20;
  }
}

//handle mouse click event
function mouseClicked() {
  if (!shooting && arrowY == height) {
    //If arrow is not currently being shot
    shooting = true; // Start shooting
  }
}

function windowResized() {
  if (startButton) startButton.position(innerWidth / 2, innerHeight / 2 + 10).center("horizontal");
  if (portButton) portButton.center("horizontal");
  if (closeButton) closeButton.center("horizontal");
}

Arduino Code:

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

void loop() {
  int analogValue = analogRead(A0);
  byte byteToSend = map (analogValue, 0, 1023, 0, 255);
  Serial.write(byteToSend);
  delay(50);
}

The initial idea of this project is a bit different from what I ended up with. The initial idea was designed for two players, each placing one hand on a heart rate monitor. This game uses heart rate data to measure and display the level of affection or excitement between the participants. The faster the heartbeats, the higher the presumed love connection. But after I heard that we’d have to return the items we borrowed from the IM lab I thought it would be better if I order my own two heart rate monitors and solder them myself, then I wouldn’t have to take apart my hard work. With my not-so-good soldering skills I ruined one heart rate monitor and had only one to work with. I had to improvise and solve this issue working with only one heart rate monitor which led to changing the theme of the game a bit. Professor Aaron helped me with coming up with a new game that measures the players Happiness Level by reading their heart rates through the heart monitor. The game was initially supposed to start by pressing on a yellow button but due to time constrains and many other technical difficulties, such as linking the Arduino and the P5 together, I still managed to make it work fine with the keyboard even though I feel like the yellow button gives it more of a “gamey” feel to it which is what I would’ve much preferred.

Arduino Code:

const int buttonPin = 3;      // Pin where the button is connected
const int heartRatePin = A0;  // Analog pin for heart rate sensor

int heartRateValue = 0;
bool buttonPressed = false;

void setup() {
  pinMode(buttonPin, INPUT_PULLUP);  // Set the button pin as input with internal pull-up resistor
  pinMode(heartRatePin, INPUT);
  Serial.begin(9600);
  while (Serial.available() <= 0) {  // on/blink while waiting for serial data
    Serial.println("0,0");
    delay(50);
  }
}

void loop() {
  heartRateValue = analogRead(heartRatePin);  // Read the value from the heart rate sensor
  int bpm = calculateBPM(heartRateValue);     // Convert the analog reading to BPM

  // Read button state
  int buttonState = 1 - digitalRead(buttonPin);

 

  while (Serial.available()) {
  

    int left = Serial.parseInt();

    if (Serial.read() == '\n') {
      Serial.print(buttonState);
      Serial.print("0,50");
      Serial.println(bpm);
    }
  }


  // Always send the current heart rate and button state
}

// Function to simulate BPM calculation - replace this with your sensor-specific calculation
int calculateBPM(int sensorValue) {
  return sensorValue / 10;  // Simplified calculation for demonstration
}

P5.Js Code:

class MainMenu extends Menu {
  constructor(id) {
    super(id);

    this.pos = createVector(width / 2, height / 2.7);
    this.size = 240;
    this.strokeCol = color(
      random(100, 255),
      random(100, 255),
      random(100, 255)
    );
    this.hearts = [];
    for (let i = 0; i < 20; i++) {
      this.hearts.push({ x: random(width), y: random(height) });
    }
    this.random_seed = random(100, 10000); //use for heard animations in the back
    this.heartPos = { x: width / 2, y: height * 2 };
  }

  render() {
    background("#24182e");
    textAlign(CENTER, CENTER);
    textSize(44);
    textFont(pixel_font);
    fill("#8249c6");
    stroke(this.strokeCol);
    strokeWeight(4);

    text("HAPPINESS  LEVEL", width / 2, 50);
    //change strokcol every 20 farmes
    if (frameCount % 60 == 0) {
      this.strokeCol = color(
        random(100, 255),
        random(100, 255),
        random(100, 255)
      );
      this.random_seed = random(100, 10000);
    }
    textSize(30);
    stroke(200, 100, 100);
    push();
    randomSeed(this.random_seed);
    textFont("arial");
    for (let h of this.hearts) {
      for (let h2 of this.hearts) {
        if (dist(h.x, h.y, h2.x, h2.y) < 10) {
          strokeWeight(2);
          line(h.x, h.y, h2.x, h2.y);
        }
      }
      text("♥", h.x, h.y);
      h.x = lerp(h.x, random(width), 0.01);
      h.y = lerp(h.y, random(height), 0.01);
    }
    pop();
    push();
    textFont("arial");
    textSize(160);
    this.heartPos.y = lerp(this.heartPos.y, height / 1.5, 0.1);
    stroke(255);
    fill("#B28CDEAA");
    text("♥", this.heartPos.x, this.heartPos.y);
    textSize(30);
    noStroke();
    fill(255);
    textFont(pixel_font);
    text(
      "PLACE YOUR FINGER ON THE HEART",
      this.heartPos.x,
      this.heartPos.y + 100
    );
    pop();
    noStroke();
  }
}
class GameMenu extends Menu {
  constructor(id) {
    super(id);

    this.heart = new Heart(createVector(width / 2, height / 2.7), 240);
  }

  render() {
    textAlign(CENTER, CENTER);
    textSize(18); 
    background("#24182e");
    fill("#A88DC7");
    text("CHECKING YOUR LOVE LEVEL!", width / 2, height - 30);
    fill("#8249C67C");
    textFont("arial");
    textSize(34);

    for (let i = 0; i < 12; i++) {
      for (let j = 0; j < 8; j++) {
        let x = map(i, 0, 11, 0, width);
        let y = map(j, 0, 7, 0, height);
        if (frameCount % 40 < 20) {
          if (i % 2 == 0 || j % 2 == 0) {
            text("♥", x, y);
          }
        } else {
          if (i % 2 != 0 || j % 2 != 0) {
            text("♥", x, y);
          }
        }
      }
    }

    this.heart.render();
  }

  update() {
    this.heart.update();
    // Removed the timer decrement and check
  }

  reset() {
    this.heart = new Heart(createVector(width / 2, height / 2.7), 220);
  }
}
class EndMenu extends Menu {
  constructor(id) {
    super(id);

    this.finalScore = null;

    this.hearts = [];
    for (let i = 0; i < 2; i++) {
      this.hearts.push({ x: random(width), y: random(height) });
    }
    this.random_seed = random(100, 10000); //use for heard animations in the back
  }

  render() {
    background("#24182e");
    push();
    stroke(200, 100, 100);
    randomSeed(this.random_seed);
    textFont("arial");
    textSize(34);
    for (let h of this.hearts) {
      for (let h2 of this.hearts) {
        if (dist(h.x, h.y, h2.x, h2.y) < 100) {
          line(h.x, h.y, h2.x, h2.y);
        }
      }
      text("♥", h.x, h.y);
      h.x = lerp(h.x, random(width), 0.01);
      h.y = lerp(h.y, random(height), 0.01);
    }
    if (frameCount % 60 == 0) {
      this.random_seed = random(100, 10000);
    }
    pop();

    fill("#A88DC7");
    stroke(255);
    textFont(pixel_font);
    textSize(60);
    textAlign(CENTER, CENTER);
    text("THANK YOU !", width / 2, 160);
    noStroke();
    textSize(24);
    // text(
    //   `${this.finalScore}\n\nYOUR COMPATIBILITY SCORE`,
    //   width / 2,
    //   height / 1.5
    // );
    //     push();
    //     noStroke();
    //     fill(0);
    //     rect(0, 0, width, height);

    //     fill(255);
    //     textStyle(BOLD);
    //     textAlign(CENTER, CENTER);
    //     textSize(96);
    //     text("GAME OVER", width / 2, height / 4);

    //     textSize(40);
    //     text(`COMPATIBILITY SCORE: ${this.finalScore}`, width / 2, height / 2);

    //     textStyle(NORMAL);
    textSize(16);
    text("TRY AGAIN?", width / 2, height - 60);
    text("Yes", 100, height - 60);
    text("No", width - 100, height - 60);
    push();
    textFont("arial");
    pop();

    //     textSize(40);
    //     text("YES? OR NO?", width / 2, 640);

    //     pop();
  }

  reset() {
    this.finalScore = null;
  }
}

 I’m content with the final product despite getting extremely sick two days before the showcase while having other final projects due the day before it. For future improvements I’d like to incorporate my initial idea and also add a different game mode, Lie Detector Mode, which sounds fun to make with using the heart rate monitor. Overall, I feel like I got exposed to many things in this course which makes me much more comfortable with the things we’ve been working with during the entirety of this semester. I’d also like to thank professor Aaron for being extremely patient and helpful with me 🙂