Fading Photo Album
Made by Amy Luo
A photo album that fades with your memory.
Created: February 4th, 2019
0
Intention
This project explores the idea of using technology to reflect how our own memories work. This photo album is able to store photos, however over time, the photos become continuously blurred similar to how our own experiences tend to turn into faded memories. Once photos become blurred to a certain point, they will be “forgotten” by the album and deleted.
I wanted to showcase the idea that memories change over the process of time through the progression of the photo album. New photos are much clearer and mimic how our own perception of things is clearer closer to the present. You can also look back at specific photos/memories, and photos recalled more frequently become less blurred similar to how frequently recalling a memory facilitates it.
A common issue I have with my photo albums is that my gallery becomes cluttered with irrelevant photos and screenshots collected over time. By adding this fading mechanism, we can also see how it would be beneficial to use forgetting as a means to filter out unnecessary photos and memories captured. Over time, only the photos that are most meaningful to us will stand the test of time.
Prototype
Describe your experience/working prototype: What did you create, how, etc.? What tools and technologies were involved? Include appropriate content and illustration (e.g. a concept video, a video of the device in operation, diagrams, code, etc.)
My prototype is an experience simulation of an interactive gallery of photos that slowly fades over time. I programmed the interface using Processing, a coding platform suited for visuals and image manipulation. The gallery displays photos in a grid, and selected photos are displayed full screen. The user can customize the album by uploading a set of their own images within the same file folder as the code file. Each image has a recall count which tracks the number of times the image has been viewed. Progression of time is simulated by pressing the Control button which increments the number of days passed. Each day, the photos fade a little more, and the recall count is what influences how well a photo is preserved over time. Images viewed more often are less affected by the fading effect and are displayed more clearly as a result. Through this fading mechanism, I wanted to recreate how our natural memory system functions, as events we remember most often are better facilitated and recalled more easily. In the end, the user is left with a curated selection of photos they have viewed most often.
Precedents
Describe theory, concepts, and research you have performed. Describe the prior work, ideas and projects that influenced your design. What work informed this idea.
Prior ideas which have informed my design concept include the memory chips I researched for my Think Piece. The Black Mirror episode: “The Entire History of You” introduced me to the concept of chips which enhance human memory, allowing characters to remember every detail of their lives with picture perfect accuracy. I found similar technology being developed today such as memory prosthesis chips being designed by USC researchers to increase the brain’s long-term memory. I examined the psychological impacts memory chips could have when applied to the general public. Various concerns were raised such as how perfect recall could actually cause people to ruminate more on the past in an unhealthy manner. In addition, making sense of our memories would be challenging if our minds were so cluttered with information. This led me to explore both the practical and emotional role of forgetting through the design of the Fading Gallery. While the memory chip produces a timeline which remember everything, I wanted to achieve the exact opposite by producing a timeline of photos to eventually be forgotten.
Process
Describe how you arrived out the outcome. What iterations, refinements, design decisions and changes were made?
My design process started with brainstorming ideas for how the gallery would appear. I tried to base the design off my own phone’s image gallery as it embodied both functionality and familiarity with its clean white background and scrolling grid of images. In my storyboard, I first envisioned the gallery as a mobile app, but I switched to a computer out of convenience and the added advantage of a larger screen size for display. I also intended for the photos to have the blur effect rather than the fade effect as this could further distort the photos. However, using the blur filter slowed down my program, so I switched to the more efficient fading mechanism. In the end, this was better because the fading was able to create a more prominent change. While coding the prototype, I made similar small changes like this to the original design. So the final product had a few extra features added such as the days passed count and the feature to view recall count by hovering over the image.
Photo bigImage; //full display image
int days = 0; // days passed
int headerY = 0;
int headerW = 200;
int margin = 40;
int imgSize = 280;
int bigImgSize = 700;
int maxCol = 3;
int scrollSpeed = 20;
int totalPhotos = 18; //how many photos to start
String mode = "gallery";
ArrayList<Photo> photos = new ArrayList<Photo>();
void setup() {
size(1000, 900);
int currCol = 0;
int currRow = 0;
//load gallery and store photo locations
for (int x = 0; x < totalPhotos; x++) {
photos.add(new Photo(loadImage("IMG_"+(x+1)+".png"),
margin + currCol * (margin + imgSize),
margin + currRow * (margin +imgSize) + headerW));
currCol ++;
if (currCol > maxCol - 1) {
currCol = 0;
currRow ++;
}
}
}
void draw() {
background(250);
if (mode == "gallery") {
drawHeader();
galleryUpdate();
// draw gallery
int currCol = 0;
int currRow = 0;
for (int x = 0; x < photos.size(); x++) {
photos.get(x).display(); }
}
else if (mode == "display") {
// draw full display mode
bigImage.fullDisplay();
}
}
void drawHeader() {
fill(#101317);
rect(0, headerY, width, headerW);
textSize(50);
fill(#F5F5F5);
text("Fading Photo Album", width/2, headerY + headerW-20);
textAlign(CENTER);
textSize(30);
text("Days passed: " + days, width/2, headerY + headerW/3);
fill(#F5F5F5);
}
void galleryUpdate() {
// check if each image is hovered or clicked
for(int i=0; i<photos.size(); i++) {
Photo photo = photos.get(i);
if (photo.overImage(mouseX, mouseY)){
photo.selected = true;
if (mousePressed){
photo.recalls++; //increment num recalls
bigImage = photo;
mode = "display";
}
}
else {photo.selected = false;}
}
}
//handle key presses
void keyPressed() {
if (mode == "gallery"){
if (keyCode == DOWN){
movePhotos(-scrollSpeed);
headerY -= scrollSpeed;
}
if (keyCode == UP){
movePhotos(scrollSpeed);
headerY += scrollSpeed;
}
if (keyCode == CONTROL) {days++;} //increment days passed
if (key == 114) {resetPhotos();} //reset days and photo recalls
}
else if (mode == "display" && keyCode == ENTER) {
mode = "gallery";
}
}
//scroll photos up and down
void movePhotos(int dir) {
for(int i=0; i<photos.size(); i++) {
Photo photo = photos.get(i);
photo.yPos += dir;
}
}
//resets photo recalls
void resetPhotos(){
days = 0;
for(int i=0; i<photos.size(); i++) {
photos.get(i).recalls = 0;
}
}
boolean overRect(int x, int y, int w, int h) {
if ( mouseX >= x && mouseX <= x + w &&
mouseY >= y && mouseY <= y + h) {
return true; }
return false;
}
//Photo objects
class Photo {
PImage pic;
int xPos;
int yPos;
int recalls; //how often photo is viewed
int age; // how old photo is
boolean selected = false;
// Constructor defined with arguments.
Photo(PImage selectedImage, int x, int y) {
pic = selectedImage;
xPos = x;
yPos = y;
}
boolean overImage(int x, int y) {
return overRect(xPos, yPos, imgSize, imgSize);
}
// draw gallery display
void display() {
if (selected) {
tint(255, 126);
drawText();
}
else applyFade();
image(pic, xPos, yPos, imgSize, imgSize);
noTint();
if (selected) {
drawText();
}
}
//draw hover text
void drawText(){
textSize(50);
text(recalls, xPos + imgSize/2 - 10, yPos + imgSize/2);
fill(#101317);
}
// draw full display
void fullDisplay(){
applyFade();
image(pic, width/2 - bigImgSize/2, height/2 - bigImgSize/2 + 50, bigImgSize, bigImgSize);
fill(#101317);
rect(0, 0, width, headerW/2);
textSize(40);
fill(#F5F5F5);
text("Recalls: " + recalls, width/2, height/10);
textAlign(CENTER);
fill(#0B2146);
}
//set the fade value for each photo
void applyFade(){
tint(255, 280 - days*10 + recalls*50);
}
}
Open Questions and Challenges
What questions remain to be addressed or questions about memory did this exploration raise for you. What are the things we should pay attention to/discuss in class for future explorations?
Should forgetting be implemented into machines and everyday technology? For instance, should there be a means for photos/messages/internet histories to delete themselves over the course of time or is it better to have them remain forever?
How is technology influencing the way we recall things and remember events? We are so reliant on our phones and devices to store information and reminders, we no longer rely as much on our natural memory abilities. Sometimes we’ll take a picture of something to document it into our machine’s memory, rather than live in the moment and encode the actual experience into our minds.
What are the drawbacks of technology that remembers everything?
What are the benefits which come with forgetting?
How can machines be built to replicate human memory functions?
Reflection
Reflect on making this project. What did you learn? What would you do differently? Did you get where you wanted to? If not, why not? What do you need to get there, etc?
From the making of this project, I learned that it’s important to first get the basic ground work established before worrying about the added details and smaller features of the prototype. In the beginning, I was focused on little things like finding photos and playing with image size. But I realized this wasn’t very efficient, and then got to work on the basic framework. So, I used a placeholder image first. Then after I got the basic groundwork in place, I turned to visuals and details to enhance the project. In addition, I realized how important it was to have a solid concept in mind as I was coding the interface because it really helped guide how I was going to structure and organize my code knowing what I wanted. To expand on my current project, I want to incorporate the date in which a photo was taken. This was not achieved due to difficulty and time constraints. I would need to do further research on how to access a photo's metadata to integrate date into determining how much a photo fades over time.
Attribution and References
Reference any sources or materials used in the documentation or composition.
The Processing website provided various helpful tutorials which I was able to reference such as documentation for button presses and image manipulation.
Foundation, Processing. “Processing.org.” Back to the Processing Cover., processing.org/.
Share this Project
Found In
Courses
48528 Responsive Mobile Environments
· 18 members
This 15-week course introduces students to responsive mobile environments and encourages them to explore speculative terrains that intersect art, technology and design and space. Iteratively, intro...more
About
A photo album that fades with your memory.