• ZIWEI JI

    • Lost & Found

    Description

    The above sketch is an object that was descripted by Grace(Qiaochu)Guo and created by me in p5.js. The goal of this project is to translate plain human language to pseudocode. The top sketch represents a folded wallet, and the bottom sketch represents a unfold wallet.
    ////Description: It was a cognac two fold leather wallet. The leather was darker on the edges that the wallet looked vintage. There was a black metal logo of Anna Sui at the right bottom corner of the wallet, and it was surrounded by a square frame. When the wallet unfolded, there were two pockets on the top for cash and 4 vertical card slots on the left. On the right there was a buttoned coin pocket that can be opened from the top. The coin pocket looks like the pocket from a trench coat, that has a flip on the top and can be buttoned down. It was about 3 to 4 inches long, 2 to 3 inches wide and 1 inch tall when not folded. Double the length when opened. ////

    Design Process

    a. identify two sketches, one is folded wallet and one is unfold wallet.
    b. draw out the object step by step using a coordinate system(below) before start coding.
    c. use the width and height ratio 3:2/6:2 to draw two rectangle, one on the upper center of the canvas.(above (x,200)) one on the lower center of the canvas.
    d. use the coordinate system to locate each design elements and creates the vintage/shadow effect, logo, and pockets. At the same time, use fill() to give each elements a color.
    e. then, adding rotateMode(DEGREES) & rotate() into the code to create the tilted cash pockets look on the bottom sketch.
    f. finally, adding effect such as blendMode(DARKEST) and then adjust color value to match the 'Cognac' color in Grace's description.
    g. run the code to check for errors.

    Reflection

    Grace's description is very straightforward by using the word "wallet," which gives me an idea of its shapes. By using number and inches in the description, this helps me to have a pretty accurate proportion. It was effortless to interpret the shape of the object. However, the colors and the size of the elements are hard to define. Only using 'on the top, on the bottom right and darker" is a little ambiguous. To some extent, some decisions were made by my assumption of how a wallet should look.
    To depict an image through code is very interesting. I have to use the coordinate system and consistently calculate the x,y, width, and height of each design element. The numbers and location must be exact. If I changes any previous codes, the codes that run after it will need corresponding changes to match the results.

    Stage of Interpretation:
    First stage: the colors of the object were define as 'Cognac,' and the wallet portion is width: height = 3: 2. The early stage is to narrow down what this object is and search for an image of 'wallet' in my brain.
    Second Stage: understand that there are two sketches, one indicates folded, and one displays an unfolded wallet.
    Third stage: estimate the location/size/color of each element, for instance, the wallet's color, and arrange the pockets to match my assumptions. The third stage is that the features are compared with the features of objects in the knowledge base.