​

function setup() {

  createCanvas(1000, 1000);

​

angleMode(DEGREES)

​

}

​

function draw() {

  background(255)

​

​

  clap = new hand(mouseX, height / 2);

  clap.display();

​

​

}

​

​

​

class hand {

​

  constructor(ox, oy) {

    this.x = ox;

    this.y = oy;

  }

​

  display() {

     //noStroke()

    push()

     translate(this.x+40, this.y+25)

    beginShape()

    curveVertex(51.8, 27);

    vertex(51.8, 20.4)

    vertex(50, 9.3)

    vertex(37.2, -21);

    vertex(15.3, -42.4);

    vertex(6.7, -41.7)

    vertex(10.9, -30)

    vertex(24.9, -14.7)

    vertex(16, -19)

    vertex(-19.4, -53.1)

    vertex(-26.5, -42.8)

    vertex(0.88, -16)

    vertex(-1.55, -13.7)

    vertex(-32.5, -44.2)

    vertex(-41, -34.8)

    vertex(-10.6, -4.1)

    vertex(-13, -1.7)

    vertex(-39.4, -28.2)

    vertex(-49, -20)

    vertex(-19.4, 9.9)

    vertex(-21.7, 12)

    vertex(-42.4, -8)

    vertex(-50.5, -7.3)

    vertex(-45.6, 5.5)

    vertex(-13.6, 38.5)

    vertex(19.8, 52.5)

    vertex(27, 51.5)

    endShape(CLOSE)

    pop()

     strokeWeight(1)

    push()

     translate(this.x-11, this.y+3)

    beginShape()

    curveVertex(51.8, 27);

    vertex(51.8, 20.4)

    vertex(50, 9.3)

    vertex(37.2, -21);

    vertex(15.3, -42.4);

    vertex(6.7, -41.7)

    vertex(10.9, -30)

    vertex(24.9, -14.7)

    vertex(16, -19)

    vertex(-19.4, -53.1)

    vertex(-26.5, -42.8)

    vertex(0.88, -16)

    vertex(-1.55, -13.7)

    vertex(-32.5, -44.2)

    vertex(-41, -34.8)

    vertex(-10.6, -4.1)

    vertex(-13, -1.7)

    vertex(-39.4, -28.2)

    vertex(-49, -20)

    vertex(-19.4, 9.9)

    vertex(-21.7, 12)

    vertex(-42.4, -8)

    vertex(-50.5, -7.3)

    vertex(-45.6, 5.5)

    vertex(-13.6, 38.5)

    vertex(19.8, 52.5)

    vertex(27, 51.5)

    endShape(CLOSE)

    pop()

​

    push()

     translate(this.x, this.y)

    beginShape()

    curveVertex(51.8, 27);

    vertex(51.8, 20.4)

    vertex(50, 9.3)

    vertex(37.2, -21);

    vertex(15.3, -42.4);

    vertex(6.7, -41.7)

    vertex(10.9, -30)

    vertex(24.9, -14.7)

    vertex(16, -19)

    vertex(-19.4, -53.1)

    vertex(-26.5, -42.8)

    vertex(0.88, -16)

    vertex(-1.55, -13.7)

    vertex(-32.5, -44.2)

    vertex(-41, -34.8)

    vertex(-10.6, -4.1)

    vertex(-13, -1.7)

    vertex(-39.4, -28.2)

    vertex(-49, -20)

    vertex(-19.4, 9.9)

    vertex(-21.7, 12)

    vertex(-42.4, -8)

    vertex(-50.5, -7.3)

    vertex(-45.6, 5.5)

    vertex(-13.6, 38.5)

    vertex(19.8, 52.5)

    vertex(27, 51.5)

    endShape(CLOSE)

    pop()

    push()

      translate(this.x, this.y)

    beginShape()

    curveVertex(22, -58);

    curveVertex(29, -56.5);

    curveVertex(25.8, -45.8);

    curveVertex(18.9, -47.8);

    endShape(CLOSE)

    beginShape()

    curveVertex(32, -42);

    curveVertex(45.8, -56);

    curveVertex(51, -51);

    curveVertex(37, -37);    

    endShape(CLOSE)

     beginShape()

    curveVertex(41, -30.8);

    curveVertex(53, -34.6);

    curveVertex(55, -27.8);

    curveVertex(43.4, -24);    

    endShape(CLOSE)    

    pop()

    push()

      translate(this.x-9, this.y+3)

    rotate(180)

    beginShape()

    curveVertex(22, -58);

    curveVertex(29, -56.5);

    curveVertex(25.8, -45.8);

    curveVertex(18.9, -47.8);

    endShape(CLOSE)

    beginShape()

    curveVertex(32, -42);

    curveVertex(45.8, -56);

    curveVertex(51, -51);

    curveVertex(37, -37);    

    endShape(CLOSE)

     beginShape()

    curveVertex(41, -30.8);

    curveVertex(53, -34.6);

    curveVertex(55, -27.8);

    curveVertex(43.4, -24);    

    endShape(CLOSE)    

    pop()

  }

​

​

}