​

let skyColor = 0;

let groundColor = 0;

let cloudColor = 0;

let treeColor = 0;

let fireColor = 0;

let yoff = 0.0;

var Cld = 0;

var CldTwo = 0;

​

function setup() {

  createCanvas(600, 600);

​

}

​

function draw() {

  //sky

  push();

  noStroke();

  fill(skyColor);

  rect(0, 0, 600,400);

  if (mouseIsPressed){

    skyColor = color(255,201,102);

  }else{

    skyColor = color(127,191,255);

  }

  pop(); 

  //ground

  push();

  noStroke();

  fill(groundColor);

  rect(0, 400, 600,200);

  if (mouseIsPressed){

    groundColor = color(112,112,28);

  }else{

    groundColor = color(0,184,0);

  }

  pop();

  //cloud 1

  push();

  noStroke();

  fill(cloudColor);

  ellipse(Cld+20,90,80,80)

  ellipse(Cld,60,60,60)

  ellipse(Cld-80,80,30,30)

  ellipse(Cld-80,95,70,70)

  ellipse(Cld-30,80,80,80)

  rect(Cld-80,80,100,50)

  if (mouseIsPressed){

    cloudColor = color(166);

  }else{

    cloudColor = color(255);

  }

  if (Cld > width) {

    Cld = 0

  }

  Cld = Cld + 1

  pop();

  //cloud 2

  push();

  noStroke();

  fill(cloudColor);

  ellipse(CldTwo+480,200,80,80)

  ellipse(CldTwo+460,170,60,60)

  ellipse(CldTwo+380,190,30,30)

  ellipse(CldTwo+380,205,70,70)

  ellipse(CldTwo+430,190,80,80)

  rect(CldTwo+380,190,100,50)

  if (mouseIsPressed){

    cloudColor = color(166);

  }else{

    cloudColor = color(255);

  }

  if (CldTwo > 150) {

    CldTwo = -500

  }

  CldTwo = CldTwo + 1

  pop();

  //house 1

  push();

  fill(146,17,17);

  rect(575, 280, 15, 40);

  fill(255,76,76);

  triangle(550, 270, 590, 320, 510, 320);

  fill(255,255,219);

  rect(510, 320, 80, 90);

  fill(219,219,255);

  rect(540, 380, 20, 30);

  fill(255);

  square(520, 340, 20);

  fill(255);

  square(560, 340, 20);

  pop();

  //house 2

  push();

  fill(146,17,17);

  rect(475, 340, 15, 40);

  fill(255,76,76);

  triangle(450, 330, 490, 380, 410, 380);

  fill(255,255,219);

  rect(410, 380, 80, 90);

  fill(219,219,255);

  rect(440, 440, 20, 30);

  fill(255);

  square(420, 400, 20);

  fill(255);

  square(460, 400, 20);

  pop();

  //trees 1

  push();

  noStroke();

  leaves(50, 300, 10, 375, 90, 375);

  leaves(50, 275, 15, 350, 85, 350);

  leaves(50, 270, 25, 310, 75, 310);

  treeStump(40, 375, 20, 40);

  //trees 2

  leaves(150, 300, 110, 375, 190, 375);

  leaves(150, 275, 115, 350, 185, 350);

  leaves(150, 270, 125, 310, 175, 310);

  treeStump(140, 375, 20, 40);

​

  //trees 3

  leaves(100, 400, 60, 475, 140, 475);

  leaves(100, 375, 65, 450, 135, 450);

  leaves(100, 370, 75, 410, 125, 410);

  treeStump(90, 475, 20, 40);

  pop();

  //fire 1

  push();

  blendMode(MULTIPLY);

  fireCircle(75, 320, 75, 75);

  fireCircle(50, 370, 100, 100);

  fireCircle(50, 270, 60, 60);

  fireCircle(30, 300, 50, 50);

  //fire 2

  fireCircle(150, 390, 100, 100);

  fireCircle(125, 345, 75, 75);

  fireCircle(110, 290, 75, 75);

  fireCircle(165, 310, 50, 50);

  //fire 3

  fireCircle(100, 460, 100, 100);

  fireCircle(85, 420, 75, 75);

  fireCircle(140, 420, 50, 50);

  pop();

  //billboard

  push();

  billBoard(200, 300, 200, 530);

  billBoard(400, 300, 400, 530);

  rect(200, 300, 200, 150);

  pop();

  //fire 4

  push();

  fireCircle(220, 300, 100, 100);

  fireCircle(210, 340, 75, 75);

  fireCircle(250, 420, 50, 50);

  fireCircle(230, 400, 60, 60);

  fireCircle(260, 370, 80, 80);

  fireCircle(200, 500, 90, 90);

  fireCircle(190, 450, 70, 70);

  pop();

  //line

  push();

  if (mouseIsPressed){

    strokeWeight(1);

  } else {

    noStroke();

  }

  line(width/2, 300, width/2, height);  

  pop();

  //wave

  push();

  if (mouseIsPressed){

    beginShape();

    fill(0, 0, 178, 100);

    noStroke();

  let xoff = 0;

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

    let y = map(noise(xoff, yoff), 0, 1, 400, 300);

    vertex(x, y);

    xoff += 0.05;

  }

  yoff += 0.01;

  vertex(width, height);

  vertex(300, height);

  endShape(CLOSE);

  } else{

    noFill();

  }

  pop();

  //Click me

  push();

  textSize(40);

  textAlign(CENTER);

  textStyle(BOLD);

  if (mouseIsPressed){

    noFill();

  } else {

    fill(0);

  }

  text('Click Me If You Agree That', 300, 110);

  text('Our Planet Is Not Warming!', 300, 150);

  pop();

  //There is no Planet B

  push();

  textSize(50);

  textAlign(CENTER);

  textStyle(BOLD);

  if (mouseIsPressed){

    fill(255, 0 ,0);

  } else {

    noFill();

  }

  text('THERE IS        ', 300, 140);

  text('PLANET B!', 300, 190);

  if (mouseIsPressed){

    fill(0);

    textSize(55);

  } else {

    noFill();

  }

  text('NO', 420, 140)

  pop();

  //Climate Change is NOT a Hoax text

  push();

  textSize(25);

  textAlign(CENTER);

  textStyle(BOLD);

  fill(0);

  text('Climate Change', 300, 340);

  text('Is              A', 300, 380);

  text('Hoax!', 300, 420);

  if (mouseIsPressed){

    fill(225,0,0);

    textSize(40);

  } else {

    noFill();

  }

  text('NOT', 300, 380);

  pop();

  // city name

  push();

  textSize(25);

  textAlign(CENTER);

  textStyle(BOLD);

  fill(0);

  if (mouseIsPressed){

    fill(0);

    textSize(30);

  } else {

    noFill();

  }

  text('CALIFORNIA', 150, 560);

  text('IS BURNING', 150, 590);

  text('FLORIDA', 450, 560);

  text('IS FLOODING', 450, 590);

  pop();

}

​

function billBoard(line1X, line1Y, line2X, line2Y){

  strokeWeight(8);

  stroke(16);

  line(line1X, line1Y, line2X, line2Y); 

}

​

function leaves(lv1X, lv1Y, lv2X, lv2Y, lv3X, lv3Y){

  strokeWeight(1);

  fill(treeColor);

  if (mouseIsPressed){

    treeColor = color(0,25,0);

  }else{

    treeColor= color(0,76,0);

  }

  triangle(lv1X, lv1Y, lv2X, lv2Y, lv3X, lv3Y);

}

​

function treeStump(tSX, tsY, tsW, tsH){

  strokeWeight(1);

  fill(99,62,25);

  rect(tSX, tsY, tsW, tsH);

}

​

function fireCircle(fireCX, fireCY, fireCW, fireCH){

  noStroke();

  if (mouseIsPressed){

    fill(fireColor);

    fireColor = color(random(200,230), random(50, 150), 10, 100)

  } else {

    noFill();

  }

  ellipse(fireCX, fireCY, fireCW, fireCH);

}