title: How to get a picture randomly move and turn towards the changing direction around a page? (using jQuery & css)
body: <p>I made a butterfly picture randomly move around a page, simulate a real butterfly.</p>
  
  <pre><code>$(document).ready(function(){
      animateIMG();
  });
  
  function makeNewPosition(){
      // Get viewport dimensions (remove the dimension of the div)
      var h = $(window).height() - 50;
      var w = $(window).width() - 50;
      var nh = Math.floor(Math.random() * h);
      var nw = Math.floor(Math.random() * w);
      return [nh,nw];
  }
  
  function animateIMG(){
      var newq = makeNewPosition();
      var oldq = $('img').offset();
      var speed = calcSpeed([oldq.top, oldq.left], newq);
      $('img').animate({ top: newq[0], left: newq[1] }, speed, function(){
        animateIMG();        
      });
  };
  
  function calcSpeed(prev, next) {
      var x = Math.abs(prev[1] - next[1]);
      var y = Math.abs(prev[0] - next[0]);
      var greatest = x &gt; y ? x : y;
      var speedModifier = 0.1;// control the speed here 
      var speed = Math.ceil(greatest/speedModifier);
      return speed;
  }
  </code></pre>
  
  <p>but I don't know how to change direction(rotation angle) to where it move towards.maybe I should calculate the angle between the old and new point. then use <a href="https://code.google.com/p/jqueryrotate/wiki/Examples" rel="nofollow noreferrer">this plugin</a>  to rotate angle? </p>
  
  <p>Could anyone help to modify the code?</p>
  
  <p>Thanks! 
  <img src="https://i.stack.imgur.com/S3X2B.jpg" alt="enter image description here"></p>