p5 Js Face

Update 0 Week 6 Assignment:

For the HTML addition assignment, I added a slider to this sketch in order to control the mouth this way.

My first assignment in processing is a face made of shapes and curves.

I was hoping to use animation to make the mouth move around on rollover using this code but couldn't figure out how to make the movements more subtle and not have the shape follow the cursor. I found this tutorial to for a simpler interaction and used that for the interactive mouth. 

I'd like to keep trying to build something with bezier curves because I think it would be interesting to make organic shapes that undulate or recoil from the mouse like something living. I think acceleration would help here.  The single-speed interactions in the sketch below feel robotic but it's fitting to the flat, aesthetic of the composition. 

Below is a static earlier iteration where i used curves to create a unibrow and mouth. 

Code

For the animated version:

function setup() {
  createCanvas(400, 400); 
  var button = createButton();

}

function draw() {
  background(236, 269, 85);
  
    

  
  strokeWeight(0);
  // Draw a rectangle with rounded corners having the following radii:
// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.

    // head
  fill (125, 255, 206);
  rect(80, 80, 240, 355, 75, 75, 45, 45);
        // left eye

  fill (random(255), random(255), random(255));

  rect(130, 130, 55, 35, 50);
  
  
  // right eye
fill (254, 190, 190);
 
  rect(220, 120, 55, 55, 50);
              
  
  
  //ear l
  fill (125, 255, 206);
  rect(36, 160, 85, 75, 50);
  
   //ear r
  fill (125, 255, 206);
  rect(285, 160, 85, 75, 50);
 
  //unibrow
  fill (155, 205, 206);

 stroke(205, 192, 10);

   arc(198, 85, 200, 90, PI, 0);  // upper half of circle

  // nose x, y
    fill (115, 215, 206);

    arc(210, 200, 100, 50, PI / 2, 3 * PI / 2); // 180 degrees

  //mouth before
  
  fill (12, 25, 96);

//  stroke(0);
//  beginShape();
//  curveVertex(250, 250); // the first control point
//  curveVertex(250, 250); // is also the start point of curve
//  curveVertex(230, 270);
//curveVertex(200, 280);
//  curveVertex(170, 270);
//  curveVertex(150, 250); // the last point of curve
//  curveVertex(125, 250); // is also the last control point
//  endShape();
  
  //new mouth:
    // some mouseover code i found that i wanted to make into a mouth
  //realized it's better as a toungue shape that moves with the mouse
  //x1,y1,x2,y2,x3,y3
 
  fill(205, 190, 280);
 

 translate(width/2, height/1.5);
    scale(mouseX / 800, mouseY / 800);

    fill(205, 190, 280);
    triangle(0, 20, -80, -40, 80, -40);

}
Code for the static version

function setup() {
  createCanvas(400, 400); 

}

function draw() {
  background(236, 269, 85);
  
    

  
  strokeWeight(0);
  // Draw a rectangle with rounded corners having the following radii:
// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.

    // head
  fill (125, 255, 206);
  rect(80, 80, 240, 355, 75, 75, 45, 45);
        // left eye

  fill (254, 190, 190);

  rect(130, 120, 55, 55, 50);
  
  
  // right eye
fill (254, 190, 190);
 
  rect(220, 120, 55, 55, 50);
              
  
  
  //ear
  fill (125, 255, 206);
  rect(36, 180, 85, 75, 50);
  
   //ear
  fill (125, 255, 206);
  rect(285, 180, 85, 75, 50);
 
  //hm
    fill (25, 25, 26);

  stroke(255, 102, 10);

    arc(195, 135, 190, 50, PI, 0);  // upper half of circle

  // nose x, y
    fill (115, 215, 206);

    arc(210, 200, 100, 50, PI / 2, 3 * PI / 2); // 180 degrees

  
  fill (12, 25, 96);

  stroke(0);
  beginShape();
  curveVertex(250, 250); // the first control point
  curveVertex(250, 250); // is also the start point of curve
  curveVertex(230, 270);
  curveVertex(200, 280);
  curveVertex(170, 270);
  curveVertex(150, 250); // the last point of curve
  curveVertex(125, 250); // is also the last control point
  endShape();
}