title: Dynamically change animation speed
body: <p><br>For teaching myself javascript (and for getting/giving more insight in the field of astronomy :) ), I am setting up a page that displays relative positions of sun and moon. 
  Right now, the speed of the sun and moon movement is still fixed, but I would really like to make this dynamically user-definable via an input field. So, the initial speed is '30', and a user can speed this up or slow this down. <strong>Obviously, the ratio between sun and moon must stay fixed.</strong> I tried a lot of things (see some relics in the code, but I can't get it to work.<br><br>
  Anyone with more experience with javascript can assist me in doing this? Also, I notice CPU usage gets very high during this animation. Are there simple steps in making this script more efficient?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dagen = 0;
  function speed($this){
   var speedSetting = $this.value;
      //alert(speedSetting);
   //return per;
  }
  function periode(bolletje, multiplier=30){
   if (bolletje == 'zon'){var per = (multiplier*24/2);}
      if (bolletje == 'maan'){var per = (multiplier*24*29.5/2);}
      return per;
  }
  function step(delta) {
    elem.style.height = 100*delta + '%'
  }
  function animate(opts) {
    var start = new Date 
    var id = setInterval(function() {
      var timePassed = new Date - start
      var progress = timePassed / opts.duration
      if (progress &gt; 1) progress = 1
      var delta = opts.delta(progress)
      opts.step(delta)
      if (progress == 1) {
        clearInterval(id)
      }
    }, opts.delay || 10)
     
  }
  function terugweg(element, delta, duration) {
      var to = -300;
      var bolletje = element.getAttribute('id');
      per = periode(bolletje);
   document.getElementById(bolletje).style.background='transparent';
   animate({
    delay: 0,
    duration: duration || per,
    //1 sec by default
    delta: delta,
    step: function(delta) {
      element.style.left = ((to*delta)+300) + "px"   
    }
   });
      if(bolletje == 'zon'){
       dagen ++;
      }
      bolletje = element;
      document.getElementById('dagen').innerHTML = dagen;
      //setInterval(function (element) {
      setTimeout(function (element) {
    move(bolletje, function(p) {return p})
   }, per);
  }
  function move(element, delta, duration) {
   var to = 300;
   var bolletje = element.getAttribute('id');
      per = periode(bolletje);
      document.getElementById(bolletje).style.background='yellow';
   animate({
    delay: 0,
    duration: duration || per, 
    //1 sec by default
    delta: delta,
    step: function(delta) {
      element.style.left = to*delta + "px"   
    }
   });
      bolletje = element;
   //setInterval(function (element) {
      setTimeout(function (element) {
    terugweg(bolletje, function(p) {return p})
   }, per);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>hr{clear: both;}
  form{display: block;}
  form label{width: 300px; float: left; clear: both;}
  form input{float: right;}
  .aarde{width: 300px; height: 300px; border-radius: 150px; background: url('https://domain.com/img/aarde.png');}
  #zon{width: 40px; height: 40px; background: yellow; border: 2px solid yellow; border-radius: 20px; position: relative; margin-left: -20px; top: 120px;}
  #maan{width: 30px; height: 30px; background: yellow; border: 2px solid yellow; border-radius: 16px; position: relative; margin-left: -15px; top: 115px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  
  &lt;div onclick="move(this.children[0], function(p) {return p}), move(this.children[1], function(p) {return p})" class="aarde"&gt;
  &lt;div id="zon"&gt;&lt;/div&gt;
  &lt;div id="maan"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  Dagen: &lt;span id="dagen"&gt;0&lt;/span&gt;
  
  &lt;/form&gt;
  
  
  &lt;form&gt;
  
  &lt;label&gt;&lt;input id="snelheid" type="range" min="10" max="300" value="30" oninput="speed(this)"&gt;Snelheid: &lt;span id="snelheidDisplay"&gt;30&lt;/span&gt;&lt;/label&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>