let stars = []; //making an array for stroing stars

class moon{ // class for making a moon

  constructor(xm, ym, wm, hm,cm) {

    this.xm = xm; // x coordinate of moon

    this.ym = ym; // y coordinate of moon

    this.wm = wm; // width of moon

    this.hm = hm; //height of moon

  }

  draw() {

    // drawing the moon itself with craters 

    fill("lightgrey");

    ellipse(this.xm, this.ym, this.wm, this.hm);

    noStroke();

    fill("#adadad");

    ellipse(this.xm + 20, this.ym-10, this.wm/5, this.hm/4);

    ellipse(this.xm -15, this.ym+10, this.wm/5, this.hm/4);

    ellipse(this.xm -10 , this.ym-20, this.wm/5, this.hm/5);

    ellipse(this.xm +15 , this.ym+12, this.wm/5, this.hm/5);

  }

​

}

class Square { // making a class for squares for the orbit 

  constructor(x, y, size, colors) {

    this.x = x; // x coordinate 

    this.y = y; // y coordinate 

    this.size = size; // size of squares

    this.colors = colors; //color of square

  }

​

  draw() { //drawing a square 

    strokeWeight(1);

    fill(this.colors);

    rect(this.x, this.y, this.size, this.size);

  }

}

​

let squares = []; //array of squares to store them 

let angle = 0;

let angleStep = 5;

let radius = 1;

let xoffset = 0;

let yoffset = 0;

​

​

let moon_obj = new moon(200,200,75,75,100,200); //making a moon with the help of a moon class

​

​

function setup() {

  createCanvas(400, 400);

  frameRate(50);

  //making the orbit with sqaures which are very tiny and using sin and cos functions to make them move in a particular motion

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

    let x = width/2 + radius * cos(angle);

    let y = height/2 + radius * sin(angle);

    let size = 2;

    let colors = (random(200), random(200), random(255));

    squares.push(new Square(x, y, size, colors));

    angle += angleStep;

    radius += 0.01;

  }

​

  // to make stars which appear upon clicking on the canvas

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

    stars[i] = {

      x: random(0, width),

      y: random(0, height)

    };

  }

}

​

function draw() { // displaying my creative idea of a moon with an orbit 

  if(star==false)

  {

     background(0);

  for (let i = 0; i < squares.length; i++) {

    squares[i].x = squares[i].x + xoffset + sin( frameCount*0.01+i*0.1);

    squares[i].y = squares[i].y + yoffset + cos(frameCount * 0.05 + i * 0.1);

    squares[i].draw();

  }

   moon_obj.draw();

  }

  else // if clicked displaying moon as imagined by many

  {

     background(0);

  moon_obj.draw();

fill("white");

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

    ellipse(stars[i].x, stars[i].y, 1, 1);

  }

  }

}

​

​

function mouseClicked() {

  if(star==false)

  {

    star =true;

  }

  else

    star =false;

}

​

​

​