Lost and Found

Description of the object by Seunghyo

"It's a rectangular card wallet that opens when you turn the corner. There are additional zipper on the front side, top of the center. It can be opened with the zipper that has two long lines. There is a semicircle at the bottom of the zipper and a small circle-shaped stud at both ends.There are belt-shaped ornaments and circular studs on both sides along the diagonal at the bottom corners."

The editor to the code is available here

Design Process

I started with a rectangular base for the wallet. But almost immediately I realized that a rectangle by itself made the wallet look 2D. I needed to add some 'thickness' to the wallet which I acheived by duplicating the rectangle with a darker shade and moving it a couple pixels to the left and top. I gave the arc, which stood in for the semicircle, the same treatment. A few more rectangles and circles were translated and rotated for the ornamental buckle and studs. With that, the basic shape for the wallet was complete.

The first major obstacle in this project was the zipper. Using a loop to add in small rectangles did the trick. I then iterated on the distances and sizes of each tooth till it looked just right. A few more rectangles and two longer rotated rectangles made the '2 long lines' of the zipper.

Adding a shadow was easy enough using an ellipse and blendmode multiply. With that, the basic project was complete.

Since I had prior knowledge of p5.js, I started using the long weekend to experiment with some animation. With some combined if and for loop magic, I made the zipper open and close upon interaction with the mouse. I then added an additional rotate to the zipper handles to make it follow the mouse for added flair. To top it all off, I made an assending array of some base tones to simulate the sounds zippers make while opening and closing.

Reflection

This project has made me realize how amazing and equally frustrating the intentional ambiguity of language is. It took more time to go from prompt to paper than from paper to code. What we assume as 'clear instructions' often is not. It took a lot of back and forth to make sure I was getting the details of the wallet right. Looking back at the prompt I had given to my partner, I noticed the same issues with my description too. Even straightforward words like 'diagonal' could mean multiple things given the context.

A final comment: Even when the description matches the final rendition, the image could be interpreted differently. The semicircle and the studs somehow made me think of the Hunchback of NotreDame or Kingpin from Into the Spider-Verse. And once this image registered in my head, I couldn't see anything else. I tried changing the orignal beige color planned for the wallet to something more green and that didnt work either. I showed it to my friends who all told me it looked like a wallet but with the immense power of suggestion, in no time I had them see the cartoonish human form too. And now, by adding the image of Kingpin under this write-up, I curse you all to the same fate :)

Credits

This project was created based on the Sound Interactive tutorial by Ari Melenciano (@AriCiano) and it remixes never by Everest Pipkin (@everestpipkin), licensed under MIT License 2018.