function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  angleMode(DEGREES);
  frameRate(60);
}

let Year = 2021;
let Day = 0;
let randomX = 0;
let randomY = 0;
let xPos = 0;
let yPos = 0;

let mercury = {
  planetColor: "grey",
  distance: 100,
  //57.91 million km
  diameter: 15,
  //4,879
  orbitSpeed: 360 / 88,
  //about 47.87 km/s
  //0.79783333
  distanceOrbited: 1
};

let venus = {
  planetColor: "white",
  distance: 150,
  //108.2 million km
  diameter: 20,
  //12,104
  orbitSpeed: 360 / 225,
  //about 35 km/s
  //0.583333333
  distanceOrbited: 1
};

let earth = {
  planetColor: "SkyBlue",
  distance: 200,
  //151.99 million km
  diameter: 30,
  //12,742
  orbitSpeed: 360 / 365,
  //about 30 km/s
  //0.5
  distanceOrbited: 1,
  MoonDistanceOrbited: 1,
  MoonOrbitSpeed: 360 / 643
};

let mars = {
  planetColor: "red",
  distance: 250,
  //250.64 million km
  diameter: 30,
  //6,779km
  orbitSpeed: 360 / 687,
  //about 24 km/s
  //0.4
  distanceOrbited: 1
};

let jupiter = {
  planetColor: "peru",
  distance: 300,
  //753.31 million km
  diameter: 30,
  //139,820 km
  orbitSpeed: 360 / (12 * 365),
  //about 13.07 km/s
  //0.21783333
  distanceOrbited: 1
};

let satern = {
  planetColor: "NavajoWhite",
  distance: 350,
  //1.434 billion km
  diameter: 30,
  //116,460 km
  orbitSpeed: 360 / (29 * 365),
  //about 9.68 km/s
  //0.1613333
  distanceOrbited: 1
};

let uranus = {
  planetColor: "LightSlateGray",
  distance: 400,
  //2.9533 billion km
  diameter: 30,
  //50,724
  orbitSpeed: 360 / (84 * 365),
  //about 6.8 km/s
  //0.11333333
  distanceOrbited: 1
};

let neptune = {
  planetColor: "MediumBlue",
  distance: 450,
  //4.4753 billion km
  diameter: 30,
  //49,244
  orbitSpeed: 360 / (165 * 365),
  //about 5.4 km/s
  //0.09
  distanceOrbited: 1
};

function draw() {
  background("black");

  push();

  textSize(30);
  fill("white");

  text("地球の年:", 5, 30);

  text("地球上の日にち:", 5, 70);

  text(Year, 145, 30);

  text(Day, 230, 70);

  if (Day > 365) {
    Year += 1;
  } else {
    Year = Year;
  }

  if (Day < 366) {
    Day += 1;
  } else [(Day = 0)];

  if (Day < 91) {
    text("地球の季節:", 5, 110);
    text("春", 170, 110);
  } else if (Day < 91 * 2) {
    text("地球の季節:", 5, 110);
    text("夏", 170, 110);
  } else if (Day < 91 * 3) {
    text("地球の季節:", 5, 110);
    text("秋", 170, 110);
  } else if (Day < 91 * 4) {
    text("地球の季節:", 5, 110);
    text("冬", 170, 110);
  }

  pop();

  translate(width / 2, height / 2);

  fill("yellow");
  circle(xPos, yPos, 75);

  drawPlanet(mercury);
  drawPlanet(venus);
  drawPlanetWithMoons(earth);
  drawPlanet(mars);
  drawPlanet(jupiter);
  drawPlanetWithRings(satern);
  drawPlanet(uranus);
  drawPlanet(neptune);

  push();
  randomY = random(-3, 3);
  randomX = random(-3, 3);
  xPos = randomX;
  yPos = randomY;

  pop();
}
    


function drawPlanet(planet) {
  push();
  rotate(planet.distanceOrbited);
  stroke(planet.planetColor);
  fill(planet.planetColor);
  circle(planet.distance, 0, planet.diameter);
  noFill();
  circle(0, 0, planet.distance * 2);
  pop();
  planet.distanceOrbited += planet.orbitSpeed;
  planet.MoonDistanceOrbited += planet.orbitSpeed;
}

function drawPlanetWithRings(planet) {
  push();
  rotate(planet.distanceOrbited);
  stroke(planet.planetColor);
  fill(planet.planetColor);
  push();
  noFill();
  circle(0, 0, planet.distance * 2);
  pop();
  strokeWeight(4);
  stroke("Sienna");
  circle(planet.distance, 0, planet.diameter * 1.4);
  circle(planet.distance, 0, planet.diameter);
  pop();
  planet.distanceOrbited += planet.orbitSpeed;
}

function drawPlanetWithMoons(planet) {
  push();
  rotate(planet.distanceOrbited);
  stroke(planet.planetColor);
  fill(planet.planetColor);
  circle(planet.distance, 0, planet.diameter);
  noFill();
  circle(0, 0, planet.distance * 2);
  pop();

  //draw some moon
  push();

  translate(
    planet.distance * cos(planet.distanceOrbited),
    planet.distance * sin(planet.distanceOrbited)
  );

  rotate(planet.MoonDistanceOrbited * 10);
  circle(0, 0 - planet.diameter / 2 - 10, planet.diameter / 3);

  pop();
  //end of drawing moons

  planet.distanceOrbited += planet.orbitSpeed;
  planet.MoonDistanceOrbited += planet.MoonOrbitSpeed;
 }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@strivemath/strive@1.1.4/dist/strive.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js