Project #1

Lost and Found

1.1 Coffee Grinder created by using P5.js View the Code


Description

This is a coffee grinder that Kevin Lin lost before.
Here is the description from him:

A manual coffee grinder. It has a wooden base as the lower half, a metal upper half. You can separate them, it has room inside for coffee powder. On the top of the grinder, there is a thin metal handle with a wooden knob at its end.


Design Process

I broke down the coffee grinder into smaller shape like rectangle and cicrle. I drawed it on the paper, and adjusted the size to match how I pictured in my head before.



1.2 Hand-Drew Coffee Grinder



1.3 Hand Written Pseudocode:


Reflection


Partner's Description

Kevin depicted the coffee grinder with simple and direct description. He captured and describe the most essencial part of the object and describe them in a 3D dimension. Although I did not approach the image as 3D in my drawing, but I did have a really vivid image in my mind. As a result, I was able to quickly form a 2D primitive drawing on my canvas.


Drawing & Pseudocode

When I draw the coffee grinder on the my paper, I form it with really simple shape and straight-line to have a overall feeling of this object. And then, I imagined the color of each part in my mind before heading to the pseudocode. I originally wanted to add texture to the image, but I failed to apply it at the end. Hope I will be able to figure it out in close future.


Differencces between Drawing & Coding

The pseudocode was deveoped based on my drawing logic, which is drawing the shape and filling the color. In actual coding process, the logic is a little bit different from the order that we are drawing in an actual physical world. In coding, I need to set the color for the shape and line before "drawing" on canvas. After careful consideration, the coding logic is also making sense, because, in real world, we may also need to pick the color and the size of the pen before drawing the stoke on paper. Although the major difference is that we have choice to fill in the color of our pictures after finishing the shape, but the computer seems don't. In P5.js, we need to decide the color and size before actually "drawing" it. As a result, I took sometimes to understand the computer's logic on drawing, before I actually did the actual coding.

On the other hand, the position adjustments on digital canvas also consumed a lot of time. When I drew on paper, I could simply connect one shape's side with another without doing any mathmatical caculation. When I coded using P5.js, I needed to try and error in order to locate the ideal position for each shape. Since the circle and rectangle shape starting point is different, I need to pay extra attention on this situation when I typed down the starting X,Y point in my code.

Last but not least, the hand-drew picture is more like a random sketch, but the drawing, that happened in digital platform, is more like a static line combination with perfect allignment and shape. As a result, the digital version coffee grinder is more visiually appealing and united compared to the hand-drew version.


Credits

This project was created based on the drawing from my CC Lab partner Kevin Lin, and creating the object using P5.js Editor on a digital canvas.