// this draws a bucket from -10,-10 to 10,10
function draw_bucket(cur_dump, face_right) {
  // dumping logic: from 0-0.5 we dump, then rest until 1.0
  angleMode(DEGREES); // Change the mode to DEGREES
  let cur_angle = 0;
  let dump_end = 0.15;
  let full_rot = 60;
  if (cur_dump < 0.2)
    // bucket is falling
    cur_angle = map(cur_dump, 0, dump_end, 0, full_rot);
  else if (cur_dump < 0.5)
    // bucket is recovering
    cur_angle = map(cur_dump, dump_end, 0.5, full_rot, 0);

  // dark containers
  fill(30, 40, 70);
  if(face_right) {
    rotate(cur_angle);
    // just draw one in the center of the screen  rect(width/)
    rect(-10, -10, 20, 20);
    rect(-10, -14,  4, 24);
  }
  else {
    rotate(-cur_angle);
    // just draw one in the center of the screen  rect(width/)
    rect(-10, -10, 20, 20);
    rect(  6, -14,  4, 24);
  }
}

// dump goes from 0.0 to 0.5
function ball_drop(cur_dump, face_right, dest_x, dest_y) {
  // blueish liquid
  fill(100, 120, 200);

  let cur_x = 0;
  let cur_y = -10;
  if (cur_dump < 0.5) {
    // bucket is recovering
    cur_x = map(cur_dump, 0, 0.5, 0, dest_x);
    cur_y = map(cur_dump, 0, 0.5, -10, -10+dest_y);
  }

  ellipse(cur_x, cur_y, 10, 10);
}

function draw_one_frame(cur_frac) {
  let sun_size = height/8;

  noStroke();

  // background
  fill(224, 224, 224);
  rect(0, 0, width, height);

  // bucketWidth
  let bw = height/210;

  let num_rows = 5;
  let num_cols = 8;
  let cell_width = width / (num_cols + 1);
  let cell_height = height / (num_rows + 1);

  let cycle_frac = cur_frac;

  let scaled_offset_y = cell_height / bw;
  let scaled_offset_x = cell_width  / bw;

  for (let j=0; j<num_rows; j++) {
    let cur_y = (j+1)*cell_height;
    for (let i=0; i<num_cols; i++) {
      let cur_x = (i+1)*cell_width;
      push()
        translate(cur_x, cur_y);
        scale(bw);
        ball_drop(cycle_frac, true, scaled_offset_x, scaled_offset_y);
      pop();
    }    
  }

  for (let j=0; j<num_rows; j++) {
    let cur_y = (j+1)*cell_height;
    for (let i=0; i<num_cols; i++) {
      let cur_x = (i+1)*cell_width;
      push()
        translate(cur_x, cur_y);
        scale(bw);
        draw_bucket(cycle_frac, true);
      pop();
    }    
  }
/*

  let cycle_frac = cur_frac;
  // scale one bucket to the center of the screen
  push()
    translate(width/3, height/2);
    scale(bw);
    draw_bucket(cycle_frac, false);
  pop();

  let cycle_frac2 = (cycle_frac + 0.3) % 1.0;
  push()
    translate(2*width/3, height/2);
    scale(bw);
    draw_bucket(cycle_frac2, true);
  pop();
  */
}