Created in p5.js

(EPILEPSY WARNING)

Features

Drag the leaves.
Drag the photos(aka the title).
Rewind time with the clock! (But if you do, ropes break)
Rewind time 3 times to end the experience.
Seasons change every 24 seconds.
Day-Night Cycle
Every time you rewind time, something about the season changes.

Design Goals: My main goal was to make a poster on the game Life is Strange by capturing the essence of the game and highlighting its unique mechanics(interacting with nature/time and time reversal. I also wanted to convey the message that time reversal can cause chaos (which is why I believe 1 ending is sufficient).

Process: I started with drawing some assets: leaves, flowers, trees, fish, butterflies, etc... But then I noticed that I needed to work within the time limit, so I excluded some of them. As I was programming (this is my first time working on a big project in pure javascript), I focused on creating a user feedback(highlighting objects if they are hovered, changing the color back when moving it/not selecting it). I also worked on capturing the colors of the day(but it was hard to decide a palette because when I tried to map the colors to time, the colors would phase through weird colors, which meant I had to find some intermediate colors to smoothen the flow) .

Next I moved on the game title. In previous assignments, I was told that I gave too much focus on the background than the foreground, hence for this assignment, I tried to work less on the background and more on the foreground. In my poster, the title is composed of letters on black and white boxes (representing polaroid pictures btw), which change colors once clicked/dragged. I restricted the position of the photos onto a photoboard that swings from side to side.

The sprite animation was a tad difficult because I had to figure out how to create interaction while also codify the movement. The clock was especially challenging because I had to tune the movement of the hands to my standardized flow of time (in the code).

Additionally, to punish the user for reversing time, I increased chaos in the experience every time they did so. As chaos increases (well… it decreases in the code, but that’s just a technical choice), the leaves and photoboard sway more and the snow becomes faster and in weird colors. I visually communicated 3 strikes with the disappearing ropes(each time time is rewinded, a rope disappears). In the end when all ropes are gone, the photoboard plunges into the abyss, while in the presence of an ominous falling sound effect. The user must refresh to restart (though this is the only ending available).

Finally, I added in the sounds. I wanted one for the rewind, the each of the seasons, the rope breaking, and the ending. And I did add them in. I do think that the rope and the ending sounds need amendments.

Why didn’t I include music? Because that (to me) is artificial(human creation rather than an existing element in nature). I truly wanted to capture the natural feeling of being outside (but since im in an area with no trees, I couldn’t do my own recording).

Some issues and Prospects: I believe the major shortcoming of my project is directing the user. I don't give users experience on what is going on,

Where I would go from here: The photoboard is lacking, so MAYBE I should create a tree with photo leaves instead. And if the user abuses the time, the tree dies.

There’s no storm anywhere in my poster.

Volume Control

I couldn’t bring the clock and the photoboard to the foreground to emphasize the unchanging nature of memories (that is in a figurative sense. In theory, our memories would change if we rewinded time, but I digress)

Also I forgot to add love.

There's a bug in the photos.(I cant release them underneath each other)

Credits:

Art and programming by Arrian Chi

Modules used: p5.play.js and p.clickable.js

Music/Sounds used:

Rewind sound effect by NikPlaymostories: https://freesound.org/people/NikPlaymostories/sounds/561857/

Rope(Branch) Breaking sound by Taira Komori: https://freesound.org/people/Taira%20Komori/sounds/212829/

Autumn Wind Sound by Stek59: https://freesound.org/people/Stek59/sounds/457318/

Winter Wind Sound by cobratronik: https://freesound.org/people/cobratronik/sounds/117136/

Falling(Death) Sound by DDmyzik: https://freesound.org/people/DDmyzik/sounds/455422/

Used https://convertio.co/ to convert .wav to mp3.