digits

let finger;
let n = 1;

function preload() {
  finger = loadImage("/assets/digit2.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  translate(width / 2, height / 3);
  background(50);
  countIt();
  clusters();
}

function countIt() {
  p = n % 5;
  if (p <= 4) {
    for (let i = 0; i < p; i++) {
      if (i !== 4) {
        image(finger, -140 + 70 * i, 0, finger.width / 10, finger.height / 10);
      }
    }
  }
  if (p === 0) {
    clustered();
  }
}

function mousePressed() {
  n++;
}

function clusters() {
  c = int((n - 1) / 5);
  d = int(width / (320 * 0.2)) - 1;
  push();
  translate(-width / 2, -height / 3);
  scale(0.2, 0.2);
  for (let i = 0; i < c; i++) {
    push();
    translate(300 + (i % d) * 320, 20 + 320 * int(i / d));
    clustered();
    pop();
  }
  pop();
  if (320 * int(c / d) * 0.2 > height) {
    n = 1;
  }
}

function clustered() {
  for (let i = 0; i < 4; i++) {
    if (i !== 4) {
      image(finger, -140 + 70 * i, 0, finger.width / 10, finger.height / 10);
    }
  }
  push();
  translate(120, -20);
  rotate(PI / 3.5);
  image(finger, 0, 0, finger.width / 10, finger.height / 6.5);
  pop();
}