let startScreen;

let bottom1, bottom2, bottom3, bottom4, bottom5;

let learnMore;

let waterFacts, ammFacts, co2Facts, metFacts, sulfFacts;

​

function setup() {

  createCanvas(500, 500, WEBGL);

  font = loadFont("font1.ttf");

  startScreen = loadImage("titlescreen1.png");

  learnMore = loadImage("learnmore.png");

  bottom1 = loadImage("bottom1.png");

  bottom2 = loadImage("bottom2.png");

  bottom3 = loadImage("bottom3.png");

  bottom4 = loadImage("bottom4.png");

  bottom5 = loadImage("bottom5.png");

  waterFacts = loadImage("waterfact.png");

  ammFacts = loadImage("ammfact.png");

  co2Facts = loadImage("co2fact.png");

  metFacts = loadImage("metfact.png");

  sulfFacts = loadImage("sulffact.png");

  textFont(font);

  textSize(60);

  textAlign(CENTER);

  h2oRed = 80;

  h2oWhite = 60;

}

​

function draw() {

  background(249, 163, 138);

  image(startScreen, -330,-240, 660, 480);  

​

  // water molecule

  if (key === "1") {

    background(163, 195, 176);

    image(bottom1, -330,-238, 620,500);

    image(learnMore,-400, -290, 650,450);

    fill("white");

    text("Water (H2O)", 0, -185);

 if (mouseX > 22 && mouseX < 136 && mouseY > 100 && mouseY < 138) {

     image(learnMore,-400, -290, 655,455);

     if (mouseIsPressed) {

     image(waterFacts, -460, -290, 750, 600);    

    translate(600,100);

     }

    }

   rotateY(mouseX / 100);

    rotateX(mouseY / 100);

​

    fill("red");

    sphere(80);

    fill("white");

    push();

    translate(50, 50);

    sphere(60);

    pop();

    translate(-50, 50);

    sphere(60);

  }

​

  // ammonia molecule

  if (key === "2") {

    background(222, 167, 161);

    image(bottom2, -330,-238, 620,500);

    image(learnMore,-400, -290, 650,450);

    fill("white");

    text("Ammonia (NH3)", 0, -185);

   if (mouseX > 22 && mouseX < 136 && mouseY > 100 && mouseY < 138) {

     image(learnMore,-400, -290, 655,455);

     if (mouseIsPressed) {

     image(ammFacts, -460, -290, 750, 600);    

    translate(600,100);

     }

    }

    rotateY(mouseX / 100);

    rotateX(mouseY / 100);

​

    fill("blue");

    sphere(80);

    fill("white");

    push();

    translate(-50, 30, -30);

    sphere(60);

    pop();

    translate(50, 30, -30);

    sphere(60);

    translate(-50, -30, 30);

    translate(0, 30, 40);

    sphere(60);

  }

​

  //   co2 molecule

  if (key === "3") {

    background(157, 151, 188);

    image(bottom3, -330,-238, 620,500);

    image(learnMore,-400, -290, 650,450);

    textSize(47);

    fill("white");

    text("Carbon Dioxide (CO2)", 10, -185);

    if (mouseX > 22 && mouseX < 136 && mouseY > 100 && mouseY < 138) {

     image(learnMore,-400, -290, 655,455);

     if (mouseIsPressed) {

     image(co2Facts, -460, -290, 750, 600);    

    translate(600,100);

     }

    }

    rotateY(mouseX / 100);

    rotateX(mouseY / 100);

​

    fill("grey");

    sphere(80);

    fill("red");

    push();

    translate(-50, 0);

    sphere(70);

    pop();

    translate(50, 0);

    sphere(70);

  }

​

  // methane molecule

  if (key === "4") {

    background(210, 145, 188);

    image(bottom4, -330,-238, 620,500);

    image(learnMore,-400, -290, 650,450);

    textSize(60);

    fill("white");

    text("Methane (CH4)", 0, -185);

  if (mouseX > 22 && mouseX < 136 && mouseY > 100 && mouseY < 138) {

     image(learnMore,-400, -290, 655,455);

     if (mouseIsPressed) {

     image(metFacts, -460, -290, 750, 600);    

    translate(600,100);

     }

    }

    rotateY(mouseX / 100);

    rotateX(mouseY / 100);

​

    fill(54, 53, 50);

    sphere(80);

    fill("white");

    push();

    translate(-50, 30, -30);

    sphere(60);

    pop();

    translate(50, 30, -30);

    sphere(60);

    translate(-50, -30, 30);

    translate(0, 30, 50);

    sphere(60);

    translate(0, -30, -50);

    translate(0, -50);

    sphere(60);

  }

​

  //   sulfuric acid molecule

  if (key === "5") {

    background(244, 203, 161);

    image(bottom5, -330,-238, 620,500);

    image(learnMore,-400, -290, 650,450);

    textSize(47);

    fill("white");

    text("Sulfuric Acid (H2SO4)", 0, -185);

   if (mouseX > 22 && mouseX < 136 && mouseY > 100 && mouseY < 138) {

     image(learnMore,-400, -290, 655,455);

     if (mouseIsPressed) {

     image(sulfFacts, -460, -290, 750, 600);    

    translate(600,100);

     }

    }

    rotateY(mouseX / 100);

    rotateX(mouseY / 100);

​

    fill("yellow");

    sphere(80);

    fill("red");

    push();

    translate(-50, 30, -30);

    sphere(60);

    pop();

    push();

    translate(50, 30, -30);

    sphere(60);

    pop();

    push();

    translate(0, 30, 50);

    sphere(60);

    pop();

    push();

    translate(0, -50);

    sphere(60);

    pop();

    push();

    fill("white");

    translate(80, 50, -50);

    sphere(45);

    pop();

    translate(-10,50,90);

    fill("white");

    sphere(45);

  }

​

}

​

​