## Are You Stressed? – Final Project

Concept:

For my final project, I created an interactive tool that helps to visualize stress levels during finals seasons. It allows college students to relieve stress through squeezing and screaming and produce a unique visual mapping of their stress. The tool incorporates a microphone and a stress ball on a board. The pressure and sound input are used to determine stress levels based on duration and intensity, and the results are displayed on the screen as moving color dots. The more stressed you are, the bigger and redder your circles are and the faster they move.

Implementation:

The interaction is straightforward – the nature of a stress ball makes it obvious that one needs to squeeze it and to guide the users to use the microphone, I put a little “Talk to me :)” label on top of it. The users interact with the project by either squeezing the stress ball or screaming (or talking, but preferably screaming) into the microphone.

The arduino part of the code is very straightforward as well – arduino simply takes the input values, averages over 10 consecutive values to smooth out the readings, and sends the values to P5JS.

Without interaction with Arduino, the P5JS code creates circles on the screen with randomized but bounded positions and radii and makes them move up the screen again, with randomized but bounded speed. The circles out of the frame are removed and every 100 frames there is a new circle generated.

Color circles when the user is not squeezing the stress ball

P5JS takes the input values and maps them onto 3 variables: the radius, color, and speed of all the circles present on the screen. The color and size of the circles are dependent on the force sensor’s readings. When the stress ball is squeezed, the dots get enlarged and change their color to red.

Color circles when the user squeezes the ball

The code for displaying a single circle is as follows:

```display() {
let radius = map(fVal, 0, 1023, 0, this.size);
let colorR = map(fVal, 0, 1023, 0, 255);
let colorB = map(fVal, 0, 1023, 255, 0);
let colorG = 0;
for (let i = 0; i <= radius; i=i+2) {
noStroke();
fill(color(colorR, colorG, colorB, 2));
ellipse(this.x, this.y, i, i*this.f);
}
}```

The speed of the color circles depends on the value of the microphone. I found the base rate of a room is under 600 on the microphone reading, so I set the detection threshold to 600. To control the randomized but bounded speed of the circles, I added a variable `speedFactor` that I use when changing the speed.

```//Defining global variables related to speed
let minSpeed = 1;
let maxSpeed = 5;
let speedFactor = 1;

//randomizing the speed for each circle
let s = random(minSpeed, maxSpeed)/4;

//update function in the Circle class that updates based on the speedfactor
update() {
this.y -= this.speed*speedFactor;
}

//changing the speedfactor according to the microphone reading (and by using speedfactor changing all of the randomized speeds by a constant scale)
if(micVal>600){
speedFactor = micVal/600;
}else{
speedFactor = 1;
}
//NOTE these are snippets from different parts of the code```

Challenges

I had 2 big challenges in this project. First, it was connecting the hardware as it was my first time soldering or building a shell for my circuit. I ended up messing up some sensors and wires, and in the end not using them but sticking to a very simplistic design of my sensors on abox.

Another big challenge was making the gradient circle in P5JS that fades toward the edges. I tried 4-5 different methods, including drawing just the outline of a circle, using the HSB color mode, lerp function, and the one that I stuck with – drawing a lot of circles of the same color and very small alpha value so that the layering of many circles creates the saturated color in the middle. I am still not fully satisfied with this method though as when there are more than 15 circles on the screen, it gets very laggy and there are way too many objects on the screen (from a computational perspective, not a visual). I would love to find a better, more efficient way to do this without having to draw 4000 (number of circle groups, 10 in my case)*(maxRadius, 400 in my case) circles in each frame.

However, I am still proud of my final project and really like the idea of using squeezable objects (like the stress ball I used) to be part of computer controlling (I also created a very small version of a flappy bird game that uses the squeezer as a controller, which is simplistic but really fun).

User Testing
Without instructions, users were able to figure out that they are supposed to squeeze the stress ball and speak into the mic. The connection between the stress ball and the color circles on the screen was pretty obvious, but the positioning of the microphone made it a little awkward to both watch and interact with the tool, which could be an area for improvement.

## Are You Stressed? (Final Project Preliminary Concept)

Concept:

For my final project, I want to create an interactive tool that helps to visualize stress levels during finals seasons. It will allow college students to relieve stress through squeezing and screaming and produce a unique visual mapping of their stress. The tool will incorporate a microphone in a cup and either a force-sensitive resistor or an air pressure sensor inside a squeezable object (a plushie or a stress ball). The pressure and sound inputs will be used to determine stress levels based on duration and intensity, and the results will be displayed on a screen. Us

Implementation:

My tool will consist of 2 parts: the hardware (arduino) and the software (p5js).

Arduino will receive the input, keep track of the duration and intensity of each input: sound, and touch, and send that data to p5js. I might also add a switch to start the process and to make the timing easier. I expect arduino to finish processing the data and then send it to p5js to visualize.

P5js will get the input from arduino, map the intensity and duration to stress levels in terms of colors and size of color dots and print the output on the screen (an output similar to the one below).

In the end, it would be great if the users can download/print out their stress profile but I am not sure yet how feasible that is.

Challenges

I anticipate building an aesthetically pleasing and functional tool that can be squeezed hard yet still work will be the biggest challenge. I am thinking of using either a plushie or a stress ball for that but at the same time trying to see if I can get hold of an air pressure sensor so I can use a balloon.

## Arduino + P5JS

Exercise 1

Moving ellipse with a potentiometer.

Exercise 2

Using the mouse location on the horizontal axis to change the LED brightness.

Exercise #3

Lighting up the LED when the ball touches the ground, controlling the horizontal direction of the ball using a potentiometer, and creating a new ball when the potentiometer reads 0.

## Musical Instrument

Concept

I worked on this project with Akhat, and we wanted to create a tool similar to Singing Horses where each horse has its tone and frequency, can be turned on/off, and acts as an element of melody that creates a unique tune when played together with other horses. In our project, a similar idea can be seen: we have multiple buzzers each with its tune that is played when pressed on a corresponding button. One special thing about this project is that we also use a pressure sensor to change the tone just a little and create some more variation and uniqueness in each play.

Process/Challenges

We started off by testing out different parts separately – first, we got the pressure sensor working (which did not work in the beginning because of hardware, but then we switched to a different pressure sensor which worked much better). After that, when connecting buzzers and buttons, we ran into an issue where multiple buzzers were not playing at the same time. Initially, our idea was to play them simultaneously with different tunes, but apparently, Arduino does not allow that (i.e buzzers must be played one at a time). Our workaround for this problem was that instead of playing tunes simultaneously, we had them play one at a time when the switch is pressed down. Lastly, it was a lot of experimentation of what notes worked best for us given that we were changing the frequency based on the pressure sensor.

The circuit

Circuit Diagram

## Light Crystals – Digital/Analog I/O

Concept

I really wanted to play around with ultrasonic sensors and RGB Led, so for this project, I built two glowing crystals that change brightness based on how close an object is and can change colors when a button is pressed.

Final Product

Process/Challenges

I started off by first playing around with ultrasonic sensors with a tutorial I found here. Once I had that working, I slowly added more parts starting with a blue LED, then the RGB LED, and finally the switch. I wanted to present the LED in a cute and pretty way (instead of it just being there) but had a hard time finding something I could use to cover up the LEDs (I was going for a tennis ball but was not able to get one in time). When I added the LEDs, I temporarily covered them up with caps of my lip liners and since I liked the way they looked like crystals from the side I decided to keep them.

I have already built a very similar circuit in class so this project was challenging in terms of creativity rather than technicality. I spent a lot of time trying to find a way to present my circuit without over-complicating things, and I was able to achieve that through trial and error.

## Unusual Switch

Concept

I tend to misplace and forget to carry with me 3 things a lot: my AirPods case, my wallet, and my keys. So for this assignment, I decided to create a tool that would incentivize me to put those things together in one spot and never misplace them again.

Process

I wanted to create a board that would make the LED light up when I had all 3 of my belongings on top of it. I started off by first building the circuit we built in class without the switch and creating an opening where I could add the switches. I used pieces of an aluminum container as my conductor to both lengthen jumper wires and act as a switch. Step 1

Then I built the bottom part of the board: a piece of paper with a line of aluminum but with 3 openings that act as my switches in series – when there are conductors that connects all four pieces of aluminum the switches are all “on” and so is the light. At this step, I also lengthened my “wire” by using a double jumper wire.

Step 2

From here I built the top part which consisted of another piece of paper with small pieces of aluminum that would connect to the pieces on the bottom when there is pressure applied to them and disconnect when there was no pressure. This step surprisingly took the longest because my first prototype (pictured in the top right corner below) did not turn out as I intended it. Step 3

I ended up putting 2 smaller and one bigger piece of aluminum after some experimentation and seeing what worked and did not work. Here I faced the challenge of making the paper “bounce back”, disconnecting the wires when I removed the objects, and thus turning off the LED light. My solution to this problem was to fix the top part slightly concaved down so that the default state of my board would be “disconnected”.

Final Product

Circuit Diagram

## Beach Cat! – Midterm Project

Final Product

Project Concept

I used to have a cat simulation game on my laptop’s control strip that I found very enjoyable to play with. The game served as an inspiration, along with my love for the beach, to create a similar game featuring a cat on the beach. The game’s concept is to take care of a cat and attend to its many needs (it might not have a lot of needs but requires a lot of close attention). To give this project a more game-simulator-like feel, I went for pixelated aesthetics and I am very happy with how it turned out.

Project Description/Parts I am Proud of

The user selects a cat and moves around the beach to feed the cat, give it water, and use the litter box. If the cat does not receive the needed attention, it dies and the user has to start over 🙁 The game is controlled by the arrow keys and asdw keys and the user is free to walk around all the beach areas.

One technique that I am proud of and which helped me a lot in visualizing the game and putting the building blocks together is that when building the game, I set up a grid on the screen with x and y indexes. I then used this grid to locate my objects and find intersections with them.

Background Terrain with the grid

Another aspect that I am proud of is another helper tool – a helper function to split a sprite sheet according to the global variable `tileSize`. This function takes a unidimensional sprite sheet image and returns an array of tiles. I wish I came up with this function at the beginning of the coding journey as opposed to the end because it would’ve saved me a lot of time but I am glad I incorporated it still.

```//function to get a uni-dimensional spritesheet and return an array of the elements
function splitSheet(imgName){
let arrayName = []
for(let i=0; i<imgName.width/tileSize; i++){
arrayName[i] = imgName.get(i*tileSize, 0, tileSize, tileSize);
}
return arrayName;
}```

I also tried my best not to hard-code any indexes, locations, etc, which is a good practice for when I am going to come back to the game and built on top of it.

Problems

I really wanted this game to have background music, but because I uploaded too many images (the sprite sheets I had were not convenient to work with so I had to split them into many smaller ones that had the same dimensions)  there was no memory left for a sound that is lengthy enough to play on the background. When I did, the game basically never loaded, which is why I had to give up that idea.

Another problem that I ran into and that took me a while to figure out is storing my 4 different cat sprite sheets for 4 different movements (up, down, left, right), AND 3 different “stages” of each movement. This is when I came up with the function mentioned above and I ended up storing things in a 3d matrix.

Overall, I am really happy with the way the game turned out given the short time limit. There are many more features that I would love to add to the game but for now, this is the final game 🙂

## Midterm Project Progress – Aigerim

Concept

For my midterm project, I want to do a cute little game where the user gets to play around on the beach as a cat. Initially, I wanted the game to be about a turtle that lays eggs on the beach because I go on turtle nest patrols on Saadiyat as a volunteer and it is one of the most exciting activities I get to do in spring. Sadly, it was impossible to find a sprite sheet and terrain elements of the aesthetic style I am going for, and I had to swap the main character from a turtle to a cat. The game is essentially a cat simulator on the beach, where the player gets to feed, play with the cat and explore the beach.

Aesthetics/Resources

All of the images used in this game are from the following website: https://opengameart.org/users/bluecarrot16

I always find picking the overall theme of the project to be the most difficult part, which is why I spent a lot of time looking for the fitting terrain, beach elements, and sprite. At the moment I am using the following images to build the game terrain:

Implementation

At the moment, I have elements of the starting screen where the user gets to pick what cat they want to be: when a mouse hovers over a certain cat it moves up and down. As I mentioned earlier, the most time-consuming part of this project is getting these images and cropping them in a way that I can use them in arrays. For example, to get these cats on the screen () I had to crop the big picture into smaller parts that are of uniform size and spaced out evenly.  Once I am done with preparing the images, coding the program should not be a challenge.

Future Plans

• Add beach elements like palm trees, ponds, seashells, etc that the cat can interact with
• Add cat “status” of its needs that need to be fulfilled in the game (if not fulfilled the cat dies 🙁 )

These are the basic required functionalities of the game, however, there is a lot more that I wish to implement like making the game multiplayer, adding new characters (birds) that I have the resources for in terms of spritesheets. Whether they will come to life or not will depend on the time restrictions, but I am very excited to see how this project will turn out in the end!

## Generative Text – Aigerim

Inspiration/Concept

For this project, I created a fortune cookie application that gives a random fortune. I love getting fortune cookies and seeing my luck (even though I do not believe in them, it is still a fun activity), and I wanted to transfer that fun little moment into a web application. To create the effect of anticipation one gets when opening the cookie’s package I made a fortune come up as in a typewriter, letter by letter without revealing everything all at once.

The Product

I am really happy with the way it turned out, especially given that I was not really sure what I was going for when I just started the project. The product is really simple and minimalistic, and I love it this way because I want the focus to be on the fortune itself, which I think was achieved pretty nicely.

Challenges

The biggest challenge for me was restarting the typewriter when a user clicks on the mouse and the typewriter is done writing. Since my function is not blocking, I had multiple fortunes written on top of one another at some point. To solve this, I added a boolean `printing` that is set to True whenever I am about to enter the `typeWriter` function within `start `and set it back to False when I am about to leave it. Then, whenever a mouse is clicked, I first check whether the variable is true or not and print a new fortune when the previous one is done printing (or displaying) and the user clicks.

```function start() {
if (printing == false) {
printing = true;
typeWriter(random(fortunes), 0, 50, height / 2, 80);
}
}

function mouseClicked() {
start();
}```

## OOP – Aigerim

Inspiration

For this assignment, I recreated my own version of the Rock, Paper, Scissors game I saw on TikTok. Having spent a little too much time watching it, I wanted to create my own version of it that is scalable and in which the simulation can be played over and over again.

The Product

Overall, I am very happy with the outcome. The code design underwent many changes as I added new features and removed the useless ones, for example, I started off with 3 different classes for Rock, Paper, and Scissors but realized that the code was a bit redundant and reduced it to one Obj class.

Challenges

```//function to check for collision of two objects (thisO and all the other objects)
function checkCollision(thisO) {
for (let i = 0; i < obj.length; i++) {
//check the distance between the two objects
let d = dist(thisO.x, thisO.y, obj[i].x, obj[i].y);
//if the two objects are within close proximity and are not the same apply the rock paper scissor rules
if (d <= thisO.size / 2 + obj[i].size / 2) {
//thisO.dx = -thisO.dx;
//thisO.dy = -thisO.dy;
//obj[i].dx = -obj[i].dx;
//obj[i].dy = -obj[i].dy
if (obj[i].id == "📄" && thisO.id == "🗿") {
thisO.id = "📄";
} else if (obj[i].id == "✂️" && thisO.id == "📄") {
thisO.id = "✂️";
} else if (obj[i].id == "🗿" && thisO.id == "✂️") {
thisO.id = "🗿";
}
}
}
}```

One of the biggest challenges was figuring out how to detect the collision between my objects, for which I ended up calculating the distance between all the objects at a given time and checking if that distance is less than the radius of my object. Another challenge is to make the collisions smooth without having two objects cross each other, which I am yet to work out. Apart from that, it was a really fun project to work on, and very entertaining to see which one will win every time I run it!