​

let windowImg;

let windowOffImg;

let carImg;

let subImg;

let treeImg;

let axeImg;

let windImg;

let oilImg;

let disImg;

let silImg;

​

let stoneImg;

let coralImg;

let turtleImg;

let fishImg;

let clownImg;

let horseImg;

​

let light = 0;

let car = 0;

let tree = 0;

let energy = 0;

let share = 0;

​

let win1Button;

let win2Button

let carButton;

let subButton;

let axeButton;

let treeButton;

let oilButton;

let windButton;

let silButton;

let disButton;

​

​

function setup() {

  createCanvas(700, 600);

  windowImg = loadImage('window.png');

  windowOffImg = loadImage('windowOff.png');

  carImg = loadImage('city-car.png');

  subImg = loadImage('subway.png');

  treeImg = loadImage('tree.png');

  axeImg = loadImage('axe.png');

  windImg = loadImage('wind.png');

  oilImg = loadImage('oil.png');

  disImg = loadImage('discussion.png');

  silImg = loadImage('silenced.png');

  stoneImg = loadImage('stone-pile.png');

  coralImg = loadImage('coral.png');

  turtleImg = loadImage('turtle.png');

  fishImg = loadImage('fish.png');

  horseImg = loadImage('seahorse.png')

  clownImg = loadImage('clownfish.png');

  win1Button =  createButton('Keep lights on');

  win1Button.position(3, 93);

  win1Button.mousePressed(lightOn);

  win2Button =  createButton('Turn lights off');

  win2Button.position(598, 93);

  win2Button.mousePressed(lightOff);

  carButton =  createButton('Take car');

  carButton.position(20, 210);

  carButton.mousePressed(carOn);

  subButton =  createButton('Take transport');

  subButton.position(598, 210);

  subButton.mousePressed(carOff);

  axeButton =  createButton('Cut tree');

  axeButton.position(20, 335);

  axeButton.mousePressed(treeOn);

  treeButton =  createButton('Plant tree');

  treeButton.position(613, 335);

  treeButton.mousePressed(treeOff);

  oilButton =  createButton('Non-renewable');

  oilButton.position(3, 460);

  oilButton.mousePressed(energyOn);

  windButton =  createButton('Renewable');

  windButton.position(610, 460);

  windButton.mousePressed(energyOff);

  silButton =  createButton('Keep silence');

  silButton.position(10, 575);

  silButton.mousePressed(shareOn);

  disButton =  createButton('Share with other');

  disButton.position(585, 575);

  disButton.mousePressed(shareOff);

}

​

function draw() {

  background(200);

  textSize(25)

  text("Take action to save Great Barrier Reef!",117,70)

  if(light == 1){

    win1Button.attribute('disabled',true);

    win2Button.removeAttribute('disabled');

​

  }

  if(light == 2) {

    win2Button.attribute('disabled',true);

    win1Button.removeAttribute('disabled');

  }

  if(car == 1){

    carButton.attribute('disabled',true);

    subButton.removeAttribute('disabled');

​

  }

  if(car == 2) {

    subButton.attribute('disabled',true);

    carButton.removeAttribute('disabled');

  }

  if(tree == 1){

    axeButton.attribute('disabled',true);

    treeButton.removeAttribute('disabled');

​

  }

  if(tree == 2) {

    treeButton.attribute('disabled',true);

    axeButton.removeAttribute('disabled');

  }

  if(energy == 1){

    oilButton.attribute('disabled',true);

    windButton.removeAttribute('disabled');

​

  }

  if(energy == 2) {

    windButton.attribute('disabled',true);

    oilButton.removeAttribute('disabled');

  }

  if(share == 1){

    silButton.attribute('disabled',true);

    disButton.removeAttribute('disabled');

​

  }

  if(share == 2) {

    disButton.attribute('disabled',true);

    silButton.removeAttribute('disabled');

  }

  stroke(0);

  noFill();

  rect(125,100,450,450);

  if(situation ==0){

    image(stoneImg, 125+330, 100+330,windowImg.width/5,windowImg.height/5);

    image(stoneImg, 125+170, 100+300,windowImg.width/7,windowImg.height/7);

    image(stoneImg, 125+50, 100+350,windowImg.width/6,windowImg.height/6);

  }

  if(situation ==1) {

    image(stoneImg, 125+330, 100+330,windowImg.width/5,windowImg.height/5);

    image(stoneImg, 125+170, 100+300,windowImg.width/7,windowImg.height/7);

    image(stoneImg, 125+50, 100+350,windowImg.width/6,windowImg.height/6);

    image(coralImg,125+50, 100+300,windowImg.width/6,windowImg.height/6)

    image(fishImg, 125+250, 100+240,windowImg.width/7,windowImg.height/7);

  }

  if(situation ==2) {

    image(stoneImg, 125+330, 100+330,windowImg.width/5,windowImg.height/5);

    image(stoneImg, 125+170, 100+300,windowImg.width/7,windowImg.height/7);

    image(stoneImg, 125+50, 100+350,windowImg.width/6,windowImg.height/6);

    image(coralImg,125+50, 100+300,windowImg.width/6,windowImg.height/6)

    image(fishImg, 125+250,100+240,windowImg.width/7,windowImg.height/7);

    image(coralImg,125+330, 100+270,windowImg.width/5,windowImg.height/5);

    image(turtleImg,125+100, 100+100,windowImg.width/5,windowImg.height/5);

  }

  if(situation ==3) {

    image(stoneImg, 125+330, 100+330,windowImg.width/5,windowImg.height/5);

    image(stoneImg, 125+170, 100+300,windowImg.width/7,windowImg.height/7);

    image(stoneImg, 125+50, 100+350,windowImg.width/6,windowImg.height/6);

    image(coralImg,125+50, 100+300,windowImg.width/6,windowImg.height/6)

    image(fishImg, 125+250, 100+240,windowImg.width/7,windowImg.height/7);

    image(coralImg,125+330, 100+270,windowImg.width/5,windowImg.height/5);

    image(turtleImg,125+100, 100+100,windowImg.width/5,windowImg.height/5);

    image(coralImg,125+170, 100+250,windowImg.width/7,windowImg.height/7);

    image(horseImg,125+15, 100+210,windowImg.width/7,windowImg.height/7);

    push();

    scale(-1,1);

    image(fishImg, -(125+250), 100+40,-windowImg.width/7,windowImg.height/7);

    pop();

  }

  if(situation ==4) {

    image(stoneImg, 125+330, 100+330,windowImg.width/5,windowImg.height/5);

    image(stoneImg, 125+170, 100+300,windowImg.width/7,windowImg.height/7);

    image(stoneImg, 125+50, 100+350,windowImg.width/6,windowImg.height/6);

    image(coralImg,125+50, 100+280,windowImg.width/5,windowImg.height/5)

    image(fishImg, 125+250, 100+240,windowImg.width/7,windowImg.height/7);

    image(coralImg,125+330, 100+260,windowImg.width/4.5,windowImg.height/4.5);

    image(turtleImg,125+100, 100+100,windowImg.width/5,windowImg.height/5);

    image(coralImg,125+170, 100+250,windowImg.width/6,windowImg.height/6);

    image(horseImg,125+15, 100+210,windowImg.width/7,windowImg.height/7);

    image(clownImg,125+300, 100+130,windowImg.width/7,windowImg.height/7);

    push();

    scale(-1,1);

    image(fishImg, -(125+250), 100+40,-windowImg.width/7,windowImg.height/7);

    image(horseImg,-(125+290), 100+370,windowImg.width/8.5,windowImg.height/8.5);

    pop();

  }

  if(situation ==5) {

    image(stoneImg, 125+330, 100+330,windowImg.width/5,windowImg.height/5);

    image(stoneImg, 125+170, 100+300,windowImg.width/7,windowImg.height/7);

    image(stoneImg, 125+50, 100+350,windowImg.width/6,windowImg.height/6);

    image(coralImg,125+50, 100+280,windowImg.width/5,windowImg.height/5)

    image(fishImg, 125+250, 100+240,windowImg.width/7,windowImg.height/7);

    image(coralImg,125+330, 100+260,windowImg.width/4.5,windowImg.height/4.5);

    image(turtleImg,125+100, 100+100,windowImg.width/5,windowImg.height/5);

    image(coralImg,125+170, 100+250,windowImg.width/6,windowImg.height/6);

    image(horseImg,125+15, 100+210,windowImg.width/7,windowImg.height/7);

    image(clownImg,125+300, 100+130,windowImg.width/7,windowImg.height/7);

    image(fishImg, 125+80, 100+200,windowImg.width/7,windowImg.height/7);

​

    push();

    scale(-1,1);

    image(fishImg, -(125+250), 100+40,-windowImg.width/7,windowImg.height/7);

    image(horseImg,-(125+290), 100+370,windowImg.width/8.5,windowImg.height/8.5);

    image(turtleImg,-(125+440), 100+30,windowImg.width/5,windowImg.height/5);

    image(clownImg,-(125+100), 100+40,windowImg.width/7,windowImg.height/7);

    image(horseImg,-(125+180), 100+35,windowImg.width/8.5,windowImg.height/8.5);

    pop();

  }

​

  image(windowImg, 0, 0,windowImg.width/5,windowImg.height/5);

  image(windowOffImg, 595, 0,windowImg.width/5,windowImg.height/5);

  image(carImg, 0, 120,carImg.width/4.8,carImg.height/4.8);

  image(subImg, 600,120,subImg.width/6,subImg.height/6);

  image(axeImg, 0, 230,axeImg.width/5.3,axeImg.height/5.3);

  image(treeImg, 600, 230,treeImg.width/5,treeImg.height/5);

  image(oilImg, 0, 355,oilImg.width/5,oilImg.height/5);

  image(windImg, 600, 355,windImg.width/5,windImg.height/5);

  image(silImg, 0, 480,silImg.width/5.5,silImg.height/5.5);

  image(disImg, 600, 480,disImg.width/5.5,disImg.height/5.5);

​

}

​

function lightOn() {

  light = 1;

  // console.log(light);

  reduSit();

}

function lightOff() {

  light = 2;

  addSit();

}

function carOn() {

  car = 1;

  reduSit();

}

function carOff() {

  car = 2;

  addSit();

}

function treeOn() {

  tree = 1;

  reduSit();

}

function treeOff() {

  tree = 2;

  addSit();

}

function energyOn() {

  energy = 1;

  reduSit();

}

function energyOff() {

  energy = 2;

  addSit();

}

function shareOn() {

  share = 1;

  reduSit();

}

function shareOff() {

  share = 2;

  addSit();

}

​

​

​

​

function addSit() {

  if(situation != 5) {

    situation++;

  }

}

function reduSit() {

  if(situation != 0) {

    situation--;

  }

}