animated ellipse mouth

// sketch.js

var px = 0;
var dpx = 0.1;

var sw = 150;  // smile width 100..200
var dsw = 1.2;

var sh = 40;  // smile height 20..60
var dsh = 0.8;

function setup() {
  var cnv = createCanvas(640, 400);
  cnv.position(24, 140);

  background(127);
} //setup


function draw() {

  noStroke();

  // yellow face
  fill(255, 225, 0);
  ellipse(width/2, height/2, 400, 400);

  // eye whites
  // Left
  fill(255);
  ellipse(width/2 - 80, height/2 - 60, 100, 100);

  // Right
  fill(255);
  ellipse(width/2 + 80, height/2 - 60, 100, 100);

  px = px + dpx;
  if (px > 40) {
    dpx = -dpx;
  }
  if (px < -40) {
    dpx = -dpx;
  }
  drawPupils();

  // Rings
  noFill();
  stroke(255, 225, 0);
  strokeWeight(40);
  var diam = 100 + 40;
  ellipse(width/2 - 80, height/2 - 60, diam, diam);
  ellipse(width/2 + 80, height/2 - 60, diam, diam);

  sw = sw + dsw;
  if (sw > 200) {
    dsw = -dsw;
  }
  if (sw < 100) {
    dsw = -dsw;
  }

  sh = sh + dsh;
  if (sh > 60) {
    dsh = -dsh;
  }
  if (sh < 20) {
    dsh = -dsh;
  }

  drawSmile();

} //draw

function drawSmile() {
  stroke(0);
  strokeWeight(8);
  fill(191, 0, 0);
  ellipse(320, 300, sw, sh);
} //drawSmile

function drawPupils() {
  // pupils
  // Left
  fill(0);
  ellipse(width/2 - 80 + px, height/2 - 60, 40, 50);

  // Right
  fill(0);
  ellipse(width/2 + 80 + px, height/2 - 60, 40, 50);
} //drawPupils