Link to final Project’s code:
https://editor.p5js.org/tina06c/sketches/-tceDzTP2
Description: I attempted to recreate a photo of a building at the JinYao Residence Area using the tool P5.
Final Sketch Original Photo
Coding Process:
So I first started out with a hand-sketched version of the photo that I took and it looked like this:
After that, I started to draw in the details of the building and labeled every single line with a letter so that I won’t get lost as I coded (photo below).
After I labeled the lines it was time to sketch them on P5. The hardest part of the coding process was to guess where a new line should start and end. It was difficult to find out the coordinates of the lines so I did a lot of trial and errors.
In the end I was able to sketch out the whole photo line by line and it looked like this:
Link to first draft:
https://editor.p5js.org/tina06c/sketches/v8f032J3S
After my first draft I realized that it was going to be hard for me to color in my sketch because I drew lines and not shapes. I searched the references of P5 (link 1 below) for a solution and found out that the beginShape() function allowed me to draw any shape I wanted as long as I knew the coordinates of the vertex. Hence, I started to draw shapes using the lines and coordinates I had already established in my first draft. After all the shapes were created it was really easy for me to fill in the shapes with the corresponding colors that I wanted. I searched up a website (link 2 below) that allowed me to come up with colors and returned the corresponding numbers to create that color.
Link 1: https://p5js.org/reference/
Link 2: https://www.rapidtables.com/web/color/RGB_Color.html
Reflections
I prefer using the reference over the exploratory programming because it is easier for me to understand how each function works by using the reference rather than trying to figure it out myself through trial and error. However, I use exploratory programming when there exists uncertainties in my code that the reference cannot help me with. For instance, when I was coding I often found myself exploring different coordinates in order to understand where each point lies on the plane. Drawing on a piece of paper was easier than writing the program in the sense that we didn’t need to find out the exact coordinates of where a shape or line should be on the plane. Finding out where each shape should land on the plane is very time consuming in the case of coding. When we draw by hand we are able to draw anywhere we want without second thoughts. Nonetheless, writing the program made coloring in shapes and drawing straight lines a lot easier which makes the sketch neater than hand sketching.
Leave a Reply