Week 6

For my simulation project, I wanted to explore the 3D aspects of p5.js, since I've only been working in 2D space for all of my previous assignments. I've never worked with 3D primitives before using code, so I decided to create a relatively simple game inspired by an iPhone app that my friends and I used to play called Boost:
The premise is as follows: the player controls a first person camera and speeds through a tunnel. There are cubes placed randomly throughout the space, and the player must dodge these cubes and run as far as possible. I felt that these game guidelines would allow me to fully explore the different avenues of working in 3D (movement in z-space, camera control, etc). 

To start off, I created a camera object with variables for the x, y, and z positions.

I created a box object that takes in 7 arguments (xpos, ypos, zpos, width, height, thickness/depth, and color). In the display method, I draw the box primitive with the corresponding values.

I push 200 box objects into the array called obstacles. I randomize the x,y, and z positions, and set the color to default white. I also randomize the box dimensions as well. 

I also created a player object, and assigned a p5.Vector to it. The vector is a random2D element, because I only want the player to be able to move in the x-y dimension. 

The player object also contains methods for movement control (according to the arrow key being pressed, I add to the velocity element to generate motion).

This was the most difficult part of the project; figuring out how to create a 3D object collision detection method. Ultimately the method works as follows: if the player object's x and y positions are within the box's dimensions, and the box's z position is past the z position of the camera, then stop the sketch. 

After creating the player and obstacle behaviors, all that was left to do was to add some background music, a particle system for the stars, and a simple timer. Because I ran into some issues trying to display text in WEBGL, I had to use namespacing to draw the timer on another canvas:

The separate timer sketch.

Sketch:
Gameplay Screenshots:
Unlike the game Boost, my game allows for movement along the y-axis as well, and it is not in the first-person. The use of vector motion really adds to the anti-gravity effect that I wanted to achieve. The motion is very fluid, and it is not sharp and sudden. The technique of adding to the velocity variable according to the arrow key being pressed makes it a bit more realistic; the box doesn't respond immediately to the trigger, and tends to 'float' around more. 
Because this was my first step into working with 3D using code, I didn't get the chance to implement everything I wanted. Looking forward, I would like to create a player object and attach the camera to create a first-person view as well. I would also like to refine my collision detection algorithm too, because I find that as the speed increases, the box manages to phase through some of the obstacles without triggering the 'game over' function. However, I am quite pleased with the results, and it was definitely a good learning experience for 3D. 
↑Back to Top