Link to sketch: https://editor.p5js.org/ojmjunming/full/W-301y_lp
Concept
I wanted to create an installation-type piece, something that you leave in a gallery or in some space and let users naturally interact with the piece. The idea behind my project is based off a thought I had a few weeks ago. I thought that despite all the new memories I make, I find myself forgetting things and people in my past who were once dear to me. This project is my take on trying to convey that feeling — the idea of losing memories for every new ones you gain.
How it Works
The screen prompts the user from a list of pre-determined questions and the viewer is encouraged to type a short response to it. When they press ‘Enter’, a photo will be taken of the viewer the viewer’s response and photograph will be inserted into the ‘Memory Box’, while an older memory is removed.
I also try to convey a feeling of fleetingness by making the title and question text look wobbly/jittery. The text doesn’t feel static and feels a little uncertain as they do not stay in one place, which I thought helps sell a feeling of dreamy-ness. The text input is also accentuated by the sounds of a typewriter, which I use to help create an atmosphere of retro-ness and nostalgia.
Technical Parts I’m Proud Of
class WobblyText { constructor(message, x, y, size = TEXT_SIZE) { this.letters = [] this.size = size this.message = message this.x = x this.y = y let curString = ''; for (let i = 0; i < message.length; i++) { let curLetter = message[i] this.letters.push(new Letter(curLetter, this.x + textWidth(curString) * 1.2, this.y, this.size)) curString += curLetter } } render() { for (let letter of this.letters) { letter.render() } } } class Letter { constructor(letter, x, y, size = 16) { this.letter = letter this.size = size this.originX = x this.originY = y this.offsetX = 0 this.offsetY = 0 this.maxOffset = 2 + (size / 12) this.noiseX = random(10000) this.noiseY = random(10000) } render() { push() textSize(this.size) text(this.letter, this.originX + this.offsetX, this.originY + this.offsetY) pop() this.offsetX = (noise(this.noiseX) - 0.5) * 2 * this.maxOffset this.offsetY = (noise(this.noiseY) - 0.5) * 2 * this.maxOffset this.noiseX += 0.01; this.noiseY += 0.01; } }
I’m really proud of the wobbly/jittery text as I feel that it helps add to the emotional feeling of the project. It was a little harder to achieve than I thought, as I had to manually create every letter of the text so I created two classes to help me achieve this effect without having to manually draw each of the letters. I maintain a separate state for each letter, so each letter moves independently of the other letters ( though within a certain bounds of it’s starting point ).
Things to improve
I left out the instructions for pressing ‘Enter’ as I assumed that it’s something that most viewers will know how to do, but I’m not sure if thats a good decision I’ve made and I wish I had more time to test my project with other people to see if there are any improvements I could’ve made on the UI/UX. I would’ve also liked to improve the animations for removing/creating a new memory, as right now there is only a simple fade out animation. A more dreamy animation for inserting the new memories would’ve been nice.