let monsterTwo = false;

let monsterThree = false;

let x = 100;

​

​

let monsterTextOne = false;

let monsterTextTwo = false;

let monsterTextThree = false;

​

let itemsClicked = 0;

let stars = [];

let numStars = 200;

let eyes = [];

let numEyes = 10;

​

let rs = [];

let rs2 = [];

​

function setup() {

  createCanvas(700, 700);

  angleMode(DEGREES);

  rectMode(CENTER);

  colorMode(RGB);

  frameRate(30);

​

   for (let i = 0; i < numEyes; i = i + 1) {

    eyes.push(new Eyes(random(width), random(height / 1.5), 10, random(200,0,0)));

  }

  for (let y = 10; y < height; y = y + 20) {

    for (let x = 10; x < width; x = x + 20) {

      rs.push(new Background(

        x, // x location

        y, // y location

        300, // width of rect

        random(30), // height of rect

        random(-0.4, 0.9) // speed of rotation

      ));

    }

  }

  for (let i = 0; i < numStars; i = i + 1) {

    stars.push(new Stars(random(width), random(height / 1.5), 1, 255));

  }

  for (let i = 0; i < numEyes; i = i + 1) {

    eyes.push(new Eyes(random(width), random(height / 1.5), 10, 50));

  }

}

​

​

function draw() {

​

  background(30);

​

  for (let i = 0; i < rs.length; i = i + 1) {

    rs[i].update();

  }

​

​

  if (monsterOne == true) {

    monsterOneBody(50, height / 2, 20, 50);

  }

​

  if (monsterTextOne == true) {

    textStyle(ITALIC);

    textFont('baskerville');

    fill(24, 24, 24, 100);

    textAlign(LEFT);

    fill(100);

    textSize(15)

    noStroke ();

    text('Hatred.', 110, 250);

    text('Many feel this monster in passing', 110, 270);

    text('But it is those that let it consume them that extinquish', 120, 290);

​

​

  }

​

  if (monsterTwo == true) {

    fill(200);

    monsterTwoBody(width / 2, 600, 50);

​

  }

​

  if (monsterTextTwo == true) {

    textStyle(ITALIC);

    textFont('baskerville');

    textAlign(CENTER);

    fill(100);

    textSize(15)

    noStroke ();

    text('Fear.', 450, 500);

    text('A valid monster to use', 450, 520);

    text('But when logic does not overcome it,', 450, 540);

    text('That fear boils over', 450, 560);

  }

​

  if (monsterThree == true) {

    fill(205);

    monsterThreeBody(600, 400, 50);

    x += 1

  }

​

  if (monsterTextThree == true) {

    textStyle(ITALIC);

    textFont('baskerville');

    textAlign(RIGHT);

    fill(100);

    textSize(15)

    noStroke ();

    text('Apathy.', 540, 230);

    text('The world we live in is a brutal one', 600, 250);

    text('There are days when you must not focus on the bad,', 590, 270);

    text('Just dont forget to care for those around you later', 620, 290);

  }

​

  if (itemsClicked == 3) {

    setTimeout (cityScape, 1000);

    background (30)

    for(let i =0; i < stars.length; i = i + 1) {

    stars[i].update();

  }

    cityScape ();

  }

​

​

    if (itemsClicked < 3) {

      screenOne();

      for(let i =0; i < eyes.length; i = i + 1) {

            eyes[i].update();

                    }

​

  checkMouse();

​

​

}

}

​

​

​

​

function mouseClicked() {

​

  if (monsterOne == true) {

    monsterTextOne = true;

    monsterTextTwo = false;

    monsterTextThree = false;

    itemsClicked = itemsClicked + 1;

  } else if (monsterTwo == true) {

    monsterTextOne = false;

    monsterTextTwo = true;

    monsterTextThree = false;

    itemsClicked = itemsClicked + 1;

  } else if (monsterThree == true) {

​

    monsterTextOne = false;

    monsterTextTwo = false;

    monsterTextThree = true;

    itemsClicked = itemsClicked + 1;

  } else {

    monsterTextOne = false;

    monsterTextTwo = false;

    monsterTextThree = false;

  }

​

​

}

​

​

function checkMouse() {

​

  if (mouseX < 60 && mouseX > 30) {

    monsterOne = true;

    monsterTwo = false;

    monsterThree = false;

    frameRate(30);

  } else if (mouseX >380 && mouseY > 600) {

    monsterOne = false;

    monsterTwo = true;

    monsterThree = false;

    frameRate(30);

  } else if (mouseX > 600 && mouseY < 200) {

    monsterOne = false;

    monsterTwo = false;

    monsterThree = true;

    frameRate(10);

  } else {

    monsterOne = false;

    monsterTwo = false;

    monsterThree = false;

  }

}

​

​

​

​

function screenOne() {

  fill(24);

  textAlign(CENTER);

  stroke(random(100, 140));

  strokeWeight(2);

  textSize(35);

  textFont('arial');

  textStyle(NORMAL);

  text('There are Monsters in the Dark.', width / 2, 35);

  text('Can You Find Them?', width / 2, 85);

​

}

​

​

function monsterOneBody() {

​

  fill(80, 0, 0);

  noStroke();

  triangle(50, height / 2, 100, 250, 20, 250);

  fill(200, 10, 50, 120)

  triangle(20, 400, 50, 300, 10, 200);

  fill(216, 36, 0, 100);

  triangle(80, 500, 60, 300, 10, 200);

​

}

​

​

function monsterTwoBody() {

​

  fill(63, 37, 154, 170);

  noStroke();

  ellipse(random(width / 1.5, width / 1.6), random(630, 650), 120);

​

}

​

function monsterThreeBody() {

  fill(random(80, 90));

​

  noStroke();

  rect(600, 150, 100, 100);

​

​

  fill(50, 50, 50, random(100, 130));

  push();

  translate(600, 150);

  if (frameCount % 30 == 0) {

    scale(x)

    x += 2;

  }

  rect(0, 0, 120, 120);

  pop();

​

​

  fill(100);

​

​

​

​

}

​

function cityScape() {

    setTimeout (cityScape, 10000);

  fill(255, 239, 170, random(200, 210));

  noStroke();

  ellipse(width / 2, 700, 700, 500);

​

  fill(247, 226, 138, random(150, 155));

  ellipse(width / 2, 700, 800, 600);

​

  fill(252, 192, 80, random(100, 105));

  ellipse(width / 2, 700, 850, 700);

​

  fill(252, 154, 80, random(50, 55));

  ellipse(width / 2, 700, 900, 800);

​

  fill(0);

​

  rect(10, 700, 30, 50);

  rect(50, 700, 100, 200);

  rect(155, 700, 140, 350);

  rect(250, 700, 140, 100);

  rect(400, 700, 50, 300);

  rect(455, 700, 50, 300);

  rect(520, 700, 100, 400);

  rect(630, 700, 70, 100);

​

​

​

  textAlign(CENTER);

  fill(180);

  textSize (30);

  strokeWeight(1.5);

  stroke (0);

  text('There are many monsters in the world.', width/2, 30);

  text ('Some unseen,an internal battle.', width/2 , 60); 

  text ('Some overt, filled only with rage', width / 2, 90);

  text('But, those monsters do not define the world.', width/2, 120);

    text('It is not a hopeless endevor to try and understand them', width / 2, 150);

  noStroke ();

​

}

​

​

class Stars {

​

  constructor(x, y, r, c) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.c = c;

​

  }

   update () {

    fill (this.c, random (200))

    circle (this.x,this.y,this.r);

    this.x = this.x + random (-0.1,0.1);

  }

}

class Background {

  constructor(x, y, w, h, s, r) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.s = s;

    this.a = 0;

    this.r = r;

  }

​

  update() {

    push();

    translate(this.x, this.y);

    rotate(this.a);

    noFill();

    stroke(10);

    rect(0, 0, this.w, this.h, this.r);

    pop();

    this.a = this.a + this.s;

  }

}

​

class Eyes {

​

  constructor(x, y, r, c, s) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.c = c;

    this.s = s;

​

  }

   update () {

    noStroke (this.s);

    fill (this.c, random (50,70))

    circle (this.x,this.y,this.r);

    this.x = this.x + random (-1,0.9);

  }

}