#dsdn142

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. 

Exercise - Colour

While doing this exercise I also wanted to challenge myself to get the overlapping rectangles to overlap on the centre line (250 as the canvas is 500x500). To do this i had to draw a map of how it would plan out as you can see above. I made a mistake the first time and added a screenshot of my trial, i got the Y position wrong for the first rectangle - you can see a big cross on my drawing where i fixed this issue.

I also utilised the hierarchy of the commands to remove stroke weight from all shapes with one line of code.

Understanding RGB colours

~I found out that me not being able to spell too well isnt going to help me with coding~

so I already understand the idea behind rgb colours and how to mix them. But going through this it was interesting to note that if you just wanted a greyscale colour you could just enter the number once instead of entering the same number 3 times. Also looking into transparency was really interesting. 

Exercise - Order of operations

completing this exercise they wanted us to draw a square, circle and line in various colours and line weights. 

to get my result I first layered out the nessicary code and added comments so i could come back later and add the values. While doing this i Noticed that we had to add a stroke colour to the line, however this was something that we had not covered previously. To find the command for stroke colour I used the p5js reference library which we went over in a previous lessons and I have now saved that to my bookmarks.

Understanding the order of operations

first** i found how easy it was to break my code, with the screenshot above showing that i missed a bracket and semicolon, this made my whole code stop working and I had to do my first “what did I do wrong” haha.

Indenting and commenting in code.