Matthew's Coding Blog: p5 Drawing

For this assignment, I decided to keep things simple. While still learning the technique of coding, I recreated the Puerto Rican flag. This is because I, for one, am Puerto Rican and I simply love the flag. I've been drawing it in pieces of looseleaf paper since I was in middle school. Unfortunately, I couldn't figure out how to create a star so I just replaced it with a circle. This is also helpful because I've learned how to work the coordinates to do so.

First, for my triangle, I set my fill and stroke color to blue (39,16,237). Next, in order to line up my triangle as perfect as I possibly could, I would set the coordinates to (0,400,0,0,275,200). After the triangle came the stripes, or rectangles.

For the rectangles, the fill color is red (237,23,16). The stroke is the same as the fill color. I have set the l/w (length/width) to (600,45). They are the same length and width; However, the difference is their positioning on the canvas. The rectangle at the top is positioned with the coordinates of (0,0). The middle stripe is positioned at (0,155). The bottom stripe is (0,315).

All in all, this is created the template of the flag, but without the star. As previously described, I do not know how to make a triangle on p5 so I used a circle inside. The color of the circle is white which was a simple (255) using fill color. As the rectangle also follows, the coordinate structrue is stated as so (x,y,length,width). For the circle, the coordinates were (90,190,100,100).

The link below will show you the coding

https://editor.p5js.org/mattziegen/full/O5KQZFFDx

Click the HTML code in the top right corner of the link.