//    create water drops as user clicks on the screen

//    use object oriented programing

​

// issues:

//tried creating an object for the drops and another one for the water (which creates many drops) but it won't display it smoothly falling

//issue with inversing the water color

//(fixed) the water drop doesn't start from the mouseY pos, there seems to be a diagonal line it follows (pos_y was defined as pos_x)

​

// show text code from https://editor.p5js.org/amcc/sketches/WQbTQWFyL

​

let wtr = [];

let pool;

let position_wtr;

let wtr_color = "#81d2c7";

let water_level_inc = 0.5;

let showText = true;

​

function setup() {

  // frameRate(2);

  createCanvas(400, 400);

  position_wtr = height;

  pool = new Bottom_wtr(position_wtr);

  wtr[0] = new Water(200 + 1 * 3, 200);

  position_wtr = height - water_level_inc;

}

​

function mouseClicked() {

  showText = false;

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

    pool = new Bottom_wtr(position_wtr);

    wtr[i] = new Water(mouseX, mouseY, position_wtr);

    position_wtr -= water_level_inc;

  }

  return false;

}

​

function draw() {

  background("#465C69"); // or maybe #363457

  wtr[wtr.length - 1].display_water();

  pool.water_at_bottom();

  textAlign(CENTER, CENTER);

  if(showText){

    text('click anywhere to create water drops', 200, 200);

  }

  //loop over mutiple instances(not being used)

  //   for (let i = 0; i < wtr.length; i++) {

  //     wtr[i].display_water();

  //     // wtr[i].water_at_bottom();

  //   }

​

}

​

class Water {

  constructor(x_pos, y_pos, h_b = 0) {

    this.x_pos = x_pos;

    this.y_pos = y_pos;

    this.gravity = 10;

    this.size = 10;

  }

​

  fall() {

    if (this.y_pos < position_wtr) {

      this.y_pos += this.gravity;

    }

  }

​

  display_water() {

    noStroke();

    fill(wtr_color);

    this.fall();

    //  added 1 to the height to simulate the shape of water drop falling

    ellipse(this.x_pos, this.y_pos, this.size, this.size + 1);

  }

  stop_water() {

    this.pour = false;

  }

}

​

class Bottom_wtr {

  constructor(h_b) {

    this.h_b = h_b;

    this.water_bottom_h = 0.5;

    this.water_bottom_w = width;

    this.color = "#81d2c7";

  }

​

  water_at_bottom() {

    let inverse = false;

    if (this.h_b < 0) {

      if (inverse) {

        fill("#465C69");

        noStroke();

        print(this.h_b);

        rect(0, this.h_b, this.water_bottom_w, height);

        inverse = true;

      }

      if (this.h_b > height) {

        inverse = false;

      }

    } else {

      fill(wtr_color);

      noStroke();

      print(this.h_b);

      rect(0, this.h_b, this.water_bottom_w, height);

    }

  }

}

​