Excercise 6 - SceneManager and Sound

Run Exercise 6
See sketch.js code for Exercise 6
See scenes.js code for Exercise 6
See alien.js code for Exercise 6

There are 5 scenes in this exercise, which can be nagivated through key bindings or by use of the gui buttons on the screen. The scenes include an intro, a help scene, two alien-themed scenes, and an end scene. This exercise uses the libraries p5.scenemanager, p5.sound, and p5.toughgui. The p5.touchgui is the library I found, and it provides gui objects such as buttons and toggles. I placed buttons on each scene to navigate between the different scenes. This exercise also includes 4 different sounds with use of the sound library. The sound effect that is one second long is played when the mouse is clicked on the second alien scene. The sound effects longer than two seconds play when the alien scenes are entered. The code also checks whether other sounds are playing on entry to the scene and stops the ones that happened on a different scene. I also added a different bitmap to each scene as the background. My approach to Exercise 6 was to create a base for a game software that I could then develop further for use as one of the software interfaces in my final project.


Project 4 - Phase 1: Brainstorming

Brainstorm by Speed Dating Log Paper


Example Software Interfaces
The two images below are interface examples of the two types of softwares I plan to mashup for my project. The first image below is a game software interface, and I like this one because of the simple menu on the right-hand side of the screen. The second image below is of a productivity app for staying focused and having a timer. I like this interface because of the simple design.



Project 4 - Phase 2: Final Project Proposal

See Project Proposal Slide Deck

Elevator Pitch:
Imagine a software that encourages you to focus on your tasks or studying, but it also provides you with a fun alien-themed game to play during your breaks. Based on the Pomodoro studying technique, my project will encourage users to complete their own tasks for 25 minutes while a scene plays of the aliens working on their own tasks, such as building their spaceship. After the 25 minutes, an alarm will sound and users will be given 5 minutes to play a game in which they control the alien characters flying the spaceship.

Wireframe 1: The start screen


Wireframe 2: The 25 minute task timer


Wireframe 3: The 5 minute gameplay


Wireframe 4: The about/help screen


Moodboard 1: The study state


Moodboard 2: The game state


Moodboard 3: The help/about (information) state



Project 4 - Final Phase: Interface Mashup Program

Run Project 4
See sketch.js code for Project 4
See scenes.js code for Project 4
See alien.js code for Project 4

My final project is a mashup of game software and time management productivity software. The time management software portion of my project is based on the Pomodoro technique: 25 minutes of work followed by a 5 minute break. This 30 minute set is called a 'pomodoro' and a longer break should be taken after 4 pomodoros.

The p5.js libraries I used in my project are p5.scenemanager, p5.sound, and p5.toughgui. The documentation for each is linked. p5.touchgui is the library I found and chose to incorporate into my project. It includes buttons, toggles, and joystick controllers. All buttons in my project are from the p5.touchgui library.

During the 25 minute study scene, the interface shows a countdown of the minutes and involves a simulation interface context. The simulation is of an alien character building a space ship to represent how the user is working hard on their own task for 25 minutes. This alien scene plays throughout a minute and repeats every minute for the whole 25 minutes. In addition, motivational messages will show up for 10 seconds, every minute starting at 35 seconds to encourage users to work on their tasks. There is also background sound of light rain that plays throughout the study scene, as a calming way to help the user stay focused. I used a toggle button from the p5.touchgui library to create a button that pauses and unpauses the timer and scene.

The game software is introduced after the 25 minutes of work and study time is over. The scene switches automatically when the timer reaches 00:00. In the game scene, users have the ability to move the alien character using the joystick controller on the screen. This controller is also from the p5.touchgui library. It is like a mini mapped area where the user can make mouse movements to control the character. Users can also interact with the program by clicking the 'b' or 'B' key to shoot laser beams at the cow, allowing them to score points. There is feedback sound that plays every time the user shoots a laser, and a different feedback sound plays when the user scores a point. I included further theatricfication in the visual representation of the game by having the alien character tilt in the direction that the user moves it in, and by having the laser beam also move in the direction the alien character was moving in.

After the 5 minute game scene ends, the program moves back to the study scene and a counter of the pomodoros is incremented. After 4 pomodoros, the user is shown the "end" scene where they may take a longer break on their own, and can click a button to start from the beginning again. More details of the interface for my project include short sound effects that play each time a button is clicked. I included this to indicate to the user that their interaction with the software was successful. In addition, every scene has a 'Help' button that navigates to the About/Help scene where the user can choose to go back to the previous page or go back to the 'Home' beginning screen. The study and game scene are paused while on the help screen.