Concept
I intended for this self-portrait to have a portrait which is fairly accurate but cartoonish, and I also wanted to experiment with many of the commands in the p5js and I chose to do this by making my portrait dynamic. My main focus was the eyes.
Highlight
translate(x, y); //makes the center of the canvas the point from which everything rotates. otherwise it would have been rotating around (0,0)
// -18 because that is
// dont ask me to explain this, I got help from the reference of atan2()
let mx = mouseX - x;
let my = mouseY - y;
let a = atan2(my, mx); // atan2 is weird, its atan2(y,x) rather than x,y :/
let v = createVector(x, y);
let d = dist(mouseX, mouseY, x, y);
let d0 = d * constant;
// the maximum of 18 has to be found manually, so i added the mouseIsPressed if statement below to help
if (d0 > max) {
d0 = max;
}
v.setMag(d0);
v.setHeading(a);
// for debugging magnitude of the vector
// if( mouseIsPressed == true) {
// print(d0);
// }
translate(v);
First to explain what the code is doing it helps to also use the embedded sketch whilst reading this. The code above is the logic behind the movement of the eyes. The pupils follow the cursor of the user but move further out or further into the pupil based on how far the cursor is from the center of the eye. I did this to make the eyes more realistic but also to make the overall sketch more interesting and more fun to interact with. I did this by calculating the angle from the center of the pupil to the cursor (with a bit of help from the p5js reference), then I created a vector who’s origin point is the pupil and I set it’s angle to be the angle from the center of the pupil to the cursor and it’s magnitude to be based on how far the cursor is from the center of the eye but I limited the magnitude. Once the vector was made I had the eyes translate using the vector using the translate() method. To make things a little more neat I put all of it into a function. I did this because I worked on the eyes feature on a separate sketch but with only one eye and then just placed it into a function so that I could easily create two eyes for this sketch.
Sketch
Reflection
In hindsight there are a lot of things I would have done differently. Firstly, it was only towards the end that I started using functions more diligently and I hardcoded a lot of my values which meant that I no longer had the luxury of changing the canvas size without having to painstakingly go through every shape. Also, I felt I spent a lot of time trying to do the eyes mechanic all by myself, I feel I would have both enjoyed and benefited greatly by working on it with someone else since for a while I was stuck on what to do. In summary, I would make my code more neat in the future and soft-code more of my variables where I can, and lastly, I should try to get help/ideas from others rather than stick only to myself.