limit the other end

// sketch.js

var px = 0;
var dpx = 0.1;

var sa = 0.25;  // smile angle
var dsa = 0.01;  // change in smile angle

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);

  sa = sa + dsa;
  if (sa > 0.95) {
    dsa = -dsa;
  }
  if (sa < 0.25) {
    dsa = -dsa;
  }
  drawSmile();

} //draw

function drawSmile() {
  stroke(0);
  strokeWeight(8);
  noFill();
  arc(width/2, height/2, 300, 300,
      sa, PI - sa);
} //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