DYSTOPIAN SHOPPING
-----Walkthrough-----
- Hover over and Click "PLEASE ENTER CIVILIAN ID"
- Hover over and Click Individual Item boxes
- Click again to exit
- Click on the Eye that follows the mouse cursor
- Click Logout
- Click Restart Icon
The "If Audio isn't Playing Click Me" should be ignored if there is no problem, will disappear upon a click or upon reset. It was only added because sometimes in present mode, the project wouldn't play any sounds until a sound was triggered again.
Citizen[#] and SHOPPING CENTER[#] change upon each reset.
-----Design Goals-----
---Overall ---
So my idea was to create an interactive shop like-environment. I picked pixel art as my medium of choice as it was simple, but also evocative of older technology. From these choices, I decided to make my project take place in some sort of dystopian future that used an outdated or barebones interface.
---Start Screen---
The start screen is empty aside from the title and the "Please Enter" message. My idea was for it be dark and a little ominous. The electric hum in the background and the blue color of the message foreshadowing the next sequence.
After the "Please Enter" is clicked, an animation plays where a card appears out of the darkness and clicks into some mysterious machine. The animation is fast, but the card is meant to look bland and generic, with the most prominent central image on it being an eye within a diamond.
After the click there's a loud start up sound as the page flashes white and the page transitions to the main shop area.
---Shop Menu---
The shop menu consists of only 2 shades of blue (with a purple outline), there is only one font being used, there is an electric drone in the background and also a constant beep linked to a flashing sign. All of this is to convey an uncaring, and even some what hostile environment. The eye in the diamond appears again, only now it follows the users mouse, always watching. At the top, a number denotes the user and shopping center (They are both random to create a feeling of this being only one person and place among a larger population, that it's not unique).
The products of the shop invert and enlarge when hovered over, and play different sounds for clicking on and off them. The items are all unavailable in one form or another, and anything that isn't food or drugs is pretty much missing. With nothing to buy and to get away from all the loud noises, the only option is to click logout. The items/options are also meant to feel wrong or depressing. I tried to create an array that would randomize the shop items, but for some reason, loading gifs from arrays caused them to not play their animations.
---Credits---
This is the credits, nothing really special besides being made to fit into the aesthetic of the shopping website.
---Extra---
I decided against including any music because I felt that it would go against the theme and atmosphere I was creating. Sometimes there are cracks in the audio, but it fits with the theme so I'll say it's intentional.
This was my first time working with p5js but I hoped it turned out well. Figuring out how to make everything go together was a really fun experience.
