Node.js + Websocket でCanvas共有

友人のhidekiyさんにNode.jsというこれから流行りそうなおもちゃを紹介してもらったので遊ぼうと思います。
Node.jsはV8 JavaScriptエンジン上でイベント化された入出力を扱うフレームワークです。
Node.jsを用いて簡単な落書き板のようなものをつくりました。Websocketサーバーに接続して、みんなでリアルタイムにCanvasを共有し、書き込むことができます。接続時に、サーバーに落書きデータがある場合はそれをダウンロードしてクライアントのCanvasに書き加えます。
クライアントサイドもサーバーサイドもJavaScriptで書けるって、やっぱり気持ちいいです。

対応ブラウザはSafariとChromeです。
Port:8888 をWebsocketの通信に使用しています。ウイルス対策ソフトのブロッキングやプロキシ環境下においては通信できない可能性がありますのでご注意ください。

ぜひ、落書きしてみてください！
http://etsukata.com/node/cvws.html
↑これです

Sorce codeはサーバーサイド、クライアントサイド共にこちらでご覧いただけます。
http://etsukata.com/node/

サーバーサイド    : cvwsserver.js

クライアントサイド : cvwsclient.js

参考URL：
Node.js
http://nodejs.org/
websocket-server
http://github.com/miksago/node-websocket-server

Ajaxでフラクタルを描画 with Google App Engine

Google App Engineを用いてマンデルブロ集合を描画してみました。
目的はpure JavaScriptで時間のかかる処理をGAEにまかせてしまえば高速に描画できるのではないかと思ったからです。GoogleMapみたいにフラクタル世界をスイスイしたかったのです。

処理内容
1.サーバーサイドで各点の発散を調べ、ループ回数を返します。
2.クライアントサイドでCanvasに色付けします。

問題点
自分の環境だと残念ながらscaleがある程度大きくない限り、ほぼ似たような処理時間になってしまいました。Canvasへのピクセル操作に時間がかかってしまうのです。

JSONのパースに時間がかかるのかと思い、ランレングス圧縮したシリアライズ方式でもやってみましたが、同様の時間がかかてしましました。Canvasのピクセル操作がネックになっているのでどうしようもないんでしょうか...？救いは無いんですか？
ランレングスパック前　http://mandelbrot-fractal.appspot.com/mandelbrot?centerx=0&centery=0&scale=1&pack=0
ランレングスパック後　http://mandelbrot-fractal.appspot.com/mandelbrot?centerx=0&centery=0&scale=1&pack=1

折角AjaxにしたんならGoogle Mapみたいにドラッグや拡大などできるようにするべきですが、ラグが大きいので諦めてしまいました。

ちなみに"Access-Control-Allow-Origin: *"をHTTP Responseに加えてあるので、Same Origin Policyを満たさなくてもどなたでもご自由にお使いいただけます。サーバーサイドはJavaで書きました。

Fractal with Google App Engine
http://mandelbrot-fractal.appspot.com/

追記(2010/11/10)
コメントしてくださったYkitamotoさんの指摘を元に、ピクセル操作を改善したところ、かなり速くなりました！デモまでつくって教えてくださったYkitamotoさん、ありがとうございます！下記の実行時間比較も書き直しました。



実行時間(ms)比較(パラメーター:Center x = -1.1, Center y = 0, Scale = 10）

	GAE	PureJS
Google Chrome7	681	1787
Safari5	753	923
FireFox3.6	732	231

IE8とOpera10.63には未対応です。

Ajax with GAE Demo

Center x :
Center y :
Scale :

Pure JavaScript Demo

Center x :
Center y :
Scale :

参考にさせていただいたページ:
[xhr] XMLHttpRequest Level 2時代のクロスドメインリクエストProxy
http://blog.hidekiy.com/2010/10/xhr-xhr-lv2proxy.html
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin
http://blog.livedoor.jp/dankogai/archives/51502865.html

改ざん検知機能付きストリーム暗号運用モードMULTI-S01のJavaScriptによる実装

MULTI-S01は日立製作所システム開発研究所により開発された改ざん検知機能付きストリーム暗号運用モードです。 MULTI-S01は暗号技術評価プロジェクトCRYPTREC作成の「電子政府推奨暗号リスト」ISO/IEC 18033の標準暗号として採用されています。

MULTI-S01をJavaScriptで実装しました。 このライブラリでMULTI-S01の改ざん検知機能付きストリーム暗号運用モードを利用できます。
しかし、仕様書等にテストデータが記載されていないので、正確さは保証できません。


日立製作所 MULTI-S01のページ
http://www.sdl.hitachi.co.jp/crypto/s01/

Demonstration

このデモではストリーム暗号にMUGIを使用しています。 生成した暗号文が改ざんされていると、それを検知してエラーメッセージを出力します。 暗号文を生成し、すこし内容を変えてみてDecryptボタンを押してみてください。

Key in hex(128-bit):
InitialVector in hex(128-bit):
Redundancy in hex(64-bit):
Plain Text:	『どうだ、やつぱりやまなしだよ、よく熟してゐる、いい匂ひだらう。』『おいしさうだね、お父さん』『待て待て、もう二日ばかり待つとね、こいつは下へ沈んで来る、それからひとりでにおいしいお酒ができるから、さあ、もう帰つて寝よう、おいで』親子の蟹（かに）は三疋自分等の穴に帰つて行きます。波はいよいよ青じろい焔をゆらゆらとあげました、それは又金剛石の粉をはいてゐるやうでした。
Encrypted Text:
Decrypted Text:

Source: multi.js

擬似乱数生成器MUGIのJavaScriptによる実装

MUGIは日立製作所システム開発研究所により開発された疑似乱数生成器です。 MUGIは暗号技術評価プロジェクトCRYPTREC作成の「電子政府推奨暗号リスト」ISO/IEC 18033の標準暗号として採用されています。

MUGIをJavaScriptで実装しました。 このライブラリでMUGIの疑似乱数生成機能を利用できます。
しかし、仕様書に記載されているテストデータでしかテストしていないため、正確さは保証できません。

日立製作所システム開発研究所MUGIのページ
http://www.sdl.hitachi.co.jp/crypto/mugi/

Demonstration

Key in hex(128-bit):
InitialVector in hex(128-bit):
Size of output:
GeneratedRandom in hex:

Source: mugi.js

2012/11/6 追記
chk さんのご指摘により、擬似乱数を16進数で表記する処理のバグ修正を施しました。
chk さん、誠にありがとうございます！