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>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です