let planetV = false;

let planetE = false;

let planetMa = false;

let planetJ = false;

let planetS = false;

let planetU = false;

let planetN = false;

let imgMe;

let imgV;

let imgE;

let imgMa;

//let imgJ;

//let imgS;

// let imgU;

//let imgN;

​

function preload() {

  imgMe = loadImage('Images/Mercury1.png');

  imgV = loadImage('Images/Venus1.png');

  imgE = loadImage('Images/Earth1.png');

  imgMa = loadImage('Images/Mars1.png');

  //imgJ = loadImage('Images/Jupiter1.png');

  //imgS = loadImage('Images/Saturn1.png');

  // imgU = loadImage('Images/Uranus1.png');

  //imgN = loadImage('Images/Neptune1.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

​

function draw() {

  background(40);

  textSize(50);

  textAlign(CENTER, TOP);

  text('Choose Your Planet', width / 2, height / 6);

​

  //Mercury

  noStroke();

  fill(245, 244, 234);

  ellipse(width / 9 * 0.5, height / 2, 20, 20);

  //Venus

  fill(204, 102, 0);

  ellipse(width / 9 * 1.15, height / 2, 30, 30);

  //Earth

  fill(0, 153, 51)

  ellipse(width / 9 * 1.95, height / 2, 30, 30);

  //Mars

  fill(255, 112, 77);

  ellipse(width / 9 * 2.75, height / 2, 30, 30);

  //Jupiter

  fill(245, 244, 234);

  ellipse(width / 9 * 4, height / 2, 100, 100);

  //Saturn

  fill(255, 255, 153);

  ellipse(width / 9 * 5.75, height / 2, 80, 80);

  stroke(255, 212, 117);

  strokeWeight(10);

  line(width / 9 * 5, height / 2 + 20, width / 9 * 6.5, height / 2 - 20)

  //Uranus

  noStroke();

  fill(0, 204, 255);

  ellipse(width / 9 * 7.15, height / 2, 50, 50);

  //Neptune

  fill(102, 0, 255);

  ellipse(width / 9 * 8.15, height / 2, 50, 50);

​

​

  if (planetMe) {

    clear();

    background(40);

    mercury();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Mercury', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetV) {

    clear();

    background(40);

    venus();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Venus', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetE) {

    clear();

    background(40);

    earth();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Earth', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetMa) {

    clear();

    background(40);

    mars();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Mars', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetJ) {

    clear();

    background(40);

    jupiter();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Jupiter', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetS) {

    clear();

    background(40);

    saturn();

    noStroke();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Saturn', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetU) {

    clear();

    background(40);

    uranus();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Uranus', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

​

  if (planetN) {

    clear();

    background(40);

    neptune();

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Neptune', width / 2, height / 15 * 2);

    fill(255, 50);

    textSize(50);

    text('Umm hey...', width / 4, height / 15 * 12);

    text('Hi there!', width / 4 * 3, height / 15 * 12);

  }

}

​

​

function mouseClicked() {

  if (mouseX >= width / 9 * 0.5 - 20 && mouseX <= width / 9 * 0.5 + 20) {

    if (mouseY >= height / 2 - 20 && mouseY <= height / 2 + 20) {

      planetMe = true;

    }

  }

  if (mouseX >= width / 9 * 1.15 - 30 && mouseX <= width / 9 * 1.15 + 30) {

    if (mouseY >= height / 2 - 20 && mouseY <= height / 2 + 20) {

      planetV = true;

    }

  }

  if (mouseX >= width / 9 * 1.95 - 30 && mouseX <= width / 9 * 1.95 + 30) {

    if (mouseY >= height / 2 - 20 && mouseY <= height / 2 + 20) {

      planetE = true;

    }

  }

  if (mouseX >= width / 9 * 2.75 - 30 && mouseX <= width / 9 * 2.75 + 30) {

    if (mouseY >= height / 2 - 20 && mouseY <= height / 2 + 20) {

      planetMa = true;

    }

  }

  if (mouseX >= width / 9 * 4 - 60 && mouseX <= width / 9 * 4 + 60) {

    if (mouseY >= height / 2 - 50 && mouseY <= height / 2 + 50) {

      planetJ = true;

    }

  }

  if (mouseX >= width / 9 * 5.75 - 80 && mouseX <= width / 9 * 5.75 + 80) {

    if (mouseY >= height / 2 - 40 && mouseY <= height / 2 + 40) {

      planetS = true;

    }

  }

  if (mouseX >= width / 9 * 7.15 - 20 && mouseX <= width / 9 * 7.15 + 20) {

    if (mouseY >= height / 2 - 30 && mouseY <= height / 2 + 30) {

      planetU = true;

    }

  }

  if (mouseX >= width / 9 * 8.15 - 20 && mouseX <= width / 9 * 8.15 + 20) {

    if (mouseY >= height / 2 - 30 && mouseY <= height / 2 + 30) {

      planetN = true;

    }

  }

}

​

​

​

​

function mercury() {

  image(imgMe, width / 2 - imgMa.width / 2, height / 2 - imgMa.height / 2);

}

​

function venus() {

  image(imgV, width / 2 - imgMa.width / 2, height / 2 - imgMa.height / 2);

}

​

function earth() {

  image(imgE, width / 2 - imgMa.width / 2, height / 2 - imgMa.height / 2);

}

​

function mars() {

  image(imgMa, width / 2 - imgMa.width / 2, height / 2 - imgMa.height / 2);

}

​

function jupiter() {

  noStroke();

  fill(245, 244, 234);

  ellipse(width / 2, height / 2, 150, 150);

  //image(imgJ, width/2-imgJ.width/2, height/2-imgJ.height/2);

}

​

function saturn() {

  noStroke();

  fill(255, 255, 153);

  ellipse(width / 2, height / 2, 130, 130);

  stroke(255, 212, 117);

  strokeWeight(10);

  line(width / 6 * 2, height / 2 + 50, width / 6 * 4, height / 2 - 40)

  //image(imgS, width/2-imgS.width/2, height/2-imgS.height/2);

}

​

function uranus() {

  noStroke();

  fill(0, 204, 255);

  ellipse(width / 2, height / 2, 100, 100);

  // image(imgU, width/2-imgU.width/2, height/2-imgU.height/2);

}

​

function neptune() {

  noStroke();

  fill(102, 0, 255);

  ellipse(width / 2, height / 2, 100, 100);

  //image(imgN, width/2-imgN.width/2, height/2-imgN.height/2);

}

​

​

//p5js intervals