​

class User {

  constructor(startX, startY) {

    this.x = startX;

    this.y = startY;

    this.avatar =  "avatar 1";

  }

​

  display(self) {

    if (this.avatar == "avatar 1"){

      this.avatar1();

    } else {

      this.avatar2();

    }

  }

​

  direction(self) {

    // defining user movement

    if (this.x > 25 && keyIsDown(65)) {

      // 65 is left keycode

      this.x -= 5;

    }

​

    if (this.x < imgW - 25 && keyIsDown(68)) {

      this.x += 5;

    }

​

    if (this.y > 25 && keyIsDown(87)) {

      this.y -= 5;

    }

​

    if (this.y < imgH - 25 && keyIsDown(83)) {

      this.y += 5;

    }

  }

  switchAvatar(self){

    // switch between 2 avatar and update this.avatar using if statements

    if (this.avatar == "avatar 1"){

      this.avatar1()

      this.avatar = "avatar 2"

    }

    else{

      this.avatar2()

      this.avatar = "avatar 1"

    }

  }

  // define avatar set 1

  avatar1(self) {

    noStroke();

    // head

    fill("cyan");

    ellipse(this.x, this.y, 40, 30);

    // eyes

    fill("white");

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

    ellipse(this.x + 10, this.y - 10, 20, 20);

    fill("black");

    ellipse(this.x - 5, this.y - 10, 5, 5);

    ellipse(this.x + 5, this.y - 10, 5, 5);

​

    // nose

    fill("pink");

    ellipse(this.x, this.y + 5, 10);

​

    // arms

    push();

    fill("black");

    rect(this.x + 20, this.y, 10, 2);

    rect(this.x - 30, this.y, 10, 2);

    pop();

  }

  // define avatar set 2

  avatar2(self) {

    noStroke();

    // head

    fill("cyan");

    ellipse(this.x, this.y, 400, 30);

  }

}

​