Recitation 5

This week our group uses Glitch and Visual Studio Code to do our project. Below is the first report about our project.

The link to our game: https://editor.p5js.org/yk2308/sketches/1hW4T1Ehr

Design Inspiration:

In this interactive experience project, our group drew our inspiration from the old-fashioned video game Flappy Birds. We would like to make a modern game with more interactive experiences provided for our users. We originally used a black point and some simple rects as the prototype, which will be later on designed and decorated more fancy.

We want to use the Hogwarts’ traditional game Quidditch as the setting. The BG will be a cartoon old-fashioned Hogwarts castle. The stumbling blocks will be some gothic pillars cursed by Lord Voldemort. The moving subject will be HarryPotter flying by riding brooms or rakes, or riding magical animals, which is controlled by mousePressed/Microphone. The users should control the role and try not to touch the pillars.Upon touching the pillars, game’s over. All of these images will be originally drawn by our group members. 

Apart from this fundamental settings, we also want to have the Golden Snitches with wings flying around in the screen to create a sense of magic. Add some sound effects is also in our scheme. Additionally, we are thinking about researching into Makey-Makey to relate our project with a special and funny keyboard such as the plasticine. We think replace the mouse with plasticine can be a good try but we still aren’t sure if that will work smoothly.

Workflow:

—Step 1. Preliminary conception. We want to use microphone to input the sound and use sound to control figure. We want this to be a game.

—Step 2. Building the basic model of the game. We draw a ball first. Then we use an array rec[i] to create black blocks and another array hei[i] to define the height of each “passage” for balls to pass. Also we use the function random to randomize the height of each passage.

—Step 3. Sound input. We refer to the p5.js library and some videos on YouTube. We use “var mic” and then “new p5.AudioIn()”  to create a sound input. Then use “mic.getLevel ” to get the level of the sound. Applying the sound level to the ordinate of the ball and we can get a ball jumping along with the sound level.

—Step 4. Add judgment. If the ball crash on the blocks, the game will end. So we want to use a function Check() and by applying true or false on it to check whether the user loses the game. (Additional: We also want to use the “i” in the array rec[i] to count the score)

—Step 5. Beautification. We use procreate to draw some cute figures and find some amazing background pictures to replace the original black blocks, balls and white background to make the game more interesting.

—Step 6. Debugging and optimization. Find the potential bugs and try to make the game functioning more smoothly.

First Trial Process:

For now, we have finished our basic model, which only includes the ball and the blocks. In theory, the sound volume decides how long and how high the ball will fly. However, the ball was unstable. It continued to be shaking when we made a stable sound. When we controlled the ball only by clicking the mouse, the ball was stable, which meant every time we clicked mouse, the ball would fly higher within a fixed distance and then fell down because of the gravity. As a result, we will try to find out why it was unstable when we used the sound to control and find a way to stabilize it. As for other parts, such as the speed of the moving block, the random passages, etc. they meet our expectations and won’t subject to changes unless it is necessary. What’s more, we asked our roommates to play the game and they met the problems as us. After we optimize and beautify the game, we will let them play again and see if there is anything to improve.