My concept
My goal was to represent not only my appearance, but also some aspects of my personality that are important to me.
Before this assignment, I had no experience with programming or p5.js. Since I wanted to do a good job on my first assignment, I spent a lot of time learning the basics, experimenting with the code, and using different resources, including AI, to help me solve problems and develop my ideas.
I realized that simply drawing myself could not fully represent my personality. Therefore, I added an interactive element using words that are related to me. Through these interactions, I wanted to give the audience more information about my personality and make the representation of myself more complete.
How this was made?
interactive–words
//Chinese
if(mouseIsPressed && dist(mouseX,mouseY,100,120)<40){
text("Chinese",72,125);}
//Creative
if(mouseIsPressed && dist(mouseX,mouseY,60,250)<40){
text("Creative",32,255);}
//Hungry
if(mouseIsPressed && dist(mouseX,mouseY,60,400)<40){
text("Hungry",34,405);}
My goal was to make some words describing my personality appear when I press the mouse over the circles. Since I did not know how to create this interaction, I used AI to help me figure it out. Through this process, I learned how to use an if statement with mouseIsPressed and the distance between the mouse and the circle to control when the text appears. I also understood the logic behind this type of interaction, rather than just using the code without knowing how it works.
Color
For the colors, I used a website called Color Picker. I could adjust the color using its color wheel and get the corresponding RGB values. I then used these RGB values in my p5.js code to choose the colors for my project.
Shapes
For the shapes, I also used AI to help me understand how to use coordinates to control the position of different shapes. One of the most useful things I learned was how to create an arc. I learned that, besides defining its position and size, I also need to specify its start and end angles to control the direction of the arc. I found this part quite interesting.
Reflection and ideas
Reflection
I enjoyed working on this project, but it also took me a lot of time. One part that took especially long was designing the hair. Originally, I wanted to make it look more like my actual hair, with bangs and a round shape on top. I tried to use curves to create this shape, but I realized that I did not fully understand how curves work. I did not want to use code that I did not understand, so I decided to use two quarter circles instead. However, this made the top of the head look more square, and I am not completely satisfied with the result. In the future, I would like to learn how to use curves better so that I can create more complex shapes.
Another thing I noticed was that I spent a lot of time adjusting the coordinates of different elements. I often had to move them little by little and guess where they should be. For example, if an element was slightly too high or too low, I would have to keep changing its coordinates until it was in the position I wanted. I would like to learn a more efficient way to locate and adjust positions in the future.
Overall, I think this project gave me a good starting point for learning programming, and I hope that I can use these skills to create more interesting and interactive projects in the future.