Concept
Before starting this class, I had no prior experience using p5js. However, I have some previous coding experience, which made the learning experience a bit smoother. Given this and the fact that I’m not that much of an artists, I decided to focus on getting my basic features onto the portrait. Before even beganing to type anything, I started planning what shapes, I would use to recreate my features through code and once I had finished that I began coding.
Process
Before starting, I decided that I wanted my interactivity to be the background colors changing with every click. To do so, I began to work on the background and decided to divide it into three parts with the help of triangles. Once the background was done, I started working on the portrait of myself. I originally used circles to make up the shape of the head and body; however, I later switched them to ellipses, as I found those looked better. Next, I worked on the facial features, starting with the hair, which I made using a lot of small circles overlapping each other. Once I was happy with that, I added a few more circles to make the eyes and pupils, and created a mouth by using an arc, then I added some smaller details, such as a triangle for the nosem lines for the eyebrows and more ellipses as the ears. Additionally, I used the p5js reference website as a guide for working with the shapes.
After finishing the portrait, I started working on the interactivity. My basic idea to achieve the changing background colors was to randomise the RGB values, but at first I was unsure where to start, so I looked to The Code Train videos as a reference, specifically the video on random functions. From there, I was able to implement the random function in my code and add in the interactivity.
Code I’m proud of
My favorite part of the code is the interactivity section. After I wrote all the code for it, instead of changing color when I clicked the mouse, the background was rapidly changing non-stop. Again, I made some adjustments to it and managed to make it so the base colors were showing; however, the interactivity was still not working. I kept looking through the video and trying to change things in my code, but I was not able to make it work. After 20 minutes, I decided to ask AI for help, and it immediately pointed out to me that I had accidentally put the mouse click function inside my draw function. Immediately after fixing that mistake, the feature was working as intended.
function mouseClicked() {
r=random(0,255);
g=random(0,255);
b=random(0,255);
r1=random(0,255);
g1=random(0,255);
b1=random(0,255);
r2=random(0,255);
g2=random(0,255);
b2=random(0,255);
}
Reflection
As I continue this class, I hope to further my mastery of the website by learning more about it’s capabilites and create even better projects. In terms of improving this first project, I think I’d want to look into adding more kinds of interactivity, possibly some kind of animation. In addition, I’d want to learn more techniques that could have helped. Overall, I’m happy with what I was able to achieve during my first assignment using p5js.