week11.assignment – Final Project Ideas


When we first began working with the Arduino, I was excited about all the possibilities that arose for my final project. Additionally, I found working with Arduino quite intuitive and am hoping to implement unique features for the final project. As of now, there are two main ideas that I have in mind.

Idea 1 – Virtual Arcade with a Twist

My first idea for the final project revolves around creating a virtual arcade, using P5, and implementing the control for the minigames using analog and digital sensors with Arduino. The p5 sketch would present a virtual arcade with at least two or three different minigames that you would be able to select using a physical component, for instance, a button with an arrow right to highlight the object on the right or left and vice-versa. Once the player decides on what game they would like to play by pressing the select button (digital switch), the game screen would change to that of the selected minigame. As of now, I have two interesting and unique ideas for the minigames. The first is a game where a character has a jetpack and is stuck in a box. Randomly, different objects will be generated and move horizontally at different speeds. The character will be controlled by a sound level meter, and the louder the input of the player, the higher the character will float on the screen. Each object avoided is 1 point. After the player dies, the score will be saved as a high school and displayed for other players to try to beat. The next minigame idea I have is to create a Wack-a-Mole but with a twist. In this version of the game, there will be an array of digital switches and LEDs above them. However, every round, two of the buttons will light up, with different colors. This would make the game more challenging as the person would have to press the button with the correct color. If the player presses the button which has a different color, then a point is deducted from the score.

Idea 2 – Unique Controller

My first idea might take a lot of time to fully implement, and if that were the case, then my other idea would be to create just one game that would rely on the input of a unique control. This idea was inspired by the lack of innovation that I have noticed when it comes to gaming console controllers. Evidently, the current controllers are popular because they are ergonomic and intuitive. However, I believe that it would be interesting to explore and try to create a unique controller that relies on different inputs for controlling a game. One such unique controller could be a special glove that uses flex sensors to determine the bending of finders in a hand. A game that could go well with this would be a Plants vs. Zombies type of game, in which a character can be controlled to move on the vertical axis and could shoot projectiles to stop the incoming enemies from reaching the other side of the screen, which would result in a loss of health points. Additionally, the game would have waves of increasing difficulty, in which the enemies would move faster, and there would be more enemies in total. The hand controls for this game would involve bending your fingers into different positions, which would indicate movement and actions for the game.

Possible Challenges

For my first idea, I believe the main challenge would be time and physically constructing the different sensors and interfaces for the minigames. Even though I am confident this idea is possible to implement, I am not too confident about the amount of time that I have to make it happen. This makes me lean towards implementing my second idea. For the second idea, I believe the biggest challenges would be ensuring the accuracy of the flex sensors and creating a well-designed glove for the control of the game, as well as ensuring that the gesture recognition works well. As I am writing this, I have also realized that a glove-like controller, like the one I would like to make, could be used as a translator for sign language. This implementation, of course, would also require additional elements such as an accelerometer and extremely precise readings from the flex sensors; however, this could be a unique opportunity for a future project.

Week 11 : Assignment (Mudi & Mariam)


Exercise 1

In this exercise, a potentiometer connected to an Arduino has been employed to influence the horizontal movement of an ellipse in p5.js. As you turn the potentiometer, the ellipse smoothly moves from side to side.

Exercise 2 :

Concept: Controlling the brightness of an LED using a slide bar in p5js

The left side of the slide bar (owl) will dim the brightness of the LED and the right side of the slide bar (sun) will make the LED brighter. We used the PWM pin 5 for the LED
a 10 K ohm resistor and two jumper wires to make the connection

code :

let brightness = 0; 
let slider;
let img;

//preload images to make sure everything is loaded before initializing the rest of the code
function preload(){
  img= loadImage('sun.png');
  img2 = loadImage('owl.png');
function setup() {
  createCanvas(400, 400);
  //create slider
  slider = createSlider(0, 255, 100);
  slider.style('width', '80px');
function draw() {
  let val = slider.value();
  brightness = val;
  // instructions
  text("Controling the brightness of the LED using the slider ",width/2,100);
  //connects the serial port
  if (!serialActive) { 
    text("Press Space Bar to select Serial Port", 100, 30);
  } else {



Week 12: Final Project proposal and design documentation

Finalized concept for the project:

I am making a “Crack The Code Safe Game” for my final project. In this game, the user will try to open a locked safe while “guessing the digits from a given hint”.

Game Interface Design:

Design and description of Arduino and P5 program:

The program will use servo motor to lock and unlock the safe box.

Arduino will receive 3 digits of random code from p5, when the game starts and the servo motor locks the safe box.

The user is able to enter the digits using potentiometer and button to enter the code for the safe. Turn the potentiometer to choose the digits from 0-9 and press the button to enter the digit. Arduino receives the user input and sends it to p5, which prints the message if the code is wrong or not. If the code is correct the safe opens – servo motor unlocks the safe.


Week 12 – Final Project Idea Proposal, Design & Description

Concept Breakdown:

My idea for the final project will be an interactive glove: a innovative physical way of interacting with the computer. In this glove, we will be able to use certain hand gestures to send input to our Arduino and later on, our computer.  In order to comply with the hardware limitations and time restrictions, I will not utilize the glove as a mouse, as the use of a trackpad will require utilizing a board different than Arduino Uno (For example, the Arduino Micro, Pro Micro or Leonardo).

The Hand Gestures:

The hand gestures utilized will require touching the border of the palm (the other side if we check our knuckles) of our hand with a finger, regardless of which one we decide to use. Try it. Some people will be able to use it with one hand, some people will not. his means we will be able to use either the fingers in the same hand or the other hand. How does this work?

The user will use either one hand or both to control the input, which will be similar to a binary system: 0001. In this case, what we do is utilize the border right under every finger except for the thumb as one of the spaces for the input. This means that touching every part of the palm in different combinations will hold a different output (or input, from the Arduino’s point of view).

This leaves us with 2^4 different combinations that we can map to certain keyboard inputs because remember, a touchpad/mouse-style input requires a different board and honestly, many more inputs.

The Arduino Circuit and Design:

The circuit design is simple but effective. The idea will be to connect cables from the Arduino ports to the border of the palm. By connecting 5v current to all our fingertips, what we will be able to do is effectively create an array of switches that will trigger on our touch. We will attach all the necessary cables to the glove and cover the exterior to avoid disconnections and other problems.  Important to note that we will have to be aware of possible delays and misinputs, as it is a form of physical input.

Interactive Gloves : 8 Steps (with Pictures) - Instructables

The P5js sketch:

The P5js Sketch will be a way of demonstrating the inputs of the glove. We will utilize many of the previous projects we have done, such as the piano, the bouncing ball, the musical instrument and other little games in order to show the public that it is possible to control the input differently.

The Connection:

As much as the communication between p5js and Arduino should be obvious at this point, we will compute the inputs in the circuit before sending a single “key” input to p5js. This means that we have no delay in terms of the computation nor we will need to send more information than necessary. A great addition would be also for p5js to send a response to Arduino. For example, the piano could have its output coming from a speaker.

Week 12 | Final Project Proposal

Finalized Concept:

I really love cars and driving, which is why I’m super excited about creating a car for my final project. My solidified idea is to build a remotely controlled car using p5.js. The main goal is to replicate the experience of driving a manual car by providing complete control through the p5.js sketch.
In this project, I plan to incorporate a webcam, giving users a live video feed in the sketch that mimics a car window. This way, it feels like you’re actually inside the car while controlling it remotely. The sketch will also feature a gear stick, allowing users to adjust the speed as if they are accelerating in a real car.
The cool thing about this project is that it aims to seamlessly bring in a webcam, providing users with a live visual experience on p5.js. This goes beyond physical boundaries, allowing for easy remote control, even if the car is far away. I’m also thinking of adding a distance sensor to enhance safety by alerting users about potential collisions.
Here’s a basic visualization of what the sketch might look like initially:

Arduino Program:


  1. Distance sensor sending distance values to the P5JS to check for possible collisions.


  1. Motors rotating wheels based on the received instructions from P5JS.
  2. Leds turning on/off based on the received instructions from P5JS.

Also, I have designed an initial circuit for controlling the four wheels of the car:


P5JS Program:


  1. Gear value that changes the maximum speed of the car.
  2. Keyboard controls that move the car.


  1. Road view stream of the car displayed using a webcam covered by a car window as shown in the following figure.

    A car in my dorm
  2. Alert triggered when the distance from the car becomes less than a certain threshold.

Perhaps additional elements will be incorporated as I progress through the implementation process.

Week 12 – Final Project Description


I want to make a Mastermind game, which is a two-player board game where one person is the code maker, and they make a code using colored pegs. The other person is the code breaker, and they have to figure out the code in a limited number of moves. The less moves you take to figure out the code, the higher you score.

Mastermind - Code Breaking Game – Kubiya Games


Originally, I was going to have wooden floats that would complete a circuit through conductive water. However, thinking that would make a mess and potentially be hazardous due to being close to electronics, I switched to using LDRs and LEDs to detect different colors.

The structure will be made using wood of the following dimensions:

I want it to be an enclosed box, so that the readings on the LDR are stable. My idea is that I can use LEDs of different colors, and different brightnesses to “detect” color, and then use that as input for the Mastermind game built in P5Js.

Arduino to P5Js Communication

The pegs will be the interface of communication, and placing a colored peg into one of the holes should communicate what color the peg is at the respective position. The sensor values that are measured are LDR readings, but I do not want to transmit raw sensor values. Instead, I will do the checks to figure out what color the peg is and in what position within Arduino. Then, I want to transmit the respective color positions to Arduino in the form of a code. There are 4 positions, and 5 colors. So, there are 6 options for each position, including having no peg. Therefore, I will generate a 4-digit code with digits 0-5, and that is what will be sent to P5Js.

Also, I want to add a button that is used to confirm the code selection. To convey that information, I can include a fifth digit in the code, with a 0 or a 1 to represent whether or not the button has been pressed. Any extra checks, like prevent the button from clicking more than once in a certain timeframe, will be processed within P5Js, so that communication is simplified.

P5Js to Arduino

Since my project is centered around an interesting control interface, there is nothing that I want to send from P5Js to Arduino, as the Arduino side is a game controller. Unless there needs to be some sort of syncing that needs to be done, which I don’t expect, there will be no communication back to Arduino from P5Js.

Week 11 Exercises


(Mudi & Mariam)

Exercise 1

In this exercise, a potentiometer connected to an Arduino has been employed to influence the horizontal movement of an ellipse in p5.js. As you turn the potentiometer, the ellipse smoothly moves from side to side.

Exercise 2 :

Controlling the brightness of an LED using a slide bar in p5js

The left side of the slide bar (owl) will dim the brightness of the LED and the right side of the slide bar (sun) will make the LED brighter. We used the PWM pin 5 for the LED
a 10 K ohm resistor and two jumper wires to make the connection


Arduino Code:

int redled = 5; //PWM PIN
void setup() {
  pinMode(redled, OUTPUT);
  // initializing handshake
  while (Serial.available() <= 0) {
    Serial.println("a moment");  
    delay(200);               // wait 1/2 second
void loop() {
  // wait for data to load from p5 before continuing code
  while (Serial.available()) {
    int brightness = Serial.parseInt(); 
    if (Serial.read() == '\n') {
      analogWrite(redled, brightness); // turn on LED and adjusts brightness


Design Meets Disability Reading Reflection

Reading this book section, something that catches me is about glasses. Before it never occurred to me that glasses were used instead of worn. They were so common that I forgot they were for disabilities in the eyes. Also, the design for glasses right now focuses more on aesthetics than practicality. It has come to the point that some people wear fake glasses that don’t really do anything because it makes them look better. It is interesting to see how this can be applied to hearing aids or even prosthetics. However, I think this is unlikely to be the case. I believe that this transition from a tool to a fashionable decoration is not replicable for other tools used to address disabilities. Apart from simply being something to fix disabilities, glasses also suggest that the person is smart or knowledgeable because reading a lot makes people’s eyesight decrease. But for other prosthetics or disability aids they do not suggest such meaning. others might even say they are being careless. Therefore subconsciously, people will not think having such things is good, and thus have negative feelings about it no matter how fashionable they are.

As mentioned later, the iPod part also was very interesting. The author used the iPod to demonstrate appliances. However, I think the iPod is just a product that got stuck between sound quality and portability. For the sound quality, the iPod is obviously not even close to as good as other big professional speakers and stuff. For portability, it is just a tiny bit smaller in size compared to that of a cell phone. Therefore I think this product is not successful and cannot be used as an example of a successful appliance. Maybe only mentioning cutlery would be better:)

Final Project Draft 1: Dodge it!


For my final project, I pursued my initial idea and created a game that utilizes the ultrasonic sensor. The ultrasonic sensor will measure the distance from my hand and project that distance onto a ball’s horizontal position in p5. The ball can move left and right according to our hand movement. Multiple red rectangles are falling from above, and our job is to dodge them using our hands. There are also blue rectangles that spawn less frequently compared to the red ones. There is also a scoring system in which the score decreases by one after every frame, and hitting the red rectangles decreases the score by 2. Grabbing the blue rectangles that spawn less frequently is the only way to get a higher score. So the game becomes a fight against time and obstacles. As the score changes, the speaker that is connected to the breadboard also produces a different tone. Each score has its own unique tone produced by the speaker to make the game more engaging and fun. Therefore, this is a 2-way communication game, from p5 to Arduino and Arduino to p5.


Arduino will basically send the distance measured using the ultrasonic sensor to p5.Js. The Arduino side of the code will receive a score value from the p5. Arduino will input the echo pin(from ultrasonic sensor reading)  and outputs both the trig pin(from ultrasonic) and speaker pin(value received from p5).

Here is my code for it so far:

const int trigPin = 11;
const int echoPin = 12;
const int speakerPin = 9;

void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch

  // Outputs on these pins
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  pinMode(speakerPin, OUTPUT);

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

void loop() {
  // sends a short pulse of ultrasonic sensor and waits a bit then receives it 
  digitalWrite(trigPin, LOW); 
  digitalWrite(trigPin, HIGH); 
  digitalWrite(trigPin, LOW); 

  // Time it takes for the pulse to travel back from the object long 
  int duration = pulseIn(echoPin, HIGH); 
  // Universal conversion of time into distance in cm 
  int distance = duration * 0.034 / 2;


  int score = Serial.parseInt();
  // Map the score to a frequency for the speaker
  int frequency = map(score, 0, 100, 100, 4000);
  // Play the tone
  tone(speakerPin, frequency);

The Arduino board:


For the p5 side of the code, the p5 will receive the distance value measured from Arduino and map it onto the canvas. The p5 will also send a live score value to Arduino. There are multiple classes to my p5 code: ball class, Obstacle class, TimeRectangle class, a class for the port connection, and finally the main sketch.

This is my attached main sketch class:

//Initialize all variables
let knobValue = 0;
let targetKnobValue = 0;
let easing = 0.08; // Adjust this value for the desired level of smoothing
let score = 0;
let lastFrameCount;

//initialize the class objets
let obstacles = [];
let timeRectangles = [];
let ball;

function setup()
  createCanvas(400, 300);
  //call the ball object
  ball = new Ball(width / 2, height - 30, 20);
  //line of code to set lastframe to the new one
  lastFrameCount = frameCount;

function draw() {
  //set background

  //if function to connect port 
  if (!serialActive)
    text("Press Space Bar to select Serial Port", 20, 30);
  //else function if the port is connected
    // lerp function linear interpolates(smoothes the value we get from arduino using distance sensor)
    knobValue = lerp(knobValue, targetKnobValue, easing);
    //updates ball position according to distance sens

    // Draw ball

    // Draw and move obstacles
    for (let i = obstacles.length - 1; i >= 0; i--) {

      // Remove obstacles that are off-screen
      if (obstacles[i].offscreen()) {
        obstacles.splice(i, 1);
      } else {
        // Check for collision with the ball
        if (obstacles[i].collision(ball)) {
          // Handle collision (e.g., decrease score)
          score= score-2;
          obstacles.splice(i, 1); // Remove the obstacle

    // Draw and move timeRectangles(blue ones)
    for (let i = timeRectangles.length - 1; i >= 0; i--) {

      // Remove timeRectangles that are off-screen
      if (timeRectangles[i].offscreen()) {
        timeRectangles.splice(i, 1);
      } else {
        // Check for collision with the ball
        if (timeRectangles[i].collision(ball)) {
          // Handle collision (e.g., increase score)
          score += 5;
          timeRectangles.splice(i, 1); // Remove the timeRectangle

    // Print the current knobValue
    text('Knob Value: ' + str(knobValue), 20, 30);

    // Display score
    text("Score: " + score, 20, 60);

    // Spawn new obstacles and timeRectangles randomly
    if (random() < 0.01) {
      obstacles.push(new Obstacle());
    if (random() < 0.005) {
      timeRectangles.push(new TimeRectangle());
       // Update the score every second by subtracting current frame with last frame recorded in setup
    if (frameCount - lastFrameCount >= 60) {
      score = max(0, score - 1);
      lastFrameCount = frameCount;

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!

function readSerial(data) {

  if (data != null) {
    // Parse the data received from Arduino
    let fromArduino = split(trim(data), ",");
    targetKnobValue = int(fromArduino[0]);

  let sendToArduino= score + "\n";

The P5 interface:

Future improvements:

As of now, I just put down the main codes and functions for both platforms. I will have to work more on the visuals, designs, and aethstics side as a whole of the p5 game.