Month: November 2024

Concept

I decided to proceed with my preliminary idea and develop it further. I chose five specific symbols that I will focus on in my project: Mount Ararat, the Armenian rug, lavash (Armenian bread), the duduk (Armenian flute), and the pomegranate.

The project will be divided into five different sections (or elements) that users can explore by clicking the corresponding icon in the p5.js sketch.

Customize Your Armenian Wall Rug:
No Armenian home is complete without a rug on the wall. In this section, users can create their own personalized wall rug by interacting with physical buttons. There will be two buttons: one for switching the patterns and another for fixing them on the rug. When the first button is pressed, patterns will chaotically move and bounce around the rug in the p5.js sketch until the “stop” button is pressed.

Lavash Tonir Simulation:
A tonir is a traditional clay oven used for baking lavash. This section allows users to “bake” their own lavash. By covering the light sensor with their hand, users simulate pulling lavash from the tonir on the digital display. Each time the light sensor is covered, a newly baked lavash piece will be placed on the table, stacking one on top of the other.

Breathing in Ararat:
Everyone in Armenia dreams of having a view of the legendary Mount Ararat from their home. However, even when the view is clear, Ararat is often covered by clouds. In this section, users can clear the clouds by blowing on a 3D-printed mountain. A DHT11 sensor will detect breath through changes in temperature and humidity. This sensor was chosen because, unlike sound-based detection, the DHT11 measures subtle shifts, ensuring precise breath recognition.

Virtual Duduk Experience:
The duduk is an iconic Armenian musical instrument traditionally made from apricot wood. This interaction is heavily based on the p5.js sketch: pressing virtual holes on the duduk triggers sounds from three piezo buzzers connected via Arduino.

Heartbeat-Responsive Pomegranate:
Inspired by Sergei Parajanov’s cinematic masterpiece The Color of Pomegranates (1969), this element allows users to discover their “pomegranate color” based on their heartbeat. Data from a heartbeat sensor will be shown in the p5.js sketch as a color-changing pomegranate, with each heartbeat value generating a unique RGB combination.

Progress

I have designed a rough sketch of how the project will look both on the Arduino circuit and in the p5.js sketch (see below).

As mentioned in my preliminary idea documentation, I plan to create a map within the p5.js sketch to help users navigate through all five elements. The icons will be clickable only in the p5.js interface, leading users to each element’s page, which will include a brief description with interesting facts about the symbol and interaction guidelines.

The physical layout of the elements on the Arduino side will visually resemble the map in the p5.js sketch. To conceal the circuit and sensors, I will build a wooden box that covers everything except the LEDs and buttons. For aesthetic purposes, I will cover the box with a piece of fabric. Additionally, I will place a 3D-printed mountain on the box (with a small hole at the top for the sensor) to make it more intuitive for users to “blow” on it.

Concept

I have decided to work on the idea that I initially proposed, but with several alterations that will allow to focus on the idea of the distorted image. The glasses will be asymmetrical, with one square and one oval frame, and two lenses will be changing the eye size in different ways – one making it smaller (for myopia) and the other one making it larger (for hyperopia). The web camera will be projecting an image of the eye area of the user on the screen with the p5.js code, where the eyes will be changing their size and moving, creating almost a hypnotising performance accompanied by the audio coming from the glasses.

Arduino

Electronic components, piezo buzzers, will be embedded into the temples of the glasses so that they act as speakers that allow the user to hear the melody clearly. The buzzers will be connected to the Arduino using wires, and the plate will be hidden in a 3D printed eyeball that the user can hold.

p5.js

Using a library WebGazer.js, I will be tracking the eyes of the user and showing a representation of them on the screen. The image of both eyes will be changing on the screen, creating a likeness of a mandala ornament, which will be done by defining the movement of the eye image extracted from the web camera.

Progress

I have discovered several examples of other projects on p5.js where the creators used the same library and came up with various ideas of working with the image of eyes and the gaze tracking. This allowed me to understand the logic of working with this library and possible application to my work.

Concept

I decided to settle with creating a simple robot for the final project. My idea was inspired by a robot waiter in one of the restaurants I visited back home. I found it cool how one can come up with such a thing and it pushed me to try and emulate it. I will be creating a simple robot that moves around on command of the user. The robot will be able to do a simple dance, spin around with the hands moving up and down, when the user commands it to. I would also like to have the robot to be able to do simple writing and also measure distance and give feedback to the user.

Arduino 

The Arduino will be the basis of the project as it will be getting input from p5 to move the robot. The robot is powered by four Arduino controlled DC motors which respond to inputs from p5 to move the robot. Additionally, there are two servo motors to control hand movements of the robot. I will also include a distance sensor that will allow the robot to read distance from objects and send the value to p5 for the user. I will also have LED lights which will represent the eye of the robot.

P5

I was conflicting on what my p5 would do but I settled on using the ML5.js Handpose to enable the user control the robot using their hands. Since I will also have two modes, one for moving the robot and one for drawing using the robot, I intend to have it that on the draw mode the robot can write on a white board and p5 can give a visual representation of what the robot is drawing. On the moving mode the p5 will be taking input from the user and sending it to Arduino to control the robot.

Progress

So far I have been able to make the base which is the wheels controlling the movement of the robot. I have also added the servo motors that will control the hands. I want to create a solid base that will hold the components and make the robot aesthetic. I also want to 3D print a body for the robot but I am yet to do that.

 

Concept:

This project is a Punching Bag Game that combines physical activity with digital feedback and humor. Players aim to achieve the highest punch strength and combo streak, all while enjoying dynamic visuals and memes in the P5.js interface based on their performance. A wooden control box houses an LCD, LEDs, and an arcade button, while the P5.js visuals make the game fun and engaging with score-based meme displays.

How to Play the Game:

1. Start the Game:
   • Press the arcade button on the wooden box to begin.
   • The game resets all scores and displays “Game Start” on the LCD and P5.js interface.
2. Punch During the Green Light:
   • Wait for the green LED to light up and the P5.js display to say “Punch Now!”
   • Punch the bag as hard as you can during this phase.
   • If you punch during the red light, it won’t count, and your combo streak resets.
3. Score Points:
   • Your punch strength determines the points added to your score.
   • Achieve combos by landing consecutive valid punches.
4. Watch for Memes:
   • As your score increases, P5.js will display funny memes tied to your performance
5. End of Game:
   • After a set time or when the player stops, the LCD and P5.js show your final score and highlight your best streak.
   • Press the arcade button to restart.

Hardware Components:

1. Accelerometer sensor (MPU-6050):
   • Measures the strength of punches by detecting acceleration on X, Y, and Z axes.
   • Attached to the back of the punching bag
   • Sends punch data to the Arduino for calculation and updates.
2. 16×2 LCD Display:Shows:
   • Game Status: Displays “Punch Now!” or “Wait…” depending on the phase.
3. LEDs:
   • Green LED: Indicates when the player can punch.
   • Red LED: Indicates when punching is not allowed.
   • LED STRIP: showing the power of the punch for asthetics( like a fuel bar)
4. Arcade Button:
   • Resets and starts the game.
5. Wooden Box:
   • Organizes all components in a neat, arcade-style housing.

Arduino Program:

Inputs:

• Accelerometer: Detects and calculates punch strength.
• Arcade Button: Starts and resets the game.

Outputs:

• LCD Display: Shows punch strength, score, and game state.
• LEDs: Indicates when the player can punch or must wait.
• Serial Communication: Sends punch data and game updates to P5.js.

 P5.js Program:

Inputs (from Arduino):

1. Punch Strength:
   • Dynamically fills a power bar and displays the strength numerically.
2. Game State:
   • Updates the screen with “Punch Now!” or “Wait…”.
3. Score & Combo Streak:
   • Updates the scoreboard in real-time.

Outputs (to Arduino):

1. Start Signal:
   • Resets the game and all scores.
2. Difficulty Setting:
   • Adjusts thresholds (e.g., punch strength required to score)

Visual Features:

1. Scoreboard:
2. Tracks current score, best score, and combo streak.
3. Punch Strength Visualizer:
4. Memes Based on Performance
5. Aesthetic designs aracde like

Sound:

I will have sound effects playing from p5 to have on my laptop rather than on the Arduino board.

I still havent created the code due to me changing my whole concept and idea. However, I have the dimensions of the box created using Markercase. As for the setup on the Arduino Board, I did test the components ( LCD, LED etc) however, I didn’t have the sensor or LED strip with me at the time, so I have to re-do it with these included.

 

 

 

Finalized Concept for the Project

For my final project, I will create Goal Rush, which is a football reaction game where the player acts as a goalkeeper in a penalty shootout. The goal is to save as many penalty shots as possible by reacting to random signals. The project uses a physical setup with three buttons and corresponding LEDs to simulate the direction of the ball (left, center, or right). Each button press simulates the goalkeeper’s dive to save the ball.

The buttons, LEDs, and game logic are connected to and managed by an Arduino. The Arduino communicates with a p5.js program, which mirrors the physical gameplay with a digital goalpost, goalkeeper, and ball animations. The LEDs light up to signal where the ball is “shot,” and the player must press the corresponding button to save the goal. The correct press sends a signal to p5.js, making the goalkeeper dive in the corresponding direction. If the player reacts too late or presses the wrong button, the ball goes into the net, and a missed goal is recorded.

Arduino Program Design

1. Buttons:
   • Button 1 (Left):
     • Connected to digital pin 2.
     • Represents the goalkeeper diving to the left.
   • Button 2 (Center):
     • Connected to digital pin 3.
     • Represents the goalkeeper staying in the center.
   • Button 3 (Right):
     • Connected to digital pin 4.
     • Represents the goalkeeper diving to the right.

What It Does:
Each button, when pressed, sends a signal to the Arduino. The program identifies which button was pressed and determines if it corresponds to the lit LED.

1. LEDs:
   • LED 1 (Left):
     • Connected to digital pin 5.
     • Lights up to indicate the ball is being “shot” to the left.
   • LED 2 (Center):
     • Connected to digital pin 6.
     • Lights up to indicate the ball is being “shot” to the center.
   • LED 3 (Right):
     • Connected to digital pin 7.
     • Lights up to indicate the ball is being “shot” to the right.

What It Does:
The LEDs are controlled by the Arduino to light up randomly, signaling where the ball is heading. This gives the player a cue for which button to press.

1. Wires:
   • Signal Wires: Connect each button and LED to their respective digital pins on the Arduino to transmit input and output signals.
   • Power Wires: Connect all components to the Arduino’s 5V and GND pins to ensure proper power supply.

Arduino Program Workflow:

1. Random LED activation:
   • The Arduino randomly selects one of the LEDs (left, center, or right) to light up, signaling the ball’s direction.
   • A small delay allows the player time to react.
2. Button Monitoring:
   • The Arduino continuously checks the state of the buttons using digitalRead.
   • If a button is pressed, the Arduino determines whether it matches the lit LED:
     • Match: Sends a success signal (-1, 0, 1 based on the button pressed) to p5.js.
     • Mismatch or No Press: Sends a failure signal to p5.js.
3. Serial Communication:
   • Sends the button state (-1, 0, or 1) and save/miss result to p5.js, where the digital game is updated accordingly.

p5.js Program Design

1. Digital Goalpost:
   • Displays three zones (left, center, right) where the ball can be shot.
2. Digital Goalkeeper:
   • Moves left, center, or right based on data received from Arduino (-1 for left, 0 for center, 1 for right).
3. Ball Animation:
   • A ball is animated to travel toward one of the three zones, matching the lit LED in the physical setup.
4. Scoreboard:
   • Tracks successful saves and missed goals.
5. Game Timer:
   • Limits the game duration and increases difficulty by speeding up the ball animations over time.

p5.js Program Workflow:

1. Input from Arduino:
   • Receives data from Arduino indicating which button was pressed and whether it was correct.
   • Updates the goalkeeper’s position (left, center, or right) based on the button data.
2. Random Shot Generation:
   • Randomly determines the ball’s trajectory (left, center, or right), mirroring the Arduino’s LED activation.
3. Collision Detection:
   • Checks whether the goalkeeper’s position matches the ball’s trajectory when the ball reaches the goal:
     • Match: Displays a save animation and increases the score.
     • Mismatch: Displays a missed goal animation.
4. Visual Outputs:
   • Updates the digital display to show the ball’s movement, the goalkeeper’s dives, and the game’s score and timer.

Concept & Progress

I’ve decided to change my initial idea with “physicalizing” my midterm project, cause I didn’t really think thoroughly of how would I completely change my initial workings. Therefore, I thought it would make more sense and it would give me more freedom and creativity, if I hit a fresh start.

I’ve stopped on the idea of recreating Kazakh cultural experience of sitting at the Dastarkhan (feast in Kazakh). Being a way from home, you naturally miss the traditions and rituals that your family used to follow for many years. Therefore, I wanted to somehow transfer this experience in physical and digital settings. I will create a physical model of the room with a Dastarkhan to inform people about our culture. This project will take not only emotional experience, but most importantly informative educational one. People of other nationalities will be able to learn about different table traditions and norms by interacting with a physical model of the Dastarkhan and also with the screen in p5, which will guide the user through these interactions and will complete them.

Here are the sketches that I’ve made to outline my project:

I’m going to be using cardboard to build the walls of the room. The main focus of this room is the table or Dastarkhan at the center, which I will laser cut from acrylic sheet and then cover with the texture of wood material, or I will use wood itself.

As you can see in physical model sketch, there are many components, let me explain all of them, which will be modes of interactions:

• Around the Dastarkhan there will be cloths, which will represent Korpe (Kazakh blankets). I’m planning to put buttons among those at specific points around the table to show different seatings and their meanings in Kazakh culture. So, by pressing at specific buttons, there will be a tab with explanation of specific seating appearing in p5.js
• I want to create a chandelier from LED lights. I want the turning on and off of the lights to be controlled with the Generic PIR Motion Sensor. In that way I want to signify that most importantly person’s presence highlights the Dastarkhan.
  
• Then, I will use flex sensors to introduce users to Kazakh musical instrument – Dombyra (You can see it hanging on the left wall). By flexing the strings of the Dombyra, users will initiate a video on p5 with prerecorded Dombyra performance, hence the sound will be introduced to this experience.
• There is also an LCD. I am going to ask the user to choose one of the offered holidays in the p5, which then will translated to LCD in physical model. In that way I want to encourage user’s awareness of different Kazakh holidays and overall appreciation of the feasts in Kazakh culture.
• And there is also a pulse sensor. I introduced it to reflect how important this culture of sitting at the Dastarkhan with a family is important to me. When the sensor will start tracking the values and sending it to p5, I want photos of my family and how we meet up on Dastarkhan to show up on the screen, so it would create a warm feeling in users (hopefully)
  
• Lastly, all of this will be connected by the p5 screen that will guide the user through this journey step by step by having 5 levels to complete the full experience. P5 will give specific directions to the user, like press the buttons and it will provide user with educational content on culture. There would be a progress bar in p5 to have a gamification element to this experience.

To summarize inputs an outputs
Arduino to P5:

• Buttons: Low or High
• Flex Sensors: 0 to 1023
• Pulse sensor: ~60 bpm

P5 to Arduino:

• LCD: string value (holiday name)

Concept

The plan for my final project is to create a pet cat experience. For someone who loves cats but was never fortunate enough to be blessed with one because her mother dislikes the idea of having a cat in the house, I want to take this opportunity to give those who are in the same situation like myself to experience the joy of having a cat, without upsetting their mothers.

The cat will be built from cardboard, and it will have a collar in which the user can choose a name of their liking to be displayed on the collar. Cats love pets and users will be able to pet the cat and have it meow or purr in content.

When you extend your hand towards the cat, the cat will give you its paw and hand you a “gift”. This act of gift giving from a cat is “an expression of affection and trust” which “shows they value your companionship and consider you part of their social group.” (Cited from here)

However, the “gifts” the cats bring can range from random toys, to dead animals. This will be reflected in the P5.js sketch wherein every time a user extends their hand, the cat will give them a new “gift”.

I hope this cat will provide comfort for cat lovers like me, or even turn non-cat lovers into one!

Arduino

Ultrasonic Sensor and Servo Motor
The ultrasonic sensor will be placed on the side of the cat, under one of the cat’s paws that is raised. The reading from the ultrasonic sensor is used to calculate the distance of the hand from the cat. If the distance is smaller than a certain threshold, this triggers the servo motor to turn which causes the cat’s paw to lower and touch the user’s hand. Once the hand is lowered, it triggers the display of the randomized object the cat will hand to the user on the P5 sketch.

Pressure Sensor
The pressure sensor will be placed on the cats head, so that when a user pets the cat, this pressure is recorded. This will then trigger the sound of a cat’s meow to play from P5.

P5

LCD Screen
The P5 sketch will prompt the user to fill in an input box to give the cat a name of their choosing. This name will be sent to the Arduino to be displayed on the LCD screen which will be placed on the cat’s neck, like a collar.

Progress

So far, I have developed a test run code for the communication between Arduino and P5, in terms of the pressure sensor, ultrasonic sensor, servo motor, and LCD screen. In this testing sketch, the pressure reading affects the background color of the sketch.

Arduino code

P5.js code of testing sketch

I have also started developing the interface of the final sketch on a separate P5 sketch. So my next step is to further develop the final P5 sketch and then incorporate the code I developed in the testing sketch into the final one. I will also have to build the actual cat from cardboard.

 

Project Concept: Interactive Cooking Story 

This project allows users to create a personalized meal—Starter, Main Course, and Dessert—by making selections through a series of interactive steps. I was inspired by ‘Cooking Mama’ which is a cooking simulation mini game. 

How It Works

Arduino

• Buttons: Two arcade buttons are used for selections.
• LEDs: Three LEDs represent the steps of a course. Each LED lights up when a step is completed, showing progress.

p5

• Visual Interface: Displays the current step and options (e.g., “Choose your base: Lettuce or Kale”) using GIFs.
• Feedback: Updates the interface with the user’s choice and transitions to the next step. 
• LED Control: Sends signals back to Arduino to illuminate LEDs, showing progress.

Interaction

1.  Arduino detects a button press (e.g., Button 1 for Lettuce) and sends the signal to p5
2.  p5 updates the screen, displaying the chosen ingredient and prompting the next choice.
3. After updating, p5 sends a signal back to Arduino to light the corresponding LED.
4. Repeat: This process continues for the three steps for chosen course.

Breakdown of Choices for Each Course:

1. Starter:
   • Choice 1: Base Ingredient
     • Option 1: Lettuce
     • Option 2: kale
   • Choice 2: Veggies
     • Option 1: Carrot
     • Option 2: tomatoes
   • Choice 3: Dressing
     • Option 1: Olive Oil
     • Option 2: Caesar Dressing
2. Main Course:
   • Choice 1: Base
     • Option 1: Rice
     • Option 2: Pasta
   • Choice 2: Protein
     • Option 1: shrimp
     • Option 2: beef
   • Choice 3:  veggies
     • Option 1: Tomato
     • Option 2: Peppers
3. Dessert:
   • Choice 1: Base
     • Option 1: Cake
     • Option 2: Pastry
   • Choice 2: Fruit
     • Option 1: Strawberry
     • Option 2: Mango
   • Choice 3: Garnish
     • Option 1: coconut flakes
     • Option 2: Chocolate Shavings

For each course—Starter, Main Course, and Dessert—the user makes three choices, each with two options, resulting in 8 meal versions per course. 

I plan to draw everything using procreate. I have never tried animating or creating gifs on procreate, So I wanted to try to create a little gif and upload it on p5 to see how it works.

I kept changing my idea quite a lot so I haven’t started on any codes.

Finalized concept for the project

A music device that teaches kids how to read music notes. The way it works is that there will be a tutorial in the beginning that the user has to follow and then the user plays a game for about a minute and he/she should should collect as much points as he/she can, each correct note is +10 points and each wrong note is -5 points. The device is consisted of 9 buttons each button is allocated to a note starting from (E, F, G, A, B, C, D ,E, F).

I want to color code each button to correspond to the following chart:

Arduino Program

The Arduino code defines each button for each digital pin, and it defines a digital pin for the potentiometer. The potentiometer sends value to the P5 program to adjust the volume. It also sends the button index to the P5 so it can play the note corresponding to the button pressed.

P5 Program

The P5 program holds the sound frequencies for each note. It gets a signal from Arduino of which button is being pressed (digital pins) and it plays the note allocated to that button. It has the display of the music staff and the notes drawn. It displays one note at a time if you get the note wrong it will keep displaying the note until you get it correct and if you get it correct it moves to the next note.

Documentation of progress

Github

Finalized Concept:

For my final project, I decided to stick with the idea of a plushy that can react to your hugs. Designed to spread positivity and happiness for everyone especially during finals season, I want the P5 to output the plushy’s “mood scale” based on the tightness (pressure) of the hug.

The repeated idea:

Sometimes, all we need is a long hug to help us recover from a long day. So, why not be able to hug a responsive cute fuzzy plushy?

Although it doesn’t have a name yet, this plushy with a pressure sensor will be able to activate various designs on the P5 screen when the user hugs it. Ideally it will output randomized sounds for each hug, such as “That made my day!” “Aww thanks!” “Cozy!” Etc.. no matter the tightness of the hug. I will also try to create a digitally animated version of it, where it can have 4 different facial expressions as well as 4 different mood settings and backgrounds. These will range from a little sad to very happy. In the end, I just want to create something that will make users feel loved and appreciated, even if it’s just from a little plushy

D&D of Arduino:

For the design of the Arduino, the project’s physical aspects consist of the plushy being able to detect the user’s inputs so that it can send an output through its speaker and P5. Using either a pressure sensor or a flex sensor, depending on which one better suits the plushy, it will be placed inside of the plushy so it can take in the hug and measure the intensity of the hug. This hug intensity data will be sent to Arduino, which will output randomized sound effects through the piezo buzzer. The pressure data will also be sent to P5.js through the “handshake” of serial communication between Arduino and P5.js, which will be how all of the digital magic appears.

D&D of P5:

As for the P5 side of things, the P5’s input would be the received pressure data from Arduino. There will be 3 different levels of pressure values that the data can reach, which will be mapped to different outputs depending on which of the three pressure levels that user’s hug reaches. This would then output the digital plushy’s various expressions and backgrounds. The P5 screen would output the visuals to match the intensity of the user’s hug, and I’m hoping I’ll be able to make the differences pretty drastic so the user can get the idea that a tighter hug will output different visual feedback