//the direction of light(position of the star) represents the hour

//the position of the bigger satellite represents the minute

//the position of the smaller satellite represents the second

//press the mouse or drag with left click to view the orbits

​

​

​

//state the time and transparency variables

let h;

let m;

let s;

let transparency;

​

​

​

//create 3d space; import the initial minute and second number

function setup() {

  createCanvas(600, 600, WEBGL);

  h = hour();

  m = minute();

  s = second();

}

​

​

​

function draw() {

  background(0);

  //initially, the orbits are invisible

  //press the mouse or drag with left click to view the orbits

  if(mouseIsPressed) {

    transparency = 50;

  } else {

    transparency = 0;

  }

  //allow rotating the system

  orbitControl(0.3, 0.3);

  //counting hours with milliseconds is a lot of calculation, so I refresh the hour input in "draw".

  h = hour();

  //the light shows the hour, just like in real life, but also like analogue clock

  directionalLight(240, 240, 255, -sin((h + minute()/60) / 6 * PI), -sin((h + minute()/60)/ 6 * PI - PI/2), -0.6);

​

  //draw the big orbit

  stroke(200, transparency);

  fill(0, 0);

  ellipse(0, 0, 360);

​

  //draw the planet

  noStroke();

  fill(255);

  sphere(60);

  //draw the small orbit

  translate(p5.Vector.fromAngle(-PI/2 + millis()/1800000*PI + m * PI / 30, 180));

  stroke(200, transparency);

  fill(0, 0);

  ellipse(0, 0, 120);

  //draw the satellite

  noStroke();

  fill(255);

  sphere(20);

  //draw the satellite of satellite

  translate(p5.Vector.fromAngle(-PI/2 + millis()/30000*PI + s * PI / 30, 60));

  sphere(8);

}

​