Sketch

https://editor.p5js.org/RayRayRule/full/fhhJ4rCHO

Code

let bigRain = [];
let smallRain = [];
let bigPressed = false;
let smallPressed = false;
let hs1 = 300;
let hs2 = 100;

function setup() {
  createCanvas(600, 600);
  print("Decide by clicking the tip of the rain.");
  for (let i = 0; i < 100; i++) {
    bigRain[i] = new RAIN(
      random(0, width),
      random(-10000, 0),
      random(1000, 1500),
      random(1, 4)
    );
    smallRain[i] = new RAIN(
      random(0, width),
      random(-10000, 0),
      random(50, 100),
      random(1, 4)
    );
  }
}

function draw() {
  //background, human and text
  background(220);
  fill(0);
  textFont("Courier New", 13);
  text("Would you like to be seen as big or small?", width / 3, height / 2);
  text("Let me know. Choose a drop size.", width / 3, height / 2 + 20);
  drawNormal();

  //Raining
  for (let i = 0; i < 100; i++) {
    bigRain[i].show();
    bigRain[i].drop();
    smallRain[i].show();
    smallRain[i].drop();
  }

  //if "BIG" is selected.
  if (bigPressed) {
    let hw1 = width / 4;
    let hh1 = height / 2.1;

    curve(hw1 - hs1, hh1 - hs1, hw1, hh1, hw1, hh1, hw1 + hs1, hh1 - hs1);
    hs1 += 500;
    fill(255);
    text("No one can see the whole you.", hw1 - 100, hh1 + 100);
    print("IT'S LONELY EITHER WAY.");
  }

  //if "SMALL"is selected.
  if (smallPressed) {
    background(220);
    let hw2 = width / 4;
    let hh2 = height / 2.1;

    if (abs(hs2) > 10) {
      curve(hw2 - hs2, hh2 - hs2, hw2, hh2, hw2, hh2, hw2 + hs2, hh2 - hs2);
      hs2 -= 100;
    }

    fill(0);
    text("No one can see you.", hw2 - 100, hh2 + 100);
    print("IT'S LONELY EITHER WAY.");
  }
}

//*******************supplementary part********************

//If there's a mouse pressed, the below code would run and determine whether it is selecting the drops.
function mousePressed() {
  for (let i = 0; i < 100; i++) {
    bigRain[i].bigClicked();
    smallRain[i].smallClicked();
  }
}

//This is just the code for drawing the initial person.
function drawNormal() {
  fill(0);
  circle(width / 4, height / 2.2, 10);
  curve(
    width / 4 - 300,
    height / 2.1 - 300,
    width / 4,
    height / 2.1,
    width / 4,
    height / 2.1,
    width / 4 + 300,
    height / 2.1 - 300
  );
  strokeWeight(4);
  line(width / 4, height / 2, width / 4.2, height / 1.8);
  line(width / 4, height / 2, width / 3.8, height / 1.8);
  line(width / 4.18, height / 2.05, width / 4.2 - 15, height / 2.05 + 15);
  line(width / 3.88, height / 2.05, width / 3.8 + 15, height / 2.05 + 15);
}

//*******************from now on is class********************
//Somehow I couldn't open another tab for the class. It shows "RAIN undefined" when I do so.
class RAIN {
  constructor(x, y, size, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speed = speed;
  }

  show() {
    curve(
      this.x - this.size,
      this.y - this.size,
      this.x,
      this.y,
      this.x,
      this.y,
      this.x + this.size,
      this.y - this.size
    );
  }

  drop() {
    this.y += this.speed;
  }

  bigClicked() {
    var d = dist(mouseX, mouseY, this.x, this.y);
    if (d < 50) {
      bigPressed = true;
    }
  }

  smallClicked() {
    var d = dist(mouseX, mouseY, this.x, this.y);
    if (d < 10) {
      smallPressed = true;
    }
  }
}

Inspiration

The idea is to capture the inevitable loneliness in life. When being a small person, no one can see you. When being a big person, no one can see the whole you. Either way, it’s lonely.

This concept has a taste of sadness, thus I used a lot of tear drop shapes. After selecting the raining drop, the result would come out, based on the drop size selected.

Issue

The biggest issue I’ve encountered is that, it’s not easy to determine whether a mouse is hovering the drop or not. Drop shape, unlike circle, has a complicated algorithm.

I found this code in P5js library: p5.element. mousePressed()

However, this code can only apply to the p5 element. Which, as far as I know, is the element produced by a “create” code. ex: createCanvas/createButton…etc.

Thus, I can only do my best, and assigned a distance range between the tip of the drop shape and the mouse, and write a notice on the console saying that the selection only works on the tip.

Remark

The part I like the most is that, when big drop is selected, the human kind of become a mountain shape creature. Huge and incomprehensible. The white text saying “No one can see the whole you.” is also partly invisible. I really like this visual resonance with the whole concept.