jupiter moons

https://onthe.io/dev

by Stalk

HTML

<div class="col col_6 clear space-conatiner">
  <img class="bg" src="https://i.onthe.io/smngoz7t7tnqmcqfc.27bcfa3e.png">
  <img src="https://i.onthe.io/smngoz5tjf529a9u5.f8e75a90.png" id="io" class="space-object">
  <img src="https://i.onthe.io/smngozgiolp25ikn8.004a585a.png" id="jupiter" class="space-object">
</div>

CSS

body {
  background: #314c5e;
}
.space-conatiner {
  height: 550px;
}
.space-conatiner .bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 710px;
}
#io {
  position: absolute;
  height: 40px;
  top: 257px;
  left: 80px;
}
#jupiter {
  height: 90px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

JavaScript

let speed = .007,
    jupiter = document.querySelector('#jupiter'),
    centerX = jupiter.offsetLeft - 20,
    centerY = jupiter.offsetTop - 20,
    moons = [
      new moon('#io', 1),
      new moon('#europa', 2, 'https://i.imgur.com/pzX6mfh.png'),
      new moon('#ganymede', 4, 'https://i.imgur.com/3xygHq7.png')
    ]


requestAnimationFrame(function drawFrame(){
	moons.forEach(moon => moon.move())
  requestAnimationFrame(drawFrame)
})

function moon(id, speedRatio, src) {
  let moon = this
  this.elem = document.querySelector(id) || createHTMLMoon(id, src)
  let ioOrbitRadius = centerX - document.querySelector('#io').offsetLeft
  this.orbitRadius = src ? ioOrbitRadius + 27 * speedRatio : ioOrbitRadius
  this.speedRatio = speedRatio
  this.f = 0 // start position
  this.move = function(){
    moon.f += speed / moon.speedRatio // orbital resonance, wow!
    //console.log(id, moon.f)
    moon.elem.style.left = centerX + moon.orbitRadius
      * Math.sin(moon.f) + 'px'
    moon.elem.style.top = centerY + moon.orbitRadius
      * Math.cos(moon.f) + 'px'
  }
  return this
}

function createHTMLMoon(id, src) {
  let img = document.createElement('img')
  img.id = id
  img.src = src
  img.className = 'space-object',
    img.style = 'height: 40px; position: absolute;'
  document.querySelector('.space-conatiner').appendChild(img)
  return img
}

window.addEventListener('resize', function(){
  centerX = jupiter.offsetLeft - 20
  centerY = jupiter.offsetTop - 20
})