My concept: As our first assignment in the introduction to interactive media course, we were instructed to create a self portrait using strictly code on the p5js website. It was incredibly interesting to try and develop new skills through the use of lines and shape in order to create a realistic figure. Going into the assignment, I decided that it would be best to replicate my everyday look at university to experiment with the website and learn more about the foundations of coding as a beginner.
How this was made: I began the process of creating my self portrait by setting the canvas to an ideal size in which I chose to be (600, 600). This guaranteed a large working space that allowed me to comfortably develop different elements of the self portrait. I then began the process of creating the face and eyes using the eclipse function. Because I had previously practiced using the eclipse function in class, this was pretty easy to manage. However, when it came to creating the nose, eyebrows and the mouth, I struggled with what shapes and functions to use in order to do so. To resolve this confusion, I used the help and reference button provided by p5js to review the different functions that are available for use. I also used the help of Chatgpt by asking what possible functions could be best suitable for certain facial features, as well as in moments of uncertainty when dealing with certain dimensions and the meaning of each value within coordinates. Doing this allowed me to learn more about other shapes such as the use of line, arcs, and triangles.
Once I was done with the primary facial features, I moved on to the hair. Personally, the hair was the feature in which I struggled the most with this assignment as I was unaware of what shapes and functions I could use to create something realistic. This encouraged me to just experiment using the ellipse feature as it was the one I was most comfortable with. Therefore I created several ellipses to form dimension and realism in the hair. I also experimented by using the rect function which I found in the reference section of the p5js website to create a darker layer of hair behind the neck to create a sense of light and shadow. I also managed to create an interactive function in the background as it changes colors when in contact with the mouse. I did this through the use of adding the mouseX and mouseY feature that was learned in class into the fill RGB function.
Code that I am particularly proud of: After completing this assignment, I am particularly proud of the clothes in which I created. I decided to try and replicate an abaya through the use of different shapes and functions. Once again, I used the curved rect function to create the body, followed by regular rectangles to create both the shaila and tshirt underneath. I also used the triangle function to create a collar to go around the neck. I am particularly proud of this code as I created it without the use of any references, through the use of my skills that I have developed throughout the assignment and the creation of different features in the self portrait.
// Clothes fill(255, 180, 180) rect(160, 500, 280, 150, 90); fill(255, 200, 200) rect(220, 500, 150, 100) fill(255, 255, 255) rect(240, 500, 105, 100) triangle(345, 500, 345, 480, 280, 500); triangle(250, 550, 250, 480, 300, 500); }
Reflections and ideas for future work or improvements: Overall, I am highly satisfied with the final outcome of this self-portrait, particularly because this was my first time coding. I believe that I have been able to develop certain skills which can be used further throughout my time in this course and that I have developed a fundamental understanding of coding using p5js. As for future improvements, I would like to become more comfortable with understanding what certain functions do such as the curves and arcs, as I found the most difficulty in trying to use these elements and I believe that they could have helped me in creating certain features like the hair and clothing. I would also like to deepen my understanding of what the numbers within certain functions represent in order to more effectively position and adjust the shapes without the struggle of spending too much time trying to figure out their coordinates. I am looking forward to seeing how the skills that have been developed in this assignment can help me when it comes to future coding assignments.