const l_ring = 87;  //"w";

const l_mid = 69;   //"e";

const l_point = 70; //"f";

const l_thumb = 67; //"c";

​

const r_thumb = 77; //"m";

const r_point = 74; //"j";

const r_mid = 73;   //"i";

const r_ring = 79;  //"o";

const r_pinky = 80; //"p";

​

const finger_t = {

  [l_pinky]: 0, 

  [l_ring]: 0,

  [l_mid]: 0,

  [l_point]: 0,

  [l_thumb]: 0,

  [r_pinky]: 0,

  [r_ring]: 0,

  [r_mid]: 0,

  [r_point]: 0,

  [r_thumb]: 0 

};

​

const finger_move_rate = 5;

​

const w_f = 25;

const w_g = 5;

​

const h_thumb = 100;

const h_point = 200;

const h_mid = 220;

const h_ring = 200;

const h_pinky = 150;

​

let currTime = 0;

let lastTime = 0;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  currTime = millis()/1000;

  const dt = currTime - lastTime;

  lastTime = currTime;

  update_timings(dt);

  draw_hands();

}

​

function update_timings(dt) {

  for(let f in finger_t) {

    let amt = dt * finger_move_rate;

    if(keyIsDown(f)) {

      amt *= -1;

    }

    finger_t[f] = constrain(finger_t[f] + amt, 0, 1);

  }

}

​

function draw_hands() {

  const hand_l_x = 1/5 * width;

  const hand_r_x = 4/5 * width;

  // LEFT HAND

  finger(hand_l_x - w_f * 2 - w_g * 2, height, w_f, h_pinky, finger_t[l_pinky]);

  finger(hand_l_x - w_f - w_g, height, w_f, h_ring, finger_t[l_ring]);

  finger(hand_l_x, height, w_f, h_mid, finger_t[l_mid]);

  finger(hand_l_x + w_f + w_g, height, w_f, h_point, finger_t[l_point]);

  push();

  translate(hand_l_x + w_f * 2 + w_g * 2, height)

  rotate(PI/16);

  finger(0, 0, w_f, h_thumb, finger_t[l_thumb]);

  pop();

  // RIGHT HAND

  push();

  translate(hand_r_x - w_f * 2 - w_g * 2, height);

  rotate(-PI/16);

  finger(0, 0, w_f, h_thumb, finger_t[r_thumb]);

  pop();

  finger(hand_r_x - w_f - w_g, height, w_f, h_point, finger_t[r_point]);

  finger(hand_r_x, height, w_f, h_mid, finger_t[r_mid]);

  finger(hand_r_x + w_f + w_g, height, w_f, h_ring, finger_t[r_ring]);

  finger(hand_r_x + w_f * 2 + w_g * 2, height, w_f, h_pinky, finger_t[r_pinky]);

}

​

​

function finger(x, y, w, h, t) {

  push();

​

  translate(x, y);

  const rad = 1/6 * w;

  const h_top = 1/4 * h * t * t;

  const h_mid = 1/4 * h * t;

  const h_bot = 1/2 * h; // bottom doesn't dissapear when finger is down

  rect(-w/2, -h_bot - h_mid - h_top, w, h_top, rad);

  rect(-w/2, -h_bot - h_mid, w, h_mid, rad);

  rect(-w/2, -h_bot, w, h_bot, rad);

  pop();

}