let planetV = false;

let planetE = false;

let planetMa = false;

let planetJ = false;

let planetS = false;

let planetU = false;

let planetN = false;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

​

function draw() {

  background(40);

​

  //Mercury

  noStroke();

  fill(255, 214, 153);

  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);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    mercury();

  }

​

  if (planetV) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    venus();

  }

​

  if (planetE) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    earth();

  }

​

  if (planetMa) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    mars();

  }

​

  if (planetJ) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    jupiter();

  }

​

  if (planetS) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    saturn();

  }

​

  if (planetU) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    uranus();

  }

​

  if (planetN) {

    clear();

    background(40);

    fill(255);

    textSize(100);

    textAlign(CENTER, TOP);

    text('Hi', 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);

    neptune();

  }

}

​

​

function mouseClicked() {

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

    planetMe = true;

  }

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

    planetV = true;

  }

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

    planetE = true;

  }

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

    planetMa = true;

  }

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

    planetJ = true;

  }

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

    planetS = true;

  }

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

    planetU = true;

  }

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

    planetN = true;

  }

}

​

function mercury() {

  noStroke();

  fill(255, 214, 153);

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

}

​

function venus() {

  noStroke();

  fill(204, 102, 0);

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

}

​

function earth() {

  noStroke();

  fill(0, 153, 51)

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

}

​

function mars() {

  noStroke();

  fill(255, 112, 77);

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

}

​

function jupiter() {

  noStroke();

  fill(245, 244, 234);

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

}

​

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)

}

​

function uranus() {

  noStroke();

  fill(0, 204, 255);

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

}

​

function neptune() {

  noStroke();

  fill(102, 0, 255);

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

}

​

​

//p5js intervals