let piles = [[]];

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  let btn = createButton('1');

  btn.position(85, 24);

  btn.mousePressed( ()=>addOneAtIndex(0) );

}

​

function draw() {

  background(243,188,46);

  fill(150, 30, 5);

  text("Prog-ctober",20,40);

  text("st",112,35);

  fill(95, 84, 38);

  pileIndex = 0;

  for (pile of piles){

    pileIndex+=1;

    howMany = pile.length;

    switch (howMany){

      case 9: drawOneAt(380-pileIndex*80+2*14, 350-2*16,sin(frameCount*3)*5);

      case 8: text( ONE, 380-pileIndex*80+1*14, 350-2*16 );

      case 7: drawOneAt(380-pileIndex*80+2*14, 350-1*16 ,sin(frameCount*2-15)*5);

      case 6: text( ONE, 380-pileIndex*80+2*14, 350-0*16 );

      case 5: text( ONE, 380-pileIndex*80+0*14, 350-2*16 );

      case 4: drawOneAt(380-pileIndex*80+1*14, 350-1*16 ,sin(frameCount*1.2+15)*5);

      case 3: drawOneAt(380-pileIndex*80+1*14, 350-0*16,sin(frameCount*.7+5)*5);

      case 2: drawOneAt(380-pileIndex*80, 350-1*16,sin(frameCount)*5);

      case 1: drawOneAt(380-pileIndex*80, 350-0*16,sin(frameCount*.9+5)*5);

    }

    /*

    whichOne = 0;

    for (one of pile){

      whichOne += 1;

      text( '1', 380-pileIndex*80, 350-whichOne*16 );

    }

    */

  }

}

​

function drawOneAt(x,y,rot){

  push(); 

  translate(x,y);

  rotate(rot); 

  text(ONE,0,0); pop();

}

​

function addOneAtIndex(index=0){

  if (piles[index].length<9){

    piles[index].push('1');

  } else {

    piles.push([]);

    addOneAtIndex(index+1);

    piles[index] = [];

  }

}