Mocking up my image before implementing it in p5js.
Here is my workflow where I mocked up an image before implementing it in p5js. First I decided to use a cigarette box because of its simple geometric shapes, its perspective and the use of layering. I also found that it had a curve on one part which I chose to use the quadraticVertex() command for.
1. First I chose my image and mocked it up using adobe illustrator. This was very easy for me to do, and gave me a good idea of the layering aspects of the design, I then separated the box out into its respective shapes to give me an idea of the key shapes I had to draw using p5js. Afterwards I placed the box relative to a 5x5 grid as you can see, ready for me to translate this over to graph paper.
2. I translates this design over to graph paper and simplified it a tiny bit to make the points line up a little better. (I also did some simplification while working with the box digitally initially). I then plotted all the necessary points - originally I was not going to plot the curved line as I was unsure how to go about it.
3. I entered the points into atom in the form of solid shapes to begin making my box. I encountered problems sometimes with the beginShape() command sometimes not working, I still do not know why this is the case, but i began saving and running my code after each and every point i plotted to make sure that the code I wrote was working. Also I started copy-pasting code that was working where I could to avoid any typos that could have caused it to not work. This worked for me as a beginner in this field.
4. I decided to give the curvy line ago at the end, I used the p5js reference library to find the quadraticVertex() command. This was easy for me to understand as it is similar to illustrators pen tool. Drawing this curved line I just used alot of trial and error to get the curves how I wanted them.