https://editor.p5js.org/yuxuanqi9817/full/HsaUuM8Rn
Below is the process of drawing my self portrait using the p5.js web editor.
Final Outcome
A few childhood photos for reference and some sketches that I tried to draw with procreate before starting in p5.
<aside>
💡 What pitfalls did I run into? What could I not figure out how to do?
</aside>
- I had a hard time using the arc because at first I could not figure out about what should be put in for the angles/degree as the last two arguments. I noticed that even by changing one degree at a time makes the image completely different and also the angles that turned out do not look like what I studied in geometry. It was quite confusing by just reading the reference page and I could not figure out how to draw a semi-circle or a quarter of a circle.
- Since I could not directly see the coordinates on the canvas, I had to guess an approximate for where I want to put my drawing. I calculated some parts but for the rest I just kept guessing and adjusting a little bit at a time.
- I began drawing the portrait on iPad first then I realized that I was starting to have too many versions that I could not realize yet in p5 and also could not decide which one to actually go with. It might just be easier to just have a blurry image in the head and go ahead with the p5 editor to try on what I am capable of achieving currently.
<aside>
💡 Questions
</aside>
- [ ] How to make an ellipse or any other shapes askew? (not just horizontal or vertical)
- [ ] Is there a way I can know/locate the specific coordinates more quickly?
- [ ] Can I combine two shapes together? Like a quad and a semi-circle? Just so that they will only have one stroke together?
- [ ] Is there an easier way I can let the fill of one shape not affect the fill for the others?
- [ ] Can I move the location of my whole drawing on the canvas without adjusting the coordinates for each of the shapes? Or maybe enlarge / resize it?
<aside>
💡 How was the experience of using the web editor?
</aside>
It was quite smooth and straightforward although it’s my first time using it. I found the code comments feature really helpful because it helps me to easily distinguish between each section of my code in order to figure out which part is drawing what after I come back to the drawing at a later time.