// based on https://editor.p5js.org/fede.santana/sketches/QA1B7Cg-O

​

function drawStars() {

  fill(0,0,80 + random(20));

  circle(60,120, random(3));

  circle(70,80, random(3));

  circle(10,15, random(3));

  circle(90,140, random(3));

  circle(100,200, random(3));

  circle(210,220, random(3));

  circle(240,260, random(3));

  circle(290,310, random(3));

  circle(50 + (100),340, random(3));

  circle(40+50,40, random(3));

  circle(300+30,350-100, random(3));

  circle(100-40,200+200, random(3));

  circle(210+20,220-30, random(3));

  circle(240+20,40+60, random(3));

  circle(290,310, random(3));

  circle(100 + (100),340, random(3));

  circle(350,350, random(3));

  circle(300,350, random(3));

}

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  colorMode(HSB);

  noStroke();

  //createLoop(gif=true);

}

​

let earthRotation = 0;

let moonRotation = 0;

​

function draw() {

  background(0,0,0,0.1);

  fill(255);

  drawStars();

  translate(200, 200);

  fill(50, 75, 80);

  circle(0, 0, 80);

  // earth

  rotate(earthRotation);

  translate(0, 150);

  fill(240, 40, 90);

  circle(0, 0, 20);

  // moon

  rotate(moonRotation);

  translate(0, 25);

  fill(0,0,100,0.5);

  circle(0, 0, 8);

  earthRotation = earthRotation + 1;

  moonRotation = moonRotation - 5;

}

​