let frequency = 0.09;  // Speed of the bobbing

​

function setup() {

  createCanvas(400, 400);

}

​

class playerCharacters {

  // x1Body, y1Body, x2Body, y2Body, x3Body, y3Body,

  constructor(color, xHead, yHead){

    this.amp = amplitude; 

    this.freq = frequency;

    this.playerColor = color; 

    this.xHead = xHead + width / 2;

    this.yHead = yHead + height / 2 + sin(frameCount * this.freq) * this.amp;

    this.x1Body = this.xHead - 20;

    this.y1Body = this.yHead + 150;

    this.x2Body = this.xHead - 20;

    this.y2Body = this.yHead + 2; 

    this.x3Body = this.xHead + 20;

    this.y3Body = this.yHead + 2;   

    this.x4Body = this.xHead + 20;

    this.y4Body = this.yHead + 150;

    this.showBody = true; 

  }

​

  player1Moves() {

    fill(this.playerColor);

    if (keyIsDown(UP_ARROW)) {

      ellipse(this.xHead, this.yHead - 8, 50, 50);  

​

      let y1temp = this.y1Body - 50; 

      let y4temp = this.y4Body - 50; 

      bezier(this.x1Body, y1temp, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, y4temp);

    } 

    else if (keyIsDown(DOWN_ARROW)){

      ellipse(this.xHead, this.yHead + 50, 50, 50);  

      let y2temp = this.y2Body + 50; 

      let y3temp = this.y3Body + 50; 

      bezier(this.x1Body, this.y1Body, this.x2Body, y2temp, this.x3Body, y3temp, this.x4Body, this.y4Body);

    }

    else if (keyIsDown(RIGHT_ARROW)){

      ellipse(this.xHead + 37, this.yHead + 18, 50, 50); 

      let x1temp = this.x1Body + 10;

      let x4temp = this.x4Body + 20;

      let x2temp = this.x2Body + 35;

      let y2temp = this.y2Body + 18;

      let x3temp = this.x3Body + 50;

      let y3temp = this.y3Body + 18;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);     

    }

    else if (keyIsDown(LEFT_ARROW)){

      ellipse(this.xHead - 37, this.yHead + 18, 50, 50); 

      let x1temp = this.x1Body - 20;

      let x4temp = this.x4Body - 10;

      let x2temp = this.x2Body - 50;

      let y2temp = this.y2Body + 18;

      let x3temp = this.x3Body - 35;

      let y3temp = this.y3Body + 18;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);  

    }

​

    else {

      ellipse(this.xHead, this.yHead, 50, 50);  

      bezier(this.x1Body, this.y1Body, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, this.y4Body);

    }

  }

  player2Moves() {

    fill(this.playerColor);

    if (keyIsDown(87)) {

      ellipse(this.xHead, this.yHead - 8, 50, 50);  

​

      let y1temp = this.y1Body - 50; 

      let y4temp = this.y4Body - 50; 

      bezier(this.x1Body, y1temp, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, y4temp);

    } 

    else if (keyIsDown(83)){

      ellipse(this.xHead, this.yHead + 50, 50, 50);  

      let y2temp = this.y2Body + 50; 

      let y3temp = this.y3Body + 50; 

      bezier(this.x1Body, this.y1Body, this.x2Body, y2temp, this.x3Body, y3temp, this.x4Body, this.y4Body);

    }

    else if (keyIsDown(68)){

      ellipse(this.xHead + 37, this.yHead + 18, 50, 50); 

      let x1temp = this.x1Body + 10;

      let x4temp = this.x4Body + 20;

      let x2temp = this.x2Body + 35;

      let y2temp = this.y2Body + 18;

      let x3temp = this.x3Body + 50;

      let y3temp = this.y3Body + 18;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);   

    }

    else if (keyIsDown(65)){

      ellipse(this.xHead - 37, this.yHead + 18, 50, 50); 

      let x1temp = this.x1Body - 20;

      let x4temp = this.x4Body - 10;

      let x2temp = this.x2Body - 50;

      let y2temp = this.y2Body + 18;

      let x3temp = this.x3Body - 35;

      let y3temp = this.y3Body + 18;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);  

    }

    else {

      ellipse(this.xHead, this.yHead, 50, 50);  

      bezier(this.x1Body, this.y1Body, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, this.y4Body);

    }

  }

}

​

function draw() {

  background(220);

  noStroke();

  player1 = new playerCharacters('red', -65, 0);

  player2 = new playerCharacters('blue', 65, 0);

​

  player1.player1Moves();

  player2.player2Moves();

​

​

}

​

​

​