HTML5 solar system - definitely not drawn to scale lol. Orbit speeds are roughly to scale :)

solar-system.coffee

class Planet

  constructor: (@radius, @colour, @baseX, @baseY, @orbitSpeed) ->
    @x = @baseX
    @y = @baseY
    @startTime = Date.now()
    @theta = 0

  update: (sun) ->
    newTime = Date.now()
    elapsed = newTime - @startTime
    @startTime = newTime
    # Multiply angle by orbit speed and earth displacement
    # This constant roughly equates 1 second to 10 earth days
    yearConst = 0.0001825
    @theta += elapsed * @orbitSpeed * yearConst
    @theta %= 2 * Math.PI
    radius = Math.abs(sun.x - @baseX)
    @x = sun.x + radius * Math.cos @theta
    @y = sun.y + radius * Math.sin @theta

  render: (sun, context) ->
    # Draw ring around orbit
    context.beginPath()
    context.strokeStyle = '#FFFFFF'
    context.lineWidth = 1
    context.arc sun.x, sun.y, @baseX - sun.x, 0, 2 * Math.PI, false
    context.closePath()
    context.stroke()
    # Draw planet
    context.beginPath()
    context.arc @x, @y, @radius, 0, 2 * Math.PI, false
    context.fillStyle = @colour
    context.closePath()
    context.fill()


WIDTH = window.innerWidth
HEIGHT = window.innerHeight
FPS = 60
animate = window.requestAnimationFrame or
          window.webkitRequestAnimationFrame or
          window.mozRequestAnimationFrame or
          (callback) ->
            window.setTimeout(callback, 1000 / FPS)

canvas = document.getElementsByClassName('animation')[0]
canvas.width = WIDTH
canvas.height = HEIGHT
canvas.focus()
ctx = canvas.getContext '2d'

sun =
  radius: 47.5
  x: canvas.width / 2
  y: canvas.height / 2

# Orbit velocities taken from: http://www.sjsu.edu/faculty/watkins/orbital.htm
mercury = new Planet 3, '#946424', sun.x + sun.radius + 5.5, sun.y, 1.607
venus = new Planet 5, '#BE5518', sun.x + sun.radius + 16.5, sun.y, 1.174
earth = new Planet 7, '#0033CC', sun.x + sun.radius + 35, sun.y, 1
mars = new Planet 4, '#CA7759', sun.x + sun.radius + 52.5, sun.y, 0.802
jupiter = new Planet 20, '#DCC6B1', sun.x + sun.radius + 95, sun.y, 0.434
saturn = new Planet 17.5, '#F2C092', sun.x + sun.radius + 150, sun.y, 0.323
uranus = new Planet 13.5, '#C7EDF0', sun.x + sun.radius + 200, sun.y, 0.228
neptune = new Planet 11.25, '#0252A7', sun.x + sun.radius + 250, sun.y, 0.182
planets = [mercury, venus, earth, mars, jupiter, saturn, uranus, neptune]

# Animation logic
update = () ->
  for planet in planets
    planet.update(sun)

render = () ->
  ctx.clearRect 0, 0, canvas.width, canvas.height
  # All black background
  ctx.fillStyle = '#000000'
  ctx.fillRect 0, 0, canvas.width, canvas.height

  # El sol
  ctx.beginPath()
  ctx.arc sun.x, sun.y, sun.radius, 0, 2 * Math.PI, false
  ctx.fillStyle = '#FFFF3C'
  ctx.closePath()
  ctx.fill()

  for planet in planets
    planet.render sun, ctx

do () ->
  main = () ->
    animate main
    update()
    render()

  main()