Mini Project 2- Interactive Self Portrait

Project Link:
https://editor.p5js.org/dis7588/sketches/URbRw3i4w

Brief Description:

For this mini project I added more interactive functions to my original self portrait (mini project 1).
Mini project 1

New elements:

• I made the pupils follow the mouse:
• Also I used the “keyIsPressed” funtion to change the color of my lips from pink to red by pressing key R| r on the keyboard
• Beside that the background changes color depending on the position of the mouse from left (light yellow) to right (green)
• Finally I wanted to add a non-stoping motion in the eyebrows to simulate a facial expression.

The dream I’m trying to describe through my sketch is one I had when I was in elementary school, which I always found kind of funny. I am one of those people who do not have that much facial motion and I had a friend in particular that could move his eyebrows as if they where “dancing”, I found it particularly entertaining and it was a “talent” I wanted to posses. However, in my dream I was able to do it but I couldn’t stop so I got scared that’s why my eyebrows in this animation keep moving.

Coding Process:

Eyes follow the mouse

let leftEyeAngle = atan2(mouseY - leftEyeY, mouseX - leftEyeX);
let rightEyeAngle = atan2(mouseY - rightEyeY, mouseX - rightEyeX);

let pupilDistance = 7;
let leftPupilX = leftEyeX + cos(leftEyeAngle) * pupilDistance;
let leftPupilY = leftEyeY + sin(leftEyeAngle) * pupilDistance;
let rightPupilX = rightEyeX + cos(rightEyeAngle) * pupilDistance;
let rightPupilY = rightEyeY + sin(rightEyeAngle) * pupilDistance;

To make the eyes follow the mouse I started by calculating the angles for both eyes and stating the pupil distance (both variables  make the mouse control the motion). Then by using sin and cos calculated by the angle and distance (previously state) to make the pupils move with the mouse cursor in a proportionate way.

Change the lip color: 

if (keyIsPressed) {
if (key=='r'||key=='R')
fill(255,0,0)
triangle(193,238,188,251,200,251)
triangle(200,251,211,251,205,238)
triangle(200,265,188,251,211,251)}

else {(key=='p'||key=='P')
fill (255,192,203)
triangle(193,238,188,251,200,251)
triangle(200,251,211,251,205,238)
triangle(200,265,188,251,211,251) }

I used the function keyIsPressed to check that key r is being pressed whether lower and uppercase.  I used a conditional (if, else) to condition true for color red and this also draws the triangles that shape the mouth, the color to a dark purple (false) when pressing letter p, P (the neutral color is pink) in this part of the conditional  the lips are also drawn but the stroke is not that visible so the lips look darker.

Move eyebrows:

//eyebrows 
let eyebrowMovement = sin(frameCount * 0.07) * 5; 
// Draw eyebrows
noStroke();
fill(46, 25, 21);

// Left eyebrow
rect(154, 175 - eyebrowMovement, 30, eyebrowHeight);

// Right eyebrow
rect(217, 175 - eyebrowMovement, 30, eyebrowHeight);

The function used to make the eyebrows “dance” to calculate with frame count the frame by 0.007 to adjust the speed of the movement, meanwhile the sin function creates the waveform multiplied by 5 for amplitude to determine the range at which the eyebrows could move (so that is limited to my forehead). The other lines draw my  left and right eyebrows, compared to my first sketch I made the eyebrows just be rectangles, the drawing includes eyebrowMovement that calculated the up and down motion that is mirrored.

Reflection:

In terms of shifting for the setup function to the draw function is interesting to start exploring the possibilities to create an interactive sketch, I was mainly confused on why the interactions did not happen when I try them for the first time specially the “change the lip color” interaction in which I worked with conditionals; I figured out that it was because I had the lips within the setup function therefore it wouldn’t change. 

I would say that the difference between real world interactions and digital interaction vary a lot in the sense they can be interpreted and the abilities and tools we have to translate real experiences into the digital environment, when using mouse and keyboard interactions at first I was a little bit lost on what type of interactions I could use to portray my childhood dream in this sketch, something that I would like to add with further experience was to make the facial expression more believable and smooth, one thing that I couldn’t figure out completely therefore I didn’t use was to change the mouth expression from serious to smiley.