let face;

let dots = [];

function setup() {

  createCanvas(400, 400);

  face1 = new Face(200,200);

  for (let i = 0; i <6; i++){

    dots[i] = new Dot(50* i,10);

  }

​

}

​

function draw() {

  background(220);

  face1.show();

  for (let i = 0; i <6; i++){

  dots[i].show();

  }

​

  if(keyIsPressed == true){

    if(keyCode == LEFT_ARROW){

      face1.faceX-= 3;

      face1.faceL();

    }else if (keyCode == RIGHT_ARROW){

      face1.faceX+= 3;

      face1.faceR();

    }

  }

    if (face1.faceX > width) {

    face1.faceX = 0;

  }

}

​

class Face{

  constructor(x,y){

    this.faceX = x;

    this.faceY = y;

  }

  show(){

    fill(255);

    ellipse(this.faceX, this.faceY, 50,50);

    fill(0);

    ellipse(this.faceX-10, this.faceY-5, 8,8);

    ellipse(this.faceX+10, this.faceY-5,8,8);

    ellipse(this.faceX, this.faceY+10, 10,10);   

  }

faceL(){

    fill(255);

    ellipse(this.faceX, this.faceY, 50,50);

    fill(0);

    ellipse(this.faceX-15, this.faceY-5, 8,8);

    ellipse(this.faceX+5, this.faceY-5,8,8);

    ellipse(this.faceX-5, this.faceY+8, 10,10);   

  }

faceR(){

    fill(255);

    ellipse(this.faceX, this.faceY, 50,50);

    fill(0);

    ellipse(this.faceX-5, this.faceY-5, 8,8);

    ellipse(this.faceX+13, this.faceY-5,8,8);

    ellipse(this.faceX+5, this.faceY+10, 10,10);   

} 

}

​

class Dot {

  constructor (x,y){

    this.x = x;

    this.y = y;

  }

  show(){

    noStroke();

    fill(255);

    ellipse(this.x, this.y, 20, 20);

  }

}