For this assignment, I tried to utilize the programming concepts and primitive shapes to create a self-portrait. This involved the use of rectangles, ellipses and circles. I used this assignment to showcase what we have learned thus far, while simultaneously ensuring that it reflected my personal style.
Concept:
The main concept of the self-portrait is to capture, express, and translate basic P5 programming concepts into a visual representation of my main facial features within a sketch. In this sketch, my aim was to emphasize simplicity and minimalism, which can be seen through my focus on the basic features of the face like my skin, eyes, mouth, etc. The concept of simplicity and minimalism can be further seen in the color choice of the sketch. The muted pink, white, and browns create ‘visual harmony’ that captures the essence of my features and the sketch as a whole.
The process of creating this sketch involved a lot of rereading lecture notes and practicing outside of class, specifically with shapes. I initially struggled a lot with understanding how to position shapes and manipulate them to achieve my desired visual outcome, specifically the different parameters for each shape. I managed to overcome the initial struggle by playing around with the shapes and parameters. With that being said, the code I was most proud of was definitely the code that created the main facial features in my sketch due to the fact that it showcases my developed understanding of the shapes’ spatial relationships.
Here is the code that demonstrates my understanding of the shapes’ spatial relationships:
//Base of Eye
fill('white')
stroke(0);
strokeWeight(1);
ellipse(175, 175, 50, 25);
ellipse (276, 176, 50, 25);
//Pupils
fill ('rgb(83,29,29)')
strokeWeight(1);
ellipse(175, 175, 25, 25);
ellipse (276, 176, 25, 25);
//Pupil Detail
fill('white')
ellipse(170, 170, 10, 10);
ellipse (272, 170, 10, 10);
//EyeBrows
noFill()
strokeWeight(1.5)
arc(175,150,40,10,PI,0); //left
arc(275,150,40,10,PI,0); //right
//Nose
fill('rgb(255,227,193)')
strokeWeight(1);
ellipse(228, 200, 20, 30);
//Smile
fill('#D96771')
arc(228, 240, 60, 50,0, PI, PIE);
In my code, I played around a lot with different widths, heights, x-axes, and y-axes to create a cohesive sketch. The time it took me to actually understand the different shapes’ spatial relationships allowed me to effectively understand not only P5 as a language but also how different shapes can be related to one another. In a sense, this time allowed for me to explore the intricate relationship that these different shapes have with each other, fostering a more holistic understanding of both the visual image the shapes created and programming principles.
Despite the initial struggle, I felt really comfortable with functions such as “fill”, “stroke”, and “strokeWeight.” These functions allowed me to manage the color fillings, outline, and line thickness, helping me confidently add depth to my sketch. This helped me a lot when I was initially struggling with the shapes and their parameters as they provided me with a framework that enabled me to enhance the overall visual impact of my sketch.
My Final Sketch:
Reflection:
In terms of improvements, I think I can work on playing around with styles more. I feel like if I was given longer to work on this, I would most definitely would have added special styles and effects to the different shapes in my sketch. I would potentially add more complex shapes such as a shape for eyelashes or potentially control statements to create a User Interface design that would allow for the shirt to change color, adding more complexity to my sketch. Even with my ups and downs, this assignment most definitely made me more excited to learn more about how I am able to use P5 to generate effects and animations, particularly with shapes. I enjoyed this process and cannot wait to learn more about creating ‘non-stationary’ sketches, where movement is the central theme of the sketch, allowing me to create complex designs and user interactions.