The “CHOICE” work I’ve done in week 3.

The “CHOICE” work I’ve done in week 3.

I organized the code of this sketch, and produce several self-defined function, including:

defineRain() drawNormal() raining() ifRainPressed()

And the variable “rainAmount” and “bgGreyscale” can be changed to alter different layout.

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

let rainAmount = 100;
let bgGreyscale = 220;

function setup() {
  createCanvas(600, 600);
  print("Decide by clicking the tip of the rain.");
  defineRain(rainAmount);
}

function draw() {
  //background, human and text
  prepareBackground(bgGreyscale);
  drawNormal();
  raining(rainAmount);
  ifRainPressed()
}

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

function mousePressed() {
  for (let i = 0; i < 100; i++) {
    bigRain[i].bigClicked();
    smallRain[i].smallClicked();
  }
}

//I also wanted to add "touchStarted", for mobile phone users, but failed to do so.-->ask in class
function defineRain(rainAmount) {
  for (let i = 0; i < rainAmount; 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 raining(rainAmount) {
  //Raining
  for (let i = 0; i < rainAmount; i++) {
    bigRain[i].show();
    bigRain[i].drop();
    smallRain[i].show();
    smallRain[i].drop();
  }
}

function prepareBackground(greyScale) {
  background(greyScale);
  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);
}

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);
}

function ifRainPressed() {
  //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(220);
    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.");
  }
}

//*******************from now on is class********************

class RAIN {
  constructor(x, y, size, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speed = speed;
  }