Your browser does not support HTML5 Canvas. Please update your browser.
HOME
KEPLER
GLOSSARY
TUTORIAL - PLANETS
TUTORIAL - MOONS
ABOUT

This five-part tutorial explains how you can create your own Solar System simulation or "orrery" using simple JavaScript. The end result will feature all the planets in their orbits around the sun based on a Gregorian input date. Along the way you'll also learn a thing or two about Celestial Mechanics.
I've deliberately broken up this tutorial to keep things as understandable as possible. Each part contains workable code you can run locally on your machine.

Each code example is a pre-requisite for the next one, so I don't recommend skipping ahead. For example, in order to calculate planetary positions, you will first need to convert the commonly known Gregorian date into a Julian date.
In this JavaScript tutorial I don't waste any time on fluff. The completed JavaScript Solar System code is well under 500 lines.

I hope this tutorial helps you to create your own JS Solar System simulation. Have fun!

I. CREATE LAYERED HTML CANVAS

We start off by creating our foundation using an HTML canvas. This is our starting point upon which we keep building additional functionality in the subsequent sections.
The canvas element represents the window into our JavaScript application. Since we want the code to run smoothly for mobile users, we will actually layer two HTML canvases on top of each other:
  1. BACKGROUND LAYER CANVAS
    1. Used for static graphical elements (e.g. rendering Sun at center of canvas)
  2. FOREGROUND LAYER CANVAS
    1. Used for moving graphical elements (e.g. dynamic text elements)
On the right you see the layered HTML canvas trying to run at 20FPS. The sun is rendered on the background canvas as it doesn't move. The text is rendered on the foreground canvas as values need to be updated constantly. Get the JavaScript source code HERE. The HTML code needed to run the JavaScript is listed below.
Your browser does not support HTML Canvas. Please update your browser.
Layered canvases using Z-index

<HTML>
	<HEAD>
		<meta charset="UTF-8">
	</HEAD>
	<BODY>
		<!-- CREATE CONTAINER TO HOLD BOTH CANVASES -->	
		<div id="CONTAINER" style="width:350px;height:350px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">

			<!-- BACKGROUND LAYER (Z-INDEX 0) -->
			<canvas id="LAYER_BACKGROUND_T2" width="350" height="350" style="position: absolute; left: 0; top: 0; z-index: 0;">
			</canvas>
			<!-- FOREGROUND LAYER (Z-INDEX 1) -->
			<canvas id="LAYER_FOREGROUND_T2" width="350" height="350" style="position: absolute; left: 0; top: 0; z-index: 1;">
			</canvas>

		</div>
		<!-- JAVASCRIPT CODE -->
		<script type="text/javascript" src="T2_createLayeredCanvas.js">
		</script>
	</BODY>
</HTML>

II. CONVERT GREGORIAN DATE TO JULIAN DATE

In order to start using the Keplerian elements and calculate the position of the planets, we need to use the Julian calendar. Since we currently use the Gregorian calendar, we need to convert the Gregorian date to a Julian date using a JavaScript Julian Date function called getJulianDate. After that we need to do one more thing: take that Julian date and calculate how many Julian centuries after the Epoch (JAN 1, 2000) this date is. Get the full JavaScript source code HERE.

EXAMPLE:
  1. GREGORIAN DATE = JAN 1, 2150
    1. The Gregorian Calendar is the most widely used calendar today.
  2. JULIAN DAY = 2506332
    1. Julian Calendar expressed in Julian Day Number (Day 0 = JAN 1, 4713BC)
  3. JULIAN CENTURIES SINCE J2000 = 1.5
    1. Julian Centuries since the reference date or Epoch (JAN 1, 2000AD)
Your browser does not support HTML Canvas. Please update your browser.
Gregorian date to Julian Centuries since J2000

III. CALCULATE ELEMENTS USING JULIAN DATE

Now that we have the Julian date and how many centuries after J2000 this is, we can apply that to calculate planet positions using JPL's Keplerian elements for Approximate Positions of the Major Planets. In the example on the right we are calculating the Keplerian elements for Mars based on the Gregorian input date. For a refresher on the Keplerian elements go HERE.

As you can see, the orbit SIZE, orbit SHAPE and orbit ORIENTATION, captured in the first five Keplerian elements, don't change much. Its only the orbit POSITION "L" that changes as time passes by. Get the JavaScript source code HERE.

Credits for the calculations go to Robert Braeunig and Juergen Giesen.
Your browser does not support HTML Canvas. Please update your browser.
Keplerian elements for Mars

IV. RENDER PLANET ON JAVASCRIPT CANVAS

Now that we can calculate the Keplerian elements for any date, the last step is to determine the Heliocentric Ecliptic Coordinates of the planet. In order to do this we will need two things:
  • TRUE ANOMALY
  • RADIUS VECTOR
The JavaScript application shows the X, Y & Z coodinates for planet Mars based on the given date. You can see that these are all expressed in Astronomical Units (AU). The view of Mars itself (the red dot) is a top-down representation and therefore the Z coordinate is not being used. Get the JavaScript source code HERE.

Credits for the calculations go to Keith Burnett.
Your browser does not support HTML Canvas. Please update your browser.
Heliocentric Ecliptic Coordinates for Mars

V. COMPLETE JAVASCRIPT ORRERY

The finished orrery with all eight planets of our Solar System can be seen on the right. The planets in order:
  • MERCURY
  • VENUS
  • EARTH
  • MARS
  • JUPITER
  • SATURN
  • URANUS
  • NEPTUNE
Get the JavaScript source code HERE.

You can verify the positions of the planets using NASA's Solar System Simulator. Note that the First Point of Aries in the NASA simulation is due north (turned 90°).

Ready to take the next step? Find our Saturnian System JavaScript tutorial HERE.
Your browser does not support HTML Canvas. Please update your browser.
Completed JavaScript Orrery of Solar System with all eight planets