let astro2;

let d;

let star = [];

let blackhole = [];

let blackhole2;

let mercury;

let venus;

let earth;

let mars;

let jupiter;

let saturn;

let uranus;

let neptune;

let others;

//scene change 

let x = 10;

let scene = 1;

let r = 50;

​

​

function setup() {

  createCanvas(600, 400);

  rectMode(CENTER);

​

  for (let i = 0; i < 240; i++) {

    star[i] = new Star();

  }

  //main character - astronaut

  astro1 = new Astro(20, 0);

  astro2 = new Astro(20, 0);

  //stars 

​

  mercury = new Mercury(360, 250);

  venus = new Venus(500, 100);

  earth = new Earth(150, 250);

  mars = new Mars(450, 100);

  jupiter = new Jupiter(250, 350);

  saturn = new Saturn(180, 150);

  uranus = new Uranus(300, 270);

  neptune = new Neptune(500, 90);

​

  //blackholes

  blackhole = new Blackhole(200, 370);

  blackhole1 = new Blackhole(300, 350);

  blackhole2 = new Blackhole2(450, 100);

}

​

function draw() {

  //background gradient 

  c1 = color(0);

  c2 = color(66, 31, 156);

  setGradient(c1, c2);

  x = 0

  y = 0

  //KeyPressed Function - moves character

  if (keyIsPressed == true) {

    if (keyCode == UP_ARROW) {

      astro1.astroY -= 4;

    } else if (keyCode == DOWN_ARROW) {

      astro1.astroY += 4;

    }

    if (keyCode == LEFT_ARROW) {

      astro1.astroX -= 4;

    } else if (keyCode == RIGHT_ARROW) {

      astro1.astroX += 4;

    }

  }

​

  //scene change

  if (scene == 1) {

    scene1();

  } else if (scene == 2) {

    scene2();

  } else if (scene == 3) {

    scene3();

  } else if (scene == 4) {

    scene4();

  } else if (scene == 5) {

    scene5();

  } else if (scene == 6) {

    scene6();

  }

​

  if (astro1.astroX > width) {

    astro1.astroX = 0;

    scene++;

  }

}

​

function setGradient(c1, c2) {

  noFill();

  for (var y = 0; y < height; y++) {

    var inter = map(y, 0, height, 0, 1);

    var c = lerpColor(c1, c2, inter);

    stroke(c);

    line(0, y, width, y);

  }

}

​

//scene1 - introduction

function scene1() {

  for (let i = 0; i < 40; i++) {

    star[i].show();

    let d = dist(astro1.astroX, astro1.astroY, star[i].starX, star[i].starY);

  }

​

  //tiny rocket

  noStroke();

  fill(230, 230, 255);

  rect(440, 280, 60, 90);

  triangle(400,250,440,200,480,250);

  fill(0, 0, 0);

  ellipse(440, 250, 20, 20);

  ellipse(440, 277, 20, 20);

  ellipse(440, 305, 20, 20);

  fill(204, 238, 255);

  ellipse(440, 250, 10, 10);

  ellipse(440, 277, 10, 10);

  ellipse(440, 305, 10, 10);

  fill(230, 230, 255);

  triangle(470,260,500,290,470,310);

  triangle(420,245,385,290,420,320);

  fill(255, 255, 255);

  textSize(40);

  textFont('Futura');

  textStyle(BOLD);

  text("S", 175, 190);

  fill(242, 242, 242);

  text("P", 200, 190);

  fill(217, 217, 217);

  text("A", 225, 190);

  fill(191, 191, 191);

  text("C", 255, 190);

  fill(166, 166, 166);

  text("E", 283, 190);

  fill(140, 140, 140);

  text("C", 320, 190);

  fill(128, 128, 128);

  text("A", 350, 190);

  fill(115, 115, 115);

  text("D", 383, 190);

  fill(89, 89, 89);

  text("E", 415, 190);

  fill(77, 77, 77);

  text("T", 440, 190);

  textSize(20);

  textStyle(NORMAL);

  fill(255, 255, 255);

  text("hover to begin", 235, 230);

  textSize(12);

  text("HELP ME COLLECT ALL THE STARS", 205, 260);

  //introastronaut

  noStroke();

  fill(255, 255, 255);

  ellipse(130, 180, 40, 40);

  fill(208, 208, 225);

  ellipse(130, 180, 30, 30);

  fill(214, 183, 141);

  ellipse(130, 180, 20, 20);

  fill(0, 0, 0);

  ellipse(125, 179, 2, 2);

  ellipse(135, 179, 2, 2);

  fill(209, 163, 98);

  ellipse(130, 181.5, 3, 3);

  fill(0, 0, 0);

  ellipse(130, 186, 3.5, 3.5);

  fill(255, 255, 255);

  rect(130, 220, 45, 45);

  rect(117.5, 260, 20, 40);

  rect(142.5, 260, 20, 40);

  fill(209, 209, 224);

  ellipse(117.5, 280, 20, 20);

  ellipse(142.5, 280, 20, 20);

  fill(240, 240, 245)

  ellipse(110, 225, 20, 60);

  ellipse(150, 225, 20, 60);

​

  rect(300, 225, 180, 0);

  if (mouseX > 300 && mouseX < 480 && mouseY > 225 && mouseY < 265) {

    scene += 1;

  }

}

​

function scene2() {

  astro1.show();

  for (let i = 40; i < 80; i++) {

    let d = dist(astro1.astroX, astro1.astroY, star[i].starX, star[i].starY);

    if (star[i].alive == true){

    star[i].show(); 

        } else if (star[i].alive == false){

          star[i].noShow(); 

    }

    if(d < 30){

      star[i].alive = false;

    }

  }

​

  blackhole.show();

​

​

​

  mercury.show();

  venus.show();

}

​

function scene3() {

  astro1.show();

  for (let i = 80; i < 120; i++) {

    let d = dist(astro1.astroX, astro1.astroY, star[i].starX, star[i].starY);

    if (star[i].alive == true){

    star[i].show(); 

        } else if (star[i].alive == false){

          star[i].noShow(); 

    }

    if(d < 30){

      star[i].alive = false;

    }

  }

​

​

​

  earth.show();

​

  mars.show();

​

​

}

​

function scene4() {

  astro1.show();

  for (let i = 120; i < 160; i++) {

    let d = dist(astro1.astroX, astro1.astroY, star[i].starX, star[i].starY);

    if (star[i].alive == true){

    star[i].show(); 

        } else if (star[i].alive == false){

          star[i].noShow(); 

    }

    if(d < 30){

      star[i].alive = false;

    }

  }

​

​

​

  blackhole2.show();

  jupiter.show();

​

​

  saturn.show();

}

​

function scene5() {

  astro1.show();

  for (let i = 160; i < 200; i++) {

    let d = dist(astro1.astroX, astro1.astroY, star[i].starX, star[i].starY);

    if (star[i].alive == true){

    star[i].show(); 

        } else if (star[i].alive == false){

          star[i].noShow(); 

    }

    if(d < 30){

      star[i].alive = false;

    }

  }

​

  uranus.show();

​

  neptune.show();

}

​

function scene6() {

  fill(255, 255, 255);

  textSize(10);

  textFont('Futura');

  text("thank you for coming on this journey with me!", 200, 25);

  text("time to go home...", 255, 45);

  astro1.show();

for (let i = 200; i < 240; i++) {

    let d = dist(astro1.astroX, astro1.astroY, star[i].starX, star[i].starY);

    if (star[i].alive == true){

    star[i].show(); 

        } else if (star[i].alive == false){

          star[i].noShow(); 

    }

    if(d < 30){

      star[i].alive = false;

    }

  }

​

  //rocket

  noStroke();

  fill(230, 230, 255);

  rect(300, r, 160, 500);

  r = r+1;

  triangle(210, r, 300, r, 390, r);

  r = r-1

  fill(0, 0, 0);

  ellipse(300, r, 40, 40);

  r = r-1

  ellipse(300, r, 40, 40);

  r = r-1;

  ellipse(300, r, 40, 40);

  r = r-1;

  fill(204, 238, 255);

  ellipse(300, r, 30, 30);

  r = r-1;

  ellipse(300, r, 30, 30);

  r = r-1;

  ellipse(300, r, 30, 30);

  r = r-1;

  fill(230, 230, 255);

  triangle(220, r, 170, r, 220, r);

  r = r-1;

  triangle(380, r, 430, r, 380, r);

  r = r-1;

}

class Astro {

  constructor(x, y) {

    this.astroX = x;

    this.astroY = y;

  }

  show() {

    noStroke();

    fill(255, 255, 255);

    ellipse(this.astroX, this.astroY, 33, 33);

    fill(208, 208, 225);

    ellipse(this.astroX, this.astroY, 23, 23);

    fill(223, 191, 159);

    ellipse(this.astroX, this.astroY, 18, 18);

    fill(0, 0, 0);

    ellipse(this.astroX - 3.5, this.astroY - 1, 1.5, 1.5);

    fill(0, 0, 0);

    ellipse(this.astroX + 3.5, this.astroY - 1, 1.5, 1.5);

    fill(0, 0, 0);

    ellipse(this.astroX, this.astroY + 4, 2.5, 2.5);

    fill(255, 255, 255);

    rect(this.astroX, this.astroY + 35, 35, 40);

    rect(this.astroX - 12.5, this.astroY + 65, 18, 30);

    rect(this.astroX + 12.5, this.astroY + 65, 18, 30);

    fill(209, 209, 224);

    ellipse(this.astroX + 12.5, this.astroY + 82, 18, 18);

    ellipse(this.astroX - 12.5, this.astroY + 82, 18, 18);

    fill(240, 240, 245)

    ellipse(this.astroX - 20, this.astroY + 39, 15, 50);

    ellipse(this.astroX + 20, this.astroY + 39, 15, 50);

​

  }

}

​

//blackholes

class Blackhole {

  constructor(x, y) {

    this.blackholeX = random(width);

    this.blackholeY = random(height);

    this.alive = true;

    this.scoring = false;

​

  }

  show() {

    ellipse(this.blackholeX, this.blackholeY, 90, 90);

    fill(0, 0, 0, 150);

    fill(0, 0, 0);

    ellipse(this.blackholeX, this.blackholeY, 80, 80);

    fill(255, 153, 0, 180);

    ellipse(this.blackholeX, this.blackholeY, 50, 50);

    fill(255, 255, 0, 150);

    ellipse(this.blackholeX, this.blackholeY, 30, 30);

​

  }

​

​

​

​

}

​

class Blackhole2 {

  constructor(x, y) {

    this.blackhole2X = x;

    this.blackhole2Y = y;

    this.blackholeX = random(width);

    this.blackholeY = random(height);

  }

  show() {

    ellipse(this.blackhole2X, this.blackhole2Y, 90, 90);

    fill(0, 0, 0, 150);

    fill(0, 0, 0);

    ellipse(this.blackhole2X, this.blackhole2Y, 80, 80);

    fill(255, 153, 0, 180);

    ellipse(this.blackhole2X, this.blackhole2Y, 50, 50);

    fill(255, 255, 0, 150);

    ellipse(this.blackhole2X, this.blackhole2Y, 30, 30);

  }

  noShow() {}

​

}

//planets

class Neptune {

  constructor(x, y) {

    this.neptuneX = x;

    this.neptuneY = y;

  }

  show() {

    fill(77, 121, 255);

    ellipse(this.neptuneX, this.neptuneY, 100, 100);

    fill(255, 255, 255, 150);

    ellipse(this.neptuneX, this.neptuneY, 40, 2);

    ellipse(this.neptuneX + 10, this.neptuneY + 10, 70, 5);

    ellipse(this.neptuneX - 8, this.neptuneY - 25, 70, 5);

    fill(255, 255, 255, 0);

  rect(500, 90, 150, 150);

  if (mouseX > 500 && mouseX < 650 && mouseY > 90 && mouseY < 240)

  fill(255, 255, 255);

  textSize(12);

  text("Neptune's discovery is still a controversy.", 370, 160);

  }

}

class Uranus {

  constructor(x, y) {

    this.uranusX = x;

    this.uranusY = y;

  }

  show() {

    fill(173, 235, 235);

    ellipse(this.uranusX, this.uranusY, 80, 80);

      fill(255, 255, 255, 0);

  rect(300, 270, 150, 150);

  if (mouseX > 300 && mouseX < 450 && mouseY > 270 && mouseY < 420)

  fill(255, 255, 255);

  textSize(12);

  text("Uranus has the coldest temps.", 210, 330);

​

  }

}

​

class Saturn {

  constructor(x, y) {

    this.saturnX = x;

    this.saturnY = y;

  }

  show() {

    fill(255, 255, 153);

    ellipse(this.saturnX, this.saturnY, 80, 80);

    fill(163, 163, 194);

    ellipse(this.saturnX, this.saturnY, 120, 20);

    fill(52, 52, 75);

    ellipse(this.saturnX, this.saturnY, 90, 10);

      fill(255, 255, 255, 0);

  rect(180, 150, 150, 150);

  if (mouseX > 180 && mouseX < 330 && mouseY > 150 && mouseY < 300)

    fill(255, 255, 255);

  textSize(12);

  text("Saturn has 62 moons.", 120, 210);

​

  }

}

​

​

class Jupiter {

  constructor(x, y) {

    this.jupiterX = x;

    this.jupiterY = y;

  }

  show() {

    fill(255, 217, 179)

    ellipse(this.jupiterX, this.jupiterY, 70, 70);

    fill(128, 64, 0);

    ellipse(this.jupiterX, this.jupiterY, 70, 8);

    fill(230, 115, 0);

    ellipse(this.jupiterX, this.jupiterY - 20, 60, 8);

    fill(255, 255, 255);

    ellipse(this.jupiterX, this.jupiterY + 20, 58, 8);

    ellipse(this.jupiterX, this.jupiterY - 12, 66, 5);

    fill(255, 140, 26);

    ellipse(this.jupiterX, this.jupiterY + 12, 66, 2);

      fill(255, 255, 255, 0);

  rect(250, 350, 150, 150);

  if (mouseX > 250 && mouseX < 400 && mouseY > 350 && mouseY < 500)

    fill(255, 255, 255);

  textSize(12);

  text("Jupiter cannot become a star.", 180, 309);

  }

}

​

​

class Mars {

  constructor(x, y) {

    this.marsX = x;

    this.marsY = y;

  }

  show() {

    fill(153, 77, 0);

    ellipse(this.marsX, this.marsY, 80, 80);

    fill(255, 179, 102, 150);

    ellipse(this.marsX, this.marsY, 60, 60);

      fill(255, 255, 255, 0);

  rect(450, 100, 150, 150);

  if (mouseX > 450 && mouseX < 600 && mouseY > 100 && mouseY < 250)

    fill(255, 255, 255);

  textSize(12);

  text("Pieces of Mars have fallen to Earth.", 350, 160);

​

  }

}

​

class Earth {

  constructor(x, y) {

    this.earthX = x;

    this.earthY = y;

  }

  show() {

    fill(77, 77, 255);

    ellipse(this.earthX, this.earthY, 70, 70);

    fill(0, 179, 0);

    ellipse(this.earthX, this.earthY, 20, 20);

    ellipse(this.earthX + 10, this.earthY - 10, 20, 20);

    ellipse(this.earthX - 18, this.earthY + 20, 15, 15);

    fill(77, 153, 0);

    ellipse(this.earthX + 20, this.earthY + 20, 15, 15);

    fill(26, 51, 0);

    ellipse(this.earthX + 23, this.earthY + 10, 15, 15);

    ellipse(this.earthX - 18, this.earthY - 20, 20, 15);

     fill(255, 255, 255, 0);

  rect(150, 250, 150, 150);

  if (mouseX > 150 && mouseX < 300 && mouseY > 25 && mouseY < 400)

    fill(255, 255, 255);

  textSize(12);

  text("Earth is the third planet from the sun.", 70, 300);

  }

}

​

class Mercury {

  constructor(x, y) {

    this.mercuryX = x;

    this.mercuryY = y;

  }

  show() {

    fill(102, 153, 153);

    fill(71, 107, 107);

    ellipse(this.mercuryX, this.mercuryY, 60, 60);

    fill(255, 255, 255);

    ellipse(this.mercuryX, this.mercuryY, 3, 3);

    ellipse(this.mercuryX + 10, this.mercuryY + 10, 3, 3);

    ellipse(this.mercuryX - 10, this.mercuryY - 10, 3, 3);

    ellipse(this.mercuryX + 10, this.mercuryY, 3, 3);

    ellipse(this.mercuryX, this.mercuryY - 10, 3, 3);

    ellipse(this.mercuryX + 18, this.mercuryY + 18, 3, 3);

    ellipse(this.mercuryX - 18, this.mercuryY - 18, 3, 3);

    ellipse(this.mercuryX + 18, this.mercuryY, 3, 3);

    ellipse(this.mercuryX, this.mercuryY + 18, 3, 3);

    ellipse(this.mercuryX - 18, this.mercuryY, 3, 3);

    ellipse(this.mercuryX, this.mercuryY - 18, 3, 3);

    fill(255, 255, 255, 100);

    ellipse(this.mercuryX, this.mercuryY, 45, 45);

    fill(255, 255, 255, 0);

    rect(360, 250, 150, 150);

      fill(255, 255, 255, 0);

  rect(360, 250, 150, 150);

  if (mouseX > 360 && mouseX < 510 && mouseY > 150 && mouseY < 400)

    fill(255, 255, 255);

  textSize(12);

  text("Mercury is the smallest planet.", 290, 300);

​

  }

}

​

class Venus {

  constructor(x, y) {

    this.venusX = x;

    this.venusY = y;

  }

  show() {

    fill(255, 255, 0, 150);

    ellipse(this.venusX, this.venusY, 60, 60);

    fill(255, 51, 0, 200);

    ellipse(this.venusX, this.venusY, 50, 50);

    fill(255, 204, 0, 150);

    ellipse(this.venusX + 10, this.venusY, 10, 10);

    ellipse(this.venusX - 12, this.venusY + 8, 10, 10);

    fill(255, 204, 0);

    ellipse(this.venusX, this.venusY - 13, 10, 10);

    fill(0, 0, 0);

    ellipse(this.venusX - 12, this.venusY - 6, 8, 8);

    ellipse(this.venusX + 12, this.venusY + 12, 8, 8);

    fill(255, 255, 255, 0);

  rect(500, 100, 150, 150);

  if (mouseX > 500 && mouseX < 650 && mouseY > 100 && mouseY < 250)

    fill(255, 255, 255);

  textSize(12);

  text("1 day on Venus is longer than 1 year.", 380, 150);

  }

}

​

//stars

class Star {

  constructor(x, y) {

    this.starX = random(width);

    this.starY = random(height);

    this.alive = true;

    this.scoring = false;

  }

  show() {

    noStroke();

    fill(255, 255, 255, 150);

    ellipse(this.starX, this.starY, 10, 10);

  }

  noShow() {}

}