​

function setup() {

  createCanvas(400, 400);

  pixelDensity(1);

​

  frameRate(1);

  //createLoop({duration:10, gif:true})

}

​

function draw() {

  background(220);

​

  // Random hand

  handWidth = random(100, 200);

  handHeight = random(100, 180);

  fingerWidth = handWidth / 5;

  fingerHeight = random(80, 150);

  fingerSpace = fingerWidth / 3;

  fingerVariation = 0;

  thumbHeight = fingerHeight / 2;

  handOrientation = random(["left", "right"]);

​

  // add a new hand

  hand = new Hand(width / 2, 250, 0);

  //hand = new Hand(300,300,0);

​

  // stop it

  //noLoop();

}

​

function mouseClicked() {

  redraw();

}

​

class Hand {

  // To make a hand generator based on my style

  constructor(x, y, col) {

    // Palm

    stroke(col);

    fill(col);

    rectMode(CENTER);

    if (handOrientation == "left") {

      rect(

        x,

        y,

        handWidth,

        handHeight,

        handWidth / 2,

        handWidth / 2,

        handWidth / 2,

        0

      );

    } else {

      rect(

        x,

        y,

        handWidth,

        handHeight,

        handWidth / 2,

        handWidth / 2,

        0,

        handWidth / 2

      );

    }

​

    // Fingers

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

      // Finger height variation

      if (i == 0 && handOrientation == "left") {

        fingerVariation = 25;

      }

      if (i == 1 && handOrientation == "left") {

        fingerVariation = 40;

      }

      if (i == 2 && handOrientation == "left") {

        fingerVariation = 20;

      }

      if (i == 3 && handOrientation == "left") {

        fingerVariation = 0;

      }

      if (i == 0 && handOrientation == "right") {

        fingerVariation = 0;

      }

      if (i == 1 && handOrientation == "right") {

        fingerVariation = 20;

      }

      if (i == 2 && handOrientation == "right") {

        fingerVariation = 40;

      }

      if (i == 3 && handOrientation == "right") {

        fingerVariation = 25;

      }

​

      // Each finger

      rect(

        x - handWidth / 2 + fingerWidth / 2 + (fingerSpace + fingerWidth) * i,

        y - fingerHeight / 2 - fingerVariation / 2,

        fingerWidth,

        fingerHeight + fingerVariation,

        fingerWidth / 2,

        fingerWidth / 2,

        0,

        0

      );

    }

​

    // fill(40);

    rectMode(CENTER);

    //Thumb

    if (handOrientation == "left") {

      rect(

        x - handWidth / 2 - fingerWidth / 2 - fingerSpace,

        y + handHeight / 2 - thumbHeight / 2 - thumbHeight / 2,

        fingerWidth,

        thumbHeight,

        0,

        fingerWidth,

        0,

        0

      );

      triangle(

        x - handWidth / 2,

        y + handHeight / 2,

        x - handWidth / 2 - fingerWidth - fingerSpace,

        y + handHeight / 2 - thumbHeight / 2,

        x - handWidth / 2,

        y + handHeight / 2 - thumbHeight

      );

    } else {

      rect(

        x + handWidth / 2 + fingerWidth / 2 + fingerSpace,

        y + handHeight / 2 - thumbHeight / 2 - thumbHeight / 2,

        fingerWidth,

        thumbHeight,

        fingerWidth,

        0,

        0,

        0

      );

      triangle(

        x + handWidth / 2,

        y + handHeight / 2,

        x + handWidth / 2 + fingerWidth + fingerSpace,

        y + handHeight / 2 - thumbHeight / 2,

        x + handWidth / 2,

        y + handHeight / 2 - thumbHeight

      );

    }

  }

}

​