title: Why is my code to rotate a needle image moving the position of the needle under Brownian motion? Why do images at origin show up scattered?
body: <p>At <a href="http://ancient-clock.stornge.com" rel="nofollow">http://ancient-clock.stornge.com</a>, I have what is intended to be pseudo-Brownian motion on the angle of a dial's needle, with each iteration moving the clock one degree clockwise, one degree counterclockwise, or not move this instant. It should be doing a fractal "staggering drunk."</p>
  
  <p>Note that if you load the page, the "staggering drunk"/"random walk" image starts offscreen, but usually staggers on screen.</p>
  
  <p>That's issue 1. Issue 2 is that the parts of the diagram are all set at (0, 0) and I call ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0); to get a fresh start, but the hands are still showing up scattered.</p>
  
  <p>The code is:</p>
  
  <pre><code>        var ANCIENT_CLOCK = {};
          ANCIENT_CLOCK.dial_angle = 45;
          ANCIENT_CLOCK.draw_clock = function()
              {
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              ANCIENT_CLOCK.context.translate(100, 100);
              var height_ratio = ANCIENT_CLOCK.clock_face.height /
                jQuery(window).height();
              var width_ratio = ANCIENT_CLOCK.clock_face.width /
                jQuery(window).width();
              var ratio = null;
              if (height_ratio &lt; width_ratio)
                  {
                  ratio = width_ratio;
                  }
              else
                  {
                  ratio = height_ratio;
                  }
              ratio = Math.max(1, 1 / ratio);
              ANCIENT_CLOCK.context.scale(ratio, ratio);
              ANCIENT_CLOCK.rendered_time = new Date();
              ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.clock_face, 0, 0);
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              ANCIENT_CLOCK.context.translate(0, 0);
              ANCIENT_CLOCK.hour_angle = ((ANCIENT_CLOCK.rendered_time
                .getTime() % (86400 * 1000 / 24)) / (( 86400 * 1000 / 24) * Math.PI));
  
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              ANCIENT_CLOCK.context.translate(100, 100);
              ANCIENT_CLOCK.context.rotate(2 * Math.PI * ANCIENT_CLOCK.hour_angle);
              ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.hour_hand, 0, 0);
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              ANCIENT_CLOCK.context.translate(0, 0);
              ANCIENT_CLOCK.minute_angle = ((ANCIENT_CLOCK.rendered_time
                .getTime() % (86400 * 1000 * 60)) /
                (86400 * 1000 * 60));
  
              ANCIENT_CLOCK.context.rotate(2 * Math.PI *
                ANCIENT_CLOCK.minute_angle);
              ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.minute_hand, 0, 0);
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              ANCIENT_CLOCK.context.translate(0, 0);
              ANCIENT_CLOCK.second_angle = (ANCIENT_CLOCK.rendered_time
                .getTime() % 86400 * 1000 * 3600) / (86400 * 1000 * 3600);
              ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.second_hand, 1000, 300);
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              if (ANCIENT_CLOCK.dial_angle &lt; 1)
                  {
                  if (Math.random() &lt; .5)
                      {
                      ANCIENT_CLOCK.dial_angle += 1;
                      }
                  }
              else if (ANCIENT_CLOCK.dial_angle &gt; 90)
                  {
                  if (Math.random() &gt; .5)
                      {
                      ANCIENT_CLOCK.dial_angle -= 1;
                      }
                  }
              else
                  {
                  if (Math.random() &lt; 1 / 3)
                      {
                      ANCIENT_CLOCK.dial_angle += 1;
                      }
                  else if (Math.random() &lt; .5)
                      {
                      ANCIENT_CLOCK.dial_angle -= 1;
                      }
                  }
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              ANCIENT_CLOCK.context.translate(0, 0);
              ANCIENT_CLOCK.context.rotate((ANCIENT_CLOCK.dial_angle / 90) *
                (Math.PI / 4) + Math.PI / 8);
              ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.dial_hand, 100,
                100);
              ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
              }
  </code></pre>