Final Project

sketch

//thien le, section d, project

var pressValue = 255;
var circValOne = 255;
var circValTwo = 255;
var circValThree = 255;
var cityImg;
var iceImg;
var forestImg;
var smoke = [];
var x;
var y;
var dx;

function preload() {
  cityImg = loadImage ("https://i.imgur.com/hmWYq6y.png")
  iceImg = loadImage ("https://i.imgur.com/bcdmnoM.png12")
  forestImg = loadImage ("https://i.imgur.com/SiHq9rT.png")
}


function setup() {
  createCanvas(550, 300);
  background("#edc399");
  //smoke
  for (var i = 0; i < 80; i ++) {
        var startLocX = random(0, 270);
        var startLocY = random(0, 300);
        smoke[i] = makesmoke(startLocX, startLocY);
    }

//clouds
  x = int(random(0, 270));
  y = int(random(250, 300));
  //random colors
  //velocity of cloud
  dx = int(2);
  dy = int(5);
}

function draw() {
  screenText();
  threeButtons();
  cloud(x, y, dx);
    x += dx;
    //once cloud hits the right, it switches side
    if (dx >= 0 & x > 250){
        dx = -dx
    }
    else if (dx < 0 && x - 10 < 0){
        dx = -dx
    }
  
}
  

function screenText() {
  push();
  fill(255);
  textSize(8);
  text('P R E S S  1 ,  2 ,  O R  3  O N  K E Y B O A R D  T O  S T A R T !', 300, 30)
  pop();
}

function aOrB() {
  push();
  fill(255);
  textSize(10);
  text("A", 355, 255)
  text("B", 470, 255)
  pop();

}
function choiceText() {
  push();
  fill(255);
  textSize(8);
  text('P R E S S  A  O R  B  T O  C H O O S E', 350, 270);
  pop();
}

function badChoice() {
  push();
  fill("red");
  textSize(15);
  textStyle(BOLD);
  text('CONTINUE PRESSING B', 340, 260);
  pop();
}
function threeButtons() { //buttons that will display 3 facts about climate change
    noStroke();
    fill(circValOne);
    circle(350, 70, 50, 50);
    fill(circValTwo);
    circle(420, 70, 50, 50);
    fill(circValThree);
    circle(490, 70, 50, 50);
}

function keyTyped() {
  //city
  if (key === '1') {
    circValOne = ("#cc7161");
    circValTwo = 255;
    circValThree = 255;
    fill(255);
    image(cityImg, 0, 0, 270, height);
    cityButton();
    cityFact();
    choiceText();
    aOrB();
    //ice
  } 
  if (key === 'a') {
    background("#014421");
    push();
    textSize(15);
    textAlign(CENTER);
    fill(255);
    text('YAY YOU SAVED THE EARTH!', 150, 150)
    pop();
  }
  if (key === 'b') {
     smokeDisplay();
     badChoice();
  }
  if (key === '2') {
    circValTwo = ("#cc7161");
    circValOne = 255;
    circValThree = 255;
    image(iceImg, 0, 0, 270, height);
    iceButton();
    iceFact();
    choiceText();
    //forest
  } 
  else if (key === '3') {
    circValThree = ("#cc7161");
    circValTwo = 255;
    circValOne = 255;
    image(forestImg, 0, 0, 270, height);
    forestButton();
    forestFact();
    choiceText();
  }
}

function cityButton(){
  push();
  rectMode(CENTER);
  fill("#638a7e");
  rect(360, 200, 100, 80, 20);
  rect(480, 200, 100, 80, 20);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  text('Walk, bike, or take public transportation', 310, 180, 100, 80);
  text('Drive personal vehicle', 430, 185, 100, 80);
  pop();
}

function iceButton(){
  push();
  rectMode(CENTER);
  fill("#638a7e");
  rect(360, 200, 100, 80, 20);
  rect(480, 200, 100, 80, 20);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  text('Utilize smart power in homes', 310, 185, 100, 80);
  text('Leave lights on everywhere', 430, 185, 100, 80);
  pop();
}

function forestButton(){
  push();
  rectMode(CENTER);
  fill("#638a7e");
  rect(360, 200, 100, 80, 20);
  rect(480, 200, 100, 80, 20);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  text('Encourage politicians to fund parks', 310, 180, 100, 80);
  text('Use lots of paper', 430, 190, 100, 80);
  pop();
}

function cityFact() {
  push();
  rectMode(CENTER);
  fill("#edc399");
  rect(420, 130, 230, 60);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  //climate fact
  fill(255);
  text('Each year 1.2 trillion gallons of untreated sewage, stormwater, and industrial waste are dumped into US water', 310, 107, 230, 100);
  pop();
}

function iceFact() {
  //climate fact
  push();
  rectMode(CENTER);
  fill("#edc399");
  rect(420, 130, 230, 60);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  //climate fact
  fill(255);
  text('95% of the oldest and thickest ice in the Arctic is already gone', 310, 115, 230, 100);
  pop();
}

function forestFact() {
  //climate fact
  push();
  rectMode(CENTER);
  fill("#edc399");
  rect(420, 130, 230, 60);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  //climate fact
  fill(255);
  text('Deforestation emits more greenhouse gas emissions than 85 million cars would over their entire lifetime', 310, 107, 230, 100);
  pop();
}

//smoke object
function drawsmoke() {
    noStroke();
    //fill(255);
    push();
    translate(this.x, this.y);
    fill(200, 200);
    ellipse(1, 10, this.starH, this.starH);
    pop();
}

function makesmoke(startLocX, startLocY) {
    var smoke = {x: startLocX, 
               y: startLocY, 
               starH: random(10, 30),
               speed: -1, 
               move: smokeMove, 
               draw: drawsmoke}
    return smoke;
}

function smokeMove() { //update position of smoke
    this.x += this.speed
    if (this.x <= 0) {
        this.x += 50
    }
}

function smokeDisplay() { 
     for(i = 0; i < smoke.length; i ++) {
        smoke[i].move();
        smoke[i].draw();
    }
}

//cloud
function cloud(x, y, dx) {
    fill(200, 200);
    ellipse(x - 30, y + 20, 20, 20)
    ellipse(x - 15, y + 10, 30, 40)
    ellipse(x + 5, y + 5, 20, 30)
    ellipse(x, y, 20, 10)
}