JavaScript でくるくる CAPTCHA を実装してみる

あっきーパパが Google の新しい CATCHA の論文を紹介してたので

グルグル回すグーグルの新CAPTCHA特許 | 秋元@サイボウズラボ・プログラマー・ブログ

脊髄反射で作ってみた

（UI の部分だけですが；；；）
http://amachang.sakura.ne.jp/misc/kurukuru/（IE では動きません）
jQuery UI と canvas を使ってます。初めて使いましたが、いいですね、 jQuery UI。

（追記）せっかくなのでソースコードの解説

// 初期値の設定
// prev_value は最後に設定された値の保持用 last_value のほうが良かったかも
var start_value = Math.PI, prev_value = start_value;

// 回転用イメージオブジェクト
var img = new Image;

// img.src が設定されてイメージ読み込まれたら、 onload が呼び出される
img.onload = function() {

    // canvas のコンテキスト（お絵描きオブジェクト）を取得
    var ctx = $('#canvas').get(0).getContext('2d');

    // 原点を座標 (200, 200) に移動
    ctx.translate(200, 200);

    // 初期値を表示（とくにここでやる必要もないな）
    debug(start_value);

    // img を全画面ではり付け（キャンバスのサイズが 400x400 なので）
    ctx.drawImage(img, -200, -200, 400, 400);

    // id="slider" の要素をスライダーにする
    $('#slider').slider({

        // スライダーのステップ幅
        step: (Math.PI * 2 / 100),

        // スライダーの左端の値
        min: 0,

        // スライダーの右端の値
        max: Math.PI * 2,

        // スライダーのカーソルの位置
        value: start_value,

        // スライドした時に呼び出される関数
        slide: function(e, u) {

            // 値の表示
            debug(u.value);

            // キャンバスのクリア
            ctx.clearRect(-200, -200, 400, 400);

            // 座標を回転
            ctx.rotate(u.value - prev_value);

            // img 全前画面ではり付け
            ctx.drawImage(img, -200, -200, 400, 400);

            // 値の保存
            prev_value = u.value;
        }
    });
};

// img.src の設定。画像が読み込まれると onload が発生
img.src = 'fx.png';

// デバッグ用に値表示
function debug(value) { $('#value').text(value + '[rad]'); }