function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  canvas = createCanvas(800,800)

  //background(200)

  mascot = new drummer(350, 600);

  mascot.display()

  mascot.update()

}

​

​

class drummer {

  constructor(startX, startY) {

    this.x = startX;

    this.y = startY;

    this.speed = 5.5;

    this.swaySpeed = 0.1;

    this.eyesInnerColor = color("#5b37cb")

    this.eyesOuterColor = color('#f8943e')

    this.bodyColor = color("#f8943e");

    this.armsColor = color("#5b37cb")

  }

  update() {

    this.x = this.x + sin(frameCount * 0.05) * this.swaySpeed; // make him move side to side! 

    // this.swaySpeed

  }

  updateSpeedSway(drummingSpeed, swayingSpeed){

    let speedMap = map(drummingSpeed, 50, 200, 12, 3);

    let swayMap = map(swayingSpeed, 50, 200, 4, 7)

    this.speed = speedMap;

    this.swaySpeed = swayMap;

  }

  display() {

    push();

    translate(this.x, this.y)

    drawArms(0, 0, this.speed, this.armsColor);

    noStroke();

    // creature head

    fill(this.bodyColor);

    ellipse(0, 0, 160, 80);

​

    // eyes outer

    fill(this.eyesOuterColor);

    ellipse(-50, -40, 50, 50);

    ellipse(50, -40, 50, 50);

    // eyes inner

    fill(this.eyesInnerColor);

    ellipse(-50, -40, 30, 30);

    ellipse(50, -40, 30, 30);

    // fill('black')

    // ellipse(-50, -40, 10, 10);

    // ellipse(50, -40, 10, 10);

    // mouth

    //ellipse(0, 10, 40, 40)

    rect(-16, 0, 30, 6);

​

    //arms - they are drumming!!

    function drawArms(x, y, speed, armsColor) {

      fill(armsColor)

      push();

      let angle = frameCount / speed;

      rotate(radians(cos(angle) * 8));

      translate(0, -10);

      strokeWeight(15);

      stroke(armsColor);

​

      //left arm

      curve(-7, 17, -37, 47, -58, 28, -19, 40);

​

      //right arm

      curve(7, 17, 37, 49, 58, 30, 19, 42);

      pop();

    }

​

    pop();

  }

}

​