回したいと思っている方へ！（結局俺が書くけどね！）

計算部分と、表示部分をわけること。
http://oshiete.goo.ne.jp/qa/6078632.html

OKWave(教えてgoo)の投稿に、画像ファイルをテキストにしたのだが、承認待ちにならなかった！
今後は意味無く使えそうだ！
しかしなぁ〜相変わらず投稿文字数が少ないのが嫌いだ！

<!DOCTYPE html>
<title></title>

<style type="text/css">
#hoge {
  width : 800px;
  height : 300px;
}
</style>

<body>
  <div id="hoge">
    <img id="ball1" alt="ball1" src="data:image/gif;base64,
      R0lGODlhGQAZAMQAAPeqO/abOPWQMvWHL/aobPR+KfN1KPSKT/JkG/NuKfNmJf3t5vFc
      I+9UIutcLuhhPO1IIOZoS+hUN/vEuuoyGPzVz+1fUO9uXeVAMvN6b/WIf+UWCPeUj/qz
      sfegnv///yH5BAEAAB8ALAAAAAAZABkAAAX/4CeO4lKdaLWQLFtN3STP8FS15NJ5Xuf/
      s11n1VpwNBxe78f0HImjRSaD5CSVTixnehtlLFOqdWzVmI9fy8iDsVguYap5Hs9cNp7P
      AtN2X/51U39/bhQYHx0bGBISEY6DkBEXbg8WEhQbExmKjBIPD46hop+dmBoSGxQQnZ+t
      rqSMGJgWEKoQDQ0OuroPDp+7Dg0QtRsPwsO4ucC6DLrJwxQUDwm3t8kM2Nnaz8MHBwja
      4eLhuAQE4NgK6uvs7eoICB4VBusJCQb4+fr39goJBQsWHDBgz0CBAQgTKhxQoEA+AiIm
      ODQ4QICAABgzYhSAsGGBLh8INKyIEYDJkwA2PTIsADFKgIMDSqI8GYAjSygiKrwkGWCm
      ygIAcEYRedBiRosrCQhl0WGgQY/5DkzAUWQCgQMDEgw4QGAqjhAAOw==">

    <img id="ball2" alt="ball2" src="data:image/gif;base64,
      R0lGODlhGQAZAMQAADv38jj24zL12i/10mz23Sn0zCjzw0/0yRvytinzuyXztOb99iPx
      qyLvoi7rpDzooyDtl0vmozfomLr73Rjqg8/85lDtm13vpjLlhW/zrH/1tQjlao/3vLH6
      z573wv///yH5BAEAAB8ALAAAAAAZABkAAAX/4CeO4lKdaLWQLFtN3STP8FS15NJ5Xuf/
      s11n1VpwNBxe78f0HImjRSaD5CSVTixnehtlLFOqdWzVmI9fy8iDsVguYap5Hs9cNp7P
      AtN2X/51U39/bhQYHx0bGBISEY6DkBEXbg8WEhQbExmKjBIPD46hop+dmBoSGxQQnZ+t
      rqSMGJgWEKoQDQ0OuroPDp+7Dg0QtRsPwsO4ucC6DLrJwxQUDwm3t8kM2Nnaz8MHBwja
      4eLhuAQE4NgK6uvs7eoICB4VBusJCQb4+fr39goJBQsWHDBgz0CBAQgTKhxQoEA+AiIm
      ODQ4QICAABgzYhSAsGGBLh8INKyIEYDJkwA2PTIsADFKgIMDSqI8GYAjSygiKrwkGWCm
      ygIAcEYRedBiRosrCQhl0WGgQY/5DkzAUWQCgQMDEgw4QGAqjhAAOw==">

    <img id="ball3" alt="ball3" src="data:image/gif;base64,
      R0lGODlhGQAZAMQAAFU790U49jgy9S8x9Wxu9ikv9Cg1809e9Bsz8ik/8yVB8+bp/SNG
      8SJM7y5V6zxk6CBT7Ut05jdp6LrN+xhb6s/d/FCH7V2N7zJ05W+f83+r9Qhd5Y+497HQ
      +p7E9////yH5BAEAAB8ALAAAAAAZABkAAAX/4CeO4lKdaLWQLFtN3STP8FS15NJ5Xuf/
      s11n1VpwNBxe78f0HImjRSaD5CSVTixnehtlLFOqdWzVmI9fy8iDsVguYap5Hs9cNp7P
      AtN2X/51U39/bhQYHx0bGBISEY6DkBEXbg8WEhQbExmKjBIPD46hop+dmBoSGxQQnZ+t
      rqSMGJgWEKoQDQ0OuroPDp+7Dg0QtRsPwsO4ucC6DLrJwxQUDwm3t8kM2Nnaz8MHBwja
      4eLhuAQE4NgK6uvs7eoICB4VBusJCQb4+fr39goJBQsWHDBgz0CBAQgTKhxQoEA+AiIm
      ODQ4QICAABgzYhSAsGGBLh8INKyIEYDJkwA2PTIsADFKgIMDSqI8GYAjSygiKrwkGWCm
      ygIAcEYRedBiRosrCQhl0WGgQY/5DkzAUWQCgQMDEgw4QGAqjhAAOw==">
  </div>

<script>
var rotationGenerator = function ( r, angle, step) {
  angle = angle || 0;
  step  = step || 5;

  return function ( ) {
    var tmp = angle * Math.PI / 180;
    angle += step;
    return [Math.sin (tmp) * r, 0, Math.cos (tmp) * r];
  };
};

//__ 

var r = 300;

var r2 = function ( ) {
  var p = rotationGenerator (r, 30, -1);
  var c = rotationGenerator (50, 0, -5)
  return function ( ) {
    var pp = p();
    var cp = c();
    return [pp[0] + cp[0], pp[1] + cp[1], pp[2] + cp[2]];
  }
};

//__ 
var parts = [
  {
    element  : document.getElementById('ball1'),
    position : rotationGenerator (200, 0, -1),
    size     : 30
  },
  {
    element  : document.getElementById('ball2'),
    position : rotationGenerator (r, 30, -1),
    size     : 80
  },
  { 
    element  : document.getElementById('ball3'),
    position : r2(),
    size     : 10
  }
];

//__

var view = function ( viewElement, distance, scale, parts) {
  var i = 0, p;
  var style = viewElement.style;
  var cx = viewElement.offsetWidth  / 2;
  var cy = viewElement.offsetHeight / 2;

  var conversion = function (parts) {
    var style = parts.element.style;
    var p = parts.position();
    var pz = (p[2] + distance) / scale;
    var py = p[1] / pz;
    var px = p[0] / pz;
    var ps = parts.size / pz |0;
    var ps2 = ps / 2;
    
    style.top = ((cy - py - ps2) |0) + 'px';
    style.left = ((cx + px - ps2) |0) + 'px';
    style.width = ps + 'px';
    style.height = ps+ 'px';
    style.zIndex = - p[2] |0;
  };

  style.position = 'relative';
  style.overflow = 'hidden';

  while (p = parts[i++])
    p.element.style.position = 'absolute',
    conversion (p);
  
  return conversion;
};

//__

var loop = function ( view, parts, interval ) {
  setInterval (
    function () {
      for (var i = 0, p; p = parts[i++]; view (p)); },
    interval || 50);
};

//__

var hoge = view (document.getElementById('hoge'), 350, 200, parts);
loop (hoge, parts);

</script>

そろそろCanvas使えよ＞俺

計算部分と、表示部分をわけること。http://oshiete.goo.ne.jp/qa/6078632.html

計算部分と、表示部分をわけること。
http://oshiete.goo.ne.jp/qa/6078632.html