javascript - ブラウン運動の下で針の位置を移動する針の画像を回転させる私のコードはなぜですか? 元の画像が散らばって表示されるのはなぜですか?

Question

http://ancient-clock.stornge.comでは、文字盤の針の角度での疑似ブラウン運動を意図したものを持っています。反復ごとに、時計を時計回りに 1 度、反時計回りに 1 度動かすか、これを動かさないでください。インスタント。フラクタルな「驚異的な酔っ払い」をしているはずです。

ページを読み込むと、「よろめく酔っ払い」/「ランダム ウォーク」の画像が画面外で始まりますが、通常は画面上でよろめきます。

問題 1 です。問題 2 は、ダイアグラムのすべての部分が (0, 0) に設定されており、ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0); を呼び出すことです。新たなスタートを切りましたが、手はまだ散らばっています。

コードは次のとおりです。

        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 < 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 < 1)
                {
                if (Math.random() < .5)
                    {
                    ANCIENT_CLOCK.dial_angle += 1;
                    }
                }
            else if (ANCIENT_CLOCK.dial_angle > 90)
                {
                if (Math.random() > .5)
                    {
                    ANCIENT_CLOCK.dial_angle -= 1;
                    }
                }
            else
                {
                if (Math.random() < 1 / 3)
                    {
                    ANCIENT_CLOCK.dial_angle += 1;
                    }
                else if (Math.random() < .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);
            }