Project #1 Lost and Found
Description
Partner’s name: Junru Xu
Partner's object description: The thing I lost is a laptop. The model is Apple MacBook Pro. The version was made in 2018. The color is space gray. It is equipped with a Japanese input keyboard because I bought it in Osaka. It has minimal wearing signs. I lost it just three days ago.
Design Process
I started by drawing my interpretation on paper.
Due to my limited knowledge of p5.js, I tried to simplify the image and turned it into 2D primitives that can be created easily with code. I first created the image in Illustrator so I can get the measurement of all shapes.
After that, I used pseudocode to figure out the steps to build this image with p5.js.
- background color
- circle for window
- rect for window
- rect for desk long side
- rect for desk short side
- rect for shelves
- translate rect to move one shelf to the other side
- rect for books
- rotate rect for one book
- rect for macbook keyboard
- shearX rect for macbook screen
- circles for apple logo
- arcs for apple logo
- rect for mug
Once I've got the steps down. I started to code in p5.js editor.
Reflection
The language your partner used to describe the image: The description is short, but I think her language is quite clear. The most important piece of information in the description is the model of the laptop. She also added details of the object such as color and the keyboard. I find “minimal wearing signs” the vaguest piece of information since it doesn’t specify what the “wearing signs” are.
Your interpretation of the image: Recreating the image of something I have not seen before is difficult. Even though the image of the laptop’s model can be easily found on the Internet, I think we are missing the “wearing signs” that makes an object unique. A lost object is something that exist in the owner’s memory. However, since I have not seen the object, it only exists in my imagination, which I rely on when interpreting the object’s image. To make it look like an object that was owned by someone instead of a generic model in a shop, I tried to put it in an imagined environment – an office with a glass table, coffee mug and book shelves. My goal is to interpret the image in a way that can convey what it might have looked like in the owner’s space before it was lost.
The depiction of the image using code: Using p5.js to create an image for the first time was hard, but I think all the preliminary steps before coding really helped. Since I've already got a mockup of what the final image should look like, and the measurements for the shapes, the hardest part is calculating the x and y coordinates of the shapes and make sure they line up correctly.
The differences in interpretation at all stages of the assignment: The original sketch has more organic shapes, which I had to eliminate in the mockup because I didn't know how to create such shapes in p5.js. In the mockup, I replaced the organic shapes with a circle window, which I think gives the image balance. The curve of the window makes an image filled with rectangles less rigid. I also thought that the stack of books on the left side of the macbook looked a tad too busy, so I got rid of it in the mockup. From the mockup to the final image created in p5.js, there were some minor changes in some objects' placement, mainly because I tried to round up the coordinate numbers so it's easier for me to work with them. I decided on a color palette when I worked on the mockup, but while in p5.js, the colors looked a bit off. I tried several different blend modes to see if I can solve the color problem quickly without changing too much of the color palette. I think that I prefer the colors of the final image compared to the mockup. I also used blend mode to make the table look more like glass in the final image.