Morphic.jpとは何か?
Morphic.jsはJens MönigによってSqueakのMorphicをJavaScriptへ移植したライブラリだ。
Chirp Blog » Blog Archive » morphic.js – Morphic for JavaScript
特徴
ドキュメントmorphic.txtによるとmorphic.jsには次のような特徴がある。
- ブラウザの1スレッド上で独自のステップメカニズム
- 描画オブジェクトを部分的に再描画
- ツリー構造
- Canvasエレメント毎に一つのワールド
- ワールド毎にハンドは1つ(でも、マルチタッチには対応)
- ワールド毎にテキスト入力フォーカスは1つ
オブジェクトの回転は未だできない。回転などは別のライブラリに分ける予定だそうだ。
現状でLOGOのようなタートルが入っていて幾何学を描くことができる。
Mönigはmorphic.jsを元にBuild Your Own Blocks (BYOB) 4.0(Snaps!)を作っている。
クラス階層
クラスは基本的なものだけ。といっても、スクロールできるリストはあって、インスペクタは作られている。
クラス階層はこのようになっている(‘*’はデモ用クラス)。
Color Node Morph BlinkerMorph CursorMorph BouncerMorph* BoxMorph InspectorMorph MenuMorph MouseSensorMorph* SpeechBubbleMorph CircleBoxMorph SliderButtonMorph SliderMorph ColorPaletteMorph GrayPaletteMorph ColorPickerMorph FrameMorph ScrollFrameMorph ListMorph StringFieldMorph WorldMorph HandleMorph HandMorph PenMorph ShadowMorph StringMorph TextMorph TriggerMorph MenuItemMorph Point Rectangle
仕組み
DOMのCanvasエレメント1つをSqueakのWorldMorphとして、その上にすべてのMorphを独自に描画する。各Morphは自分のオフスクリーンcanvas要素を持っていて、自分の再描画が必要なときはchanged()を送りWorldMorphに再描画すべきダメージ範囲として登録する。WorldMorphはdoOneCycle()のタイミングでダメージ範囲を再描画する。パフォーマンス向上のためにtrackChangesがfalseの間はそのmorphのダメージ範囲をWorldMorphへ登録しないようにできる。
morph毎のプロパティfpsに毎秒のstep受付回数を指定し、WorldMorphは各morphのfpsに従ってそのmorphのstepを実行する。
HandMorphがWorldMorph上に一つあって、マウスやキーボードのイベントを取り扱う。
設置
ウェブページへの貼り付けは簡単だ。表示場所のCanvas要素を与えて生成したWorldMorphへdoOneCycle()を送り続ければ良い。
<!DOCTYPE html>
<html>
<head>
<title>Morphic!</title>
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript">
var world;
window.onload = function () {
world = new WorldMorph(
document.getElementById('world'));
setInterval(loop, 50);
};
function loop() {
world.doOneCycle();
}
</script>
</head>
<body>
<canvas id="world" tabindex="1" width="800" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
最近のコメント