let astro2;

let star1;

let star2;

let star3;

let star4;

let star5;

let star6;

let star7;

let star8;

let star9;

let star10;

let star11;

let star12;

let star13;

let star14;

let star15;

let star16;

let star17;

let star18;

let star19;

let star20;

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;

​

function setup() {

  createCanvas(600, 400);

  rectMode(CENTER);

  //main character - astronaut

  astro1 = new Astro(20, 0);

  astro2 = new Astro(20, 0);

  //stars 

  star1 = new Star(200, 10);

  star2 = new Star(90, 80);

  star3 = new Star(10, 230);

  star4 = new Star(430, 300);

  star5 = new Star(150, 300);

  star6 = new Star(200, 180);

  star7 = new Star(490, 170);

  star8 = new Star(550, 350);

  star9 = new Star(550, 140);

  star10 = new Star(290, 200);

  star11 = new Star(500, 270);

  star12 = new Star(390, 100);

  star13 = new Star(280, 300);

  star14 = new Star(370, 220);

  star15 = new Star(570, 90);

  star16 = new Star(400, 380);

  star17 = new Star(100, 200);

  star18 = new Star(380, 70);

  star19 = new Star(100, 350);

  star20 = new Star(180, 50);

  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() {

  // //background gradient 

  // c1 = color(0);

  // c2 = color(66, 31, 156);

  // setGradient(c1, c2);

  // x = 0

  // y = 0

​

  fill(255, 255, 255);

  textSize(40);

  textFont('Futura');

  textStyle(BOLD);

  text("S", 175, 200);

  fill(242, 242, 242);

  text("P", 200, 200);

  fill(217, 217, 217);

  text("A", 225, 200);

  fill(191, 191, 191);

  text("C", 255, 200);

  fill(166, 166, 166);

  text("E", 283, 200);

  fill(140, 140, 140);

  text("C", 320, 200);

  fill(128, 128, 128);

  text("A", 350, 200);

  fill(115, 115, 115);

  text("D", 383, 200);

  fill(89, 89, 89);

  text("E", 415, 200);

  fill(77, 77, 77);

  text("T", 440, 200);

  textSize(20);

  textStyle(NORMAL);

  fill(255, 255, 255);

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

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

​

​

  star1.show();

  star2.show();

  star3.show();

  star4.show();

  star5.show();

  star6.show();

  star7.show();

  star8.show();

  star9.show();

  star10.show();

  star11.show();

  star12.show();

  star13.show();

  star14.show();

  star15.show();

  star16.show();

  star17.show();

  star18.show();

  star19.show();

  star20.show();

​

  rect(300, 225, 180, 0);

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

    scene += 1;

  }

}

​

function scene2() {

  astro1.show();

  star1.show();

  star2.show();

  star3.show();

  star4.show();

  star5.show();

  star6.show();

  star7.show();

  star8.show();

  star9.show();

  star10.show();

  star11.show();

  star12.show();

  star13.show();

  star14.show();

  star15.show();

  star16.show();

  star17.show();

  star18.show();

  star19.show();

  star20.show();

  blackhole.show();

  fill(255,255,255,0);

  rect(200,370,150,150);

  if(mouseX>200 && mouseX<350 && mouseY>370 && mouseY < 420)

  fill(255,255,255);

  textSize(12);

  text("Dying stars lead to stellar black holes.",100,320);

  mercury.show();

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

  venus.show();

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

}

​

function scene3() {

  astro1.show();

  star1.show();

  star2.show();

  star3.show();

  star4.show();

  star5.show();

  star11.show();

  star12.show();

  star13.show();

  star14.show();

  star15.show();

  star16.show();

  star17.show();

  star18.show();

  star19.show();

  star20.show();

  earth.show();

  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.",90,300);

  mars.show();

}

​

function scene4() {

  astro1.show();

  star1.show();

  star2.show();

  star3.show();

  star4.show();

  star5.show();

  star6.show();

  star7.show();

  star8.show();

  star9.show();

  star10.show();

  star11.show();

  star12.show();

  star13.show();

  star14.show();

  star15.show();

  star16.show();

  star17.show();

  star18.show();

  star19.show();

  star20.show();

  blackhole2.show();

  jupiter.show();

  saturn.show();

}

​

function scene5(){

  astro1.show();

  star1.show();

  star2.show();

  star3.show();

  star4.show();

  star5.show();

  star6.show();

  star7.show();

  star8.show();

  star9.show();

  star10.show();

  star11.show();

  star12.show();

  star13.show();

  star14.show();

  star15.show();

  star16.show();

  star17.show();

  star18.show();

  star19.show();

  star20.show();

  uranus.show();

  neptune.show();

}

​

function scene6(){

  fill(255, 255, 255);

  textSize(10);

  textFont('Futura');

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

  text("time to go home...", 50,50);

  astro1.show();

  star1.show();

  star2.show();

  star3.show();

  star4.show();

  star5.show();

  star6.show();

  star7.show();

  star8.show();

  star9.show();

  star10.show();

  star11.show();

  star12.show();

  star13.show();

  star14.show();

  star15.show();

  star16.show();

  star17.show();

  star18.show();

  star19.show();

  star20.show();

  //rocket

  noStroke();

  fill(230, 230, 255);

  rect(300,380,160,500);

  triangle(210,140,300,50,390,140);

  fill(0,0,0);

  ellipse(300,210,40,40);

  ellipse(300,270,40,40);

  ellipse(300,330,40,40);

  fill(204, 238, 255);

  ellipse(300,210,30,30);

  ellipse(300,270,30,30);

  ellipse(300,330,30,30);

  fill(230,230,255);

  triangle(220,250,170,300,220,350);

  triangle(380,250,430,300,380,350);

}

//astronaut

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 = x;

    this.blackholeY = y;

  }

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

​

  }

​

​

  //   checkCollision() {

  //     if ((this.starX > astro1.astroX - 40) && (this.starX < astro1.astroX + 40) && (this.starY > astro1.astroY - 40) && (this.starY < astro1.astroY + 40)) {

​

  //       astro1.astroY = width;

  //     }

  //   }

​

}

​

class Blackhole2 {

  constructor(x, y) {

    this.blackhole2X = x;

    this.blackhole2Y = y;

  }

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

  }

​

}

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

  }

}

class Uranus {

  constructor(x, y) {

    this.uranusX = x;

    this.uranusY = y;

  }

  show() {

    fill(173, 235, 235);

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

  }

}

​

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

  }

}

​

​

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

  }

}

​

​

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

​

  }

}

​

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

  }

}

​

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

  }

}

​

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

  }

}

​

//stars

class Star {

  constructor(x, y) {

    this.starX = x;

    this.starY = y;

  }

  show() {

    noStroke();

    fill(255, 255, 255, 150);

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

  }

}