Problem
Environmental issues are easy for the general public to minimize, ignore, and sometimes even mock. How can we use screen-based interactions to emphsize the severity of the state of the environment and the public's role in it?

Project
Use javascript, html, and css to create a screen-based interaction, a game, movie, or ar/vr entertainment, that uses existing media or text as inspiration.

Research & Brainstorming

From my environmental science and sociology classes, I have learned a lot about humans' impact on the environment. I wanted to do further research on our impact on the ocean ecosystem to determine what visualizations would have the most impact on players. I discovered that global plastic production has only increased exponentially over time and all of it eventually enters the oceans from coastlines, rivers, tides, and marine sources. I also learned that there are three key ways by which plastic debris can affect wildlife; entanglement, ingestion, and interaction. 

After determing that the simple visualization of ocean wildlife ingesting plastic would be the most effective way to draw emotion out of the players, I began defining the play flow. The player would become the octopus who is traveling through the ocean and throughout time, interacting with the game by controlling the main avatar using the arrow keys. The main game mechanic would be the octopus avoiding the plastic that floats by him in the ocean. As time goes on the plastic comes at a higher frequency until it is impossible to avoid it. The player would never be able to ‘win’ the game and therefore will be more motivated to take action to help the issue, such as using less single-use plastics after playing the game.

Defining Requirments & Working in Iterations 

MVP

• Create spritesheet animation of main avatar
• Create non-player elements
• Make avatar movable on canvas by a player
• Make avatar and non-player elements interact
• Animate non-player elements 
  

Bonus Elements

• Create background animation
• Add counter for how many non-player elements have been hit
• Have consistent gameplay from a clear starting and ending point
• Use real data

Main Avatar
The first step was creating and animating the main avatar. I created the octopus in Illustrator and then created spritesheets in Photoshop, eventually animating using javascript.

Iteration 1

• Create a spritesheet animation of main avatar
  
  
  
  

Iteration 2

• Make avatar moveable by user
• Figure out avatar and non-player element interaction
  

Iteration 3

• Animate non-player elements
• Change background
• Add counter for non-player elements hit
• Have clear start and end to game play
  

Minimal User Testing
I had my roommate play the game multiple times while changing the speeds of each variable to find the ideal velocities. 

• Fast plastic & fast octopus
• Fast plastic & slow octopus
• Slow plastic & fast octopus
• Slow plastic & slow octopus
• Very slow plastic & fast octopus
• Very slow plastic & slow octopus

I deterermined that having the plastic fall slowly and the octopus moving along the ocean floor slowly was the ideal combination for game play. It allowed the user to play the game long enough to understand the concept, but then to quickly deny any winning state. 

Final Gameplay Example

*there is sound but I can't seem to capture it in the screen recording yet :( working on figuring it out!

Outcome
To include all the aspects I wanted to include in this game, I needed to do lots of research to improve my javascript skills. I learned how to create a sprite animation, how to create interactions between player and non-player elements, adding sound to those interactions, and so much more. If I had time to continue working on this project, I would like to craft a better narrative throughout the game (name the octopus!), add boundaries so the player can’t swim off the canvas, and create a more cohesive design system for the game. I would also like to add a date stamp that tracks the years & find a data source to link so as it gets closer to the present year the amount of plastic falling would increase. I would also attempt to fix the error that would allow the plastic to remain on the ocean floor. This was a really interesting project to work on and probably my most challenging, but I loved building it and having to improve on my javascript skills.