JSFiddle - React, Tailwind, and code Playground

by themightychris

HTML

<canvas id="solarCanvas" width="300" height="300">

JavaScript

// create global variables to store the state of planet #1
var r = 50;
var a = 0;
var da = -Math.PI/128;

// create global variables to store the state of planet #2
var r2 = 120;
var a2 = Math.PI;
var da2 = Math.PI/80;

// create global variables to store the state of planet #3
var r3 = 145;
var a3 = Math.PI;
var da3 = Math.PI/200;

// create global variable to store the canvas' drawing context
var ctx;


// declare reusable functions
function init() {
  ctx = document.getElementById('solarCanvas').getContext("2d");
  return setInterval(draw, 10);
}

function drawPlanet(planetRadius, orbitRadius, angle, color)
{
  // draw orbit outline
  ctx.beginPath();
  ctx.arc(150, 150, orbitRadius, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.stroke();

  // draw planet 2
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(150+ orbitRadius*Math.cos(angle), 150+Math.sin(angle)* orbitRadius, planetRadius, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();  
}

function draw() {
  ctx.clearRect(0,0,300,300);
  
  drawPlanet(10, r, a, '#0000FF');
  drawPlanet(16, r2, a2, '#FF0000');
  drawPlanet(5, r3, a3, '#FF31F3');

  // draw sun
  ctx.fillStyle = '#FFFF00';
  ctx.beginPath();
  ctx.arc(150, 150, 20, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  
  
  a += da;
  a2 += da2;
  a3 += da3;
}

    
// start the animation by calling the init function declared earlier
init();