My Concept:
I wanted to create a self-portrait that depicted my features using colors that i like such as burgundy and pink, and also using the basic p5 shapes. I wanted to make a piece that felt warm and friendly, so I chose soft pink and peachy colors. The goal was to make something that looks like me but also shows my personality through the style and colors.
Most basic shapes were a good fit for the features of the portrait. For instance, basic ellipses of varying sizes were a good fit for the eyes when overlapped with different colours. Additionally for the cheeks, lips, chin, and face shape ellipses were suitable. Thin rectangles were good for the eyebrows as well.
As for the hair, I used a new shape that I used chatGPT to recommend which is the bezier shape. The bezier shape has 8 parameters, every two being an x and y pair. The first and last coordinate pairs control where the bezier starts and ends, and the middle two control the pull of the curve.
Code Snippet:
bezier(350, 160, 380, 150, 300, 220, 170, 280); bezier(300, 160, 320, 180, 380, 220, 155, 310); bezier(400, 160, 110, 170, 260, 380, 190, 480); bezier(190, 480, 150, 520, 210, 580, 240, 650); bezier(240, 650, 200, 690, 260, 740, 230, 810); bezier(230, 810, 190, 850, 250, 890, 220, 950); bezier(390, 180, 100, 160, 240, 400, 170, 500); bezier(170, 500, 130, 540, 190, 600, 220, 670); bezier(220, 670, 180, 710, 240, 760, 210, 830); bezier(210, 830, 170, 870, 230, 910, 200, 970); bezier(400, 160, 115, 170, 280, 370, 210, 470); bezier(210, 470, 170, 510, 230, 570, 260, 640); bezier(260, 640, 220, 680, 280, 730, 250, 800); bezier(250, 800, 210, 840, 270, 880, 240, 940); bezier(400, 140, 115, 150, 280, 370, 210, 470); bezier(210, 470, 170, 510, 230, 570, 260, 640); bezier(260, 640, 220, 680, 280, 730, 250, 800); bezier(250, 800, 210, 840, 270, 880, 240, 940); bezier(400, 130, 115, 140, 280, 370, 210, 470); bezier(210, 470, 170, 510, 230, 570, 260, 640); bezier(260, 640, 220, 680, 280, 730, 250, 800); bezier(250, 800, 210, 840, 270, 880, 240, 940); bezier(400, 120, 115, 130, 280, 370, 210, 470); bezier(210, 470, 170, 510, 230, 570, 260, 640); bezier(260, 640, 220, 680, 280, 730, 250, 800); bezier(250, 800, 210, 840, 270, 880, 240, 940); bezier(400, 110, 115, 120, 280, 370, 210, 470); bezier(210, 470, 170, 510, 230, 570, 260, 640); bezier(260, 640, 220, 680, 280, 730, 250, 800); bezier(250, 800, 210, 840, 270, 880, 240, 940);
The bezier curve is a new shape that i worked with. It has has four points each of which has 2 coordinates, x and y. First, the Start point: Where the curve begins, End point: Where the curve ends, Two control points: These are like invisible magnets that “pull” the curve in different directions to create the bend.
So in the context of my self portrait the first point would be, the top of my head, the last point would be the tip of my hair, and the middle two points are where the curves occur due to the pulling in those spots.
Embedded Sketch:
Reflections and Future Improvements:
Through this assignment I learnt more about how shapes and colours could overlap in p5.js to make dimension and depth. I also learnt about the bezier shape and it added a very creative element to my sketch.
As for future improvements, I hope to be able to start making for-loops instead of manually repeating the same structures and editing the coordinates. This will not only save time, but it will also give me a less error prone program, and will create some kind of symmetry in my work.
