My Concept:
My concept for this assignment was to create a semi-realistic portrait of myself. I wanted to experiment with shapes and lines while also getting more comfortable with using p5 for the first time.
Pieces of Code I’m Proud of:
//body
fill('#394cac')
arc(200,340,140,20, PI, PI + HALF_PI,) //left shoulder
arc(240,340,140,20, PI + HALF_PI, TWO_PI) //right shoulder
noStroke()
square(130,340,70) //left side
square(190,355,70) //middle
square(240,340,70) //right side
//neck
fill('#f9e7c8')
square(200,290,40)
arc(220,330,80,60,0,PI)
//Body part 2
noFill()
stroke(1.5)
line(130,340,130,340) //left side half shoulder
line(130,340,130,400) //left side lining
line(180,350,180,400) //left side inner lining
line(310,340,310,340) //right side half shoulder
line(310,340,310,400) //right side lining
line(260,350,260,400) //right side inner lining
I’m really proud of the neck and body of my portrait. This was probably the part that took me the longest because I found the arc() code really hard to understand at first. I didn’t really understand what all the different values meant or how changing each one would affect the arc. When I started using it to create the body/shirt, it became even more confusing because I had to think about not only the shape of the arc, but also its position and how it would connect with the neck.
There was a lot of trial and error. I kept changing the values in the arc() code and seeing what would happen until I slowly started to understand what each part was actually doing. I also struggled with getting the lower neck to connect properly to the shirt, so I had to keep changing the position of the code until I got the result I wanted.
The shirt lining was also really difficult because at first the line wasn’t showing at all. After playing around with the code, I realized that if I wanted to use the line as just an outline for the shirt, I needed to add noFill() and strokeWeight(1.5) so the line would actually show the way I wanted it to. This was something I didn’t know before, so being able to figure it out on my own through trial and error made me really proud of this part of my code.
How This Was Made:
I created this portrait using p5 and the knowledge I learned in class. While working on it, I also went back and reread the presentation that was shown in class whenever I needed to remember how certain parts of the code worked. I also used p5 reference links that were provided in the presentation, especially the line() and the arc() references, which helped me understand how to use them in my portrait.
References:
https://p5js.org/reference/p5/line/
https://p5js.org/reference/p5/arc/
My Reflection:
Overall, I’m really proud of how my portrait turned out, especially since this was my first time using p5. Even though it doesn’t look exactly like me, I’m happy with how I was able to use different shapes and code to create my own version of a portrait. There are definitely things I would want to improve next time. I would like to create a more fun and interactive background instead of keeping it simple, and I would also want to make the hair look more realistic and add more details to the portrait. But as a start to my p5 journey, I have to say I’m really proud of the final outcome and excited to see what else I can create with it.