In this assignment I tried to create a project using vectors in p5.js.
The first idea that came in my mind was to create a basketball shooting game, since the track of the ball is a parabola which could be achieved by applying gravity of the ball.
So first I got started with creating a cannon that points to the direction of the mouse(I initially wanted to create a man shooting but I would have to draw it so I gave up). It was simple using rotating rectangles and circles. To ensure it points to the mouse I used some trigonometry tricks.
Then the physics part came in. I create a construction function for the balls. It has position, velocity and acceleration vectors and functions show() and move(). The details are quite similar with what we did in class. I tried to add a bounce() function but the it has some bugs: the ball wouldn’t stop and it randomly moves up and down instead. So I decided to delete the bounce() function.
Then a mouseClicked function is needed to shoot the ball. By clicking the mouse the ball is given an initial velocity whose direction is the same as the one of the cannon.
A gravity force is also needed. It simply increase the acceleration of the ball by a certain degree. And I also created the basketball net using lines and rectangles.
The last thing to do is to add a check function which aims to check whether it is a goal. My criteria is that if the ball is inside the position of the rim and it is going downward then it is a goal. It works for most of the times but is not 100% precise. I don’t know how to improve it yet.
Lastly I added some user interface with buttons and sliders and I ended up with this: