// how to recognize/ store when all three have been clicked to change background for final screen?

​

let monsterOne = false;

let monsterTwo = false;

let monsterThree = false;

let x = 100;

​

let stars = [];

let numStars = 200;

​

let rs = [];

​

function setup() {

  createCanvas(700, 700);

  angleMode(DEGREES);

  rectMode(CENTER);

  colorMode(RGB);

  frameRate(30);

​

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

  }

​

}

​

​

function draw() {

  background(30);

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

    rs[i].update();

  }

​

​

  if (monsterOne == true) {

    monsterOneBody(50, height / 20, 50);

  }

​

​

  if (monsterTwo == true) {

    fill(200);

    monsterTwoBody(width / 2, 600, 50);

  }

​

  if (monsterThree == true) {

    fill(205);

    monsterThreeBody(600, 400, 50);

    x += 1

  }

​

​

  mouseLeft();

  mouseRight();

  mouseMiddle();

    //mouseResting ();

  screenOne(); // this is not how I actually want to call stuff for the animation screens

​

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

  //    stars[i].update();

  //   }

​

  //   cityScape (50,50,50,50)  

​

​

  // I assume part of switching this will be an if statement to call the cityscape to go which will trigger the class and function

}

​

​

​

​

function mouseClicked() {

  fill(24);

  textAlign(CENTER);

  text('This is a monster here is some text about it', 50, 50);

  stroke(random(100, 140));

  strokeWeight(2);

}

​

​

// function mouseResting () {

//   if (mouseX > 200 || mouseX < 500 && mouseY > 300 || mouseY < 500) {

//      monsterOne = false;

//     monsterTwo = false;

//     monsterThree = false;

//     frameRate(30);

//   }

// }

​

function mouseLeft() {

  if (mouseX < 40) {

    monsterOne = true;

    monsterTwo = false;

    monsterThree = false;

    frameRate(30);

  }

​

}

​

​

function mouseRight() {

  if (mouseY > 600) {

    monsterOne = false;

    monsterTwo = true;

    monsterThree = false;

    frameRate(30);

  }

}

​

​

function mouseMiddle() {

  if (mouseX > 600) {

    monsterOne = false;

    monsterTwo = false;

    monsterThree = true;

    frameRate(10);

  }

}

​

​

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 monsterScreens() {

//   fill(24);

//   textAlign(CENTER);

//   textSize(35);

​

//   text('There are more to understand.', width / 2, 35);

//   stroke(random(100, 140));

//   strokeWeight(2);

​

// }

​

// function lastMonster() {

//   fill(24);

//   textAlign(CENTER);

//   textSize(35);

//   text('These are not the only monsters of this life however...', width / 2, 35);

//   stroke(random(100, 140));

//   strokeWeight(2);

// }

​

​

​

//final screen should also have some sort of image change. 

function finalScreen() {

  fill(24);

  textAlign(CENTER);

  fill(24);

  text('There are many monsters in the world. Some unseen, an internal battle. Some overt, filled only with rage', width / 2, 35);

  text('But, those monsters do not define the world. It is not a hopeless endevor to fight them', width / 2, 35);

  stroke(random(100, 140));

  strokeWeight(2);

}

​

​

​

​

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

​

  //put clicked here for text?) --> could make the animation be in the click (so for this one could be liquid movement)

​

  textStyle(ITALIC);

  textFont('baskerville');

  fill(24, 24, 24, 100);

  textAlign(LEFT);

  fill(100);

  textSize(15)

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

​

}

​

​

function monsterTwoBody() {

​

  fill(63, 37, 154, 170); 

  noStroke();

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

​

​

  textStyle(ITALIC);

  textFont('baskerville');

  textAlign(CENTER);

  fill(100);

  textSize(15)

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

​

​

​

​

}

​

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

  textStyle(ITALIC);

  textFont('baskerville');

  textAlign(RIGHT);

  fill(100);

  textSize(15)

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

​

}

​

function cityScape() {

​

​

  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, 650, 30, 50);

  rect(50, 550, 100, 200);

  rect(155, 450, 140, 350);

  rect(250, 600, 140, 100);

  rect(400, 500, 50, 300);

  rect(455, 500, 50, 300);

  rect(520, 300, 100, 400);

  rect(630, 600, 70, 100);

​

​

}

​

​

​

​

​

class Stars {

​

  constructor(x, y, r, c) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.c = c;

​

  }

}

  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;

    }

  }

​

​

  // Modulous Notes

  // let x =

  // let y = 

​

  //x +=1; --> the thing that changes by 1 every frame. 

  // How do change this? use the modulo function (%). If (frameCount % 10 == 0) {} If the current frame count / 10 has a remainder of 0 then do the thing. 

  // (basically everything goes in evenly to have no remainder