The project as a whole was created using HTML, CSS, JavaScript, Canvas, JSON, and local storage. We began by creating a basic web page that displayed circles interacting with one another through simulated physics. We added click detection to eventually allow users to tap a cell to view a memory.

Collision detection was implemented and adjusted to create different interactions between the circles. Once the interactions, sizes, and speeds of the circles fit our desired aesthetic, we temporarily overlaid still images on the circles to create the cells. We added a background to give more depth to the environment we were creating.

From here, the cells were then animated using sprite sheets to create the organic movement we wanted in the space. The click interaction developed into a pop-up message with a close button to slowly begin implementing the individual memory view for each cell.

The development of the single cell view advanced into an overlay featuring a webm video of the full cell animation, the type of memory, the memory itself, and optional image displayed on an animated background. To troubleshoot lag, we decided to create a separate HTML page for the single cell view.

The memory form that was presented to users at Imagine RIT was developed by building a simple HTML form. The prompt is randomly generated by grabbing one of the memory types and displaying it in the title when the page loads.

These specific, random prompts helped jog the audience’s memory while not having them think too much, allowing for more creativity to shine through. The back-end of the form is connected to the google sheets API to store each users submission in a spread sheet for future implementation.

The memory data is stored in a JSON file that is loaded in when the page loads. To display different individual memory views with just one html page, each cell in the multi-view is assigned a memory, and that memory is then stored in local storage when the user clicks it. The user is re-directed to the individual cell page, and then the memory is displayed by updating the inner html of the elements on the page using local storage. All code sources can be found in the readme file of the github repository.