Description

Falling Data(P5.JS Link)

I recorded down the data of how many times I drink water and go to the bathroom this week. The ball inital drops representing the times I drink water and in the midway it will stop representing how much water is reatined in my body. When it turns into other color and complete the second half way of dropping, it means that I go to the bathroom and get rid of the water in my body.

Design Process

Once again, I didn't sucessfully complete what I initally want it to be. I made some annotations/comments in my code, so it's easier to understand what didn't go right (inital idea is sketch below)

Following is all the different testings I went through. Even though visually they look similiar but all of these sketches are coded in different coding logic. I was trying out which coding logic can actually achieve what I want to do.

ATTEMPT 1

Initiallly I made these two curves wanting them to be the booundaries where the balls wil hit and bounce; therefore, I made them into a class and was hoping to write a collison code for the line. Soon, I realized that making a line an "object" means that every point on the line has to be an object. In other words, I have to try to define a all the points on a curve line.

ATTEMPT 2

This time, I was able to make a ball drop, but couldn't figure out how to set it back to zero when mouse is pressed and also couldn't figure out how to assign an array of colors to the ball.

ATTEMPT 3

This time, I was finally able to assign random colors to the balls; however, I still coudn't assign it from the color arrays.