✎ doodle-drop · chalkboard
matter.js + Canvas で動く お絵描き物理サンドボックス。 黒板にチョークで自由曲線を描くと、 ストロークが凸包 polygon の剛体になって即座に重力で落ち、 既存ストロークと衝突する。 7 色チョーク + 太さ調整 + 重力切替 + 床なし + シェイク + 黒板消し。 描いた絵は サーバーに送信されません。
[ ./how_it_works ]
step / 01
7 色チョーク (白 / 桃 / 黄 / 青 / 緑 / 橙 / 紫) と太さ (2〜20px) を選んで準備。 ホワイトボードマーカーのように使う。
step / 02
マウスやタッチで自由曲線・図形を描く。 描き終わるとそのストロークの凸包が matter.js 剛体に変換されて、 即座に重力で落ちる。 線分が短すぎる時は小円で代替。
step / 03
新しいストロークは既に落ちた絵と衝突する。 重力を月 / 無重力 / 反転 に切り替え、 シェイクで全部を揺らし、 黒板消しでリセット。 描けば描くほど積み上がる物理タワー。
[ ./faq ]
ペンが画面から離れたタイミングで、 そのストロークの座標点列を 凸包 (convex hull、 Andrew's monotone chain アルゴリズム) で囲み、 matter.js の Bodies.fromVertices で凸 polygon の剛体に変換しています。 凹みのある図形 (☆型 や C 型 など) も外枠の凸包になる仕様。 v2 で複数 body chain による忠実な凹みサポート予定。
総移動距離 12px 未満 (短すぎる線 + 単発クリック) のときは中心座標で小円 (Body.circle) として落とします。 タップで点を落としていく遊びも可。
JavaScript の 2D 物理エンジン (~25KB gzip、 MIT)。 ai-lab.org では PilePark (物理サンドボックス) と DoodleDrop で利用。 剛体力学 + 衝突 + 重力 + 制約をブラウザ内でリアルタイム計算します。 サーバー往復は不要。
PilePark は固定形状 (円 / 矩形 / 三角 / 五角形) を クリックで落とすシミュレーター、 DoodleDrop は 「自由に描いた線」 が物体になるサンドボックス。 同じ matter.js を使うが、 入力体験 (図形クリック vs 自由ドロー) と用途 (物理デモ vs 落書き表現) が完全別。
底の壁を除去して、 描いた絵が下に落ちきって画面外に消える状態。 「重力反転」 と組み合わせると、 描いた絵が空に飛んでいく挙動になります。 普通に積み上げたい時は床ありで。
v1 では PNG 保存 / 録画は未実装です。 IMPROVE 候補: Canvas を `toBlob` で PNG ダウンロード、 録画は MediaRecorder で WebM 出力。 共有 URL でリプレイ可能にする (= 各ストロークの色 / 座標を シリアライズ) のも今後検討。
ai-lab.org の シミュレーター thesis 2本目です (1本目は PilePark = 物理サンドボックス)。 matter.js を共有スタックとして 2 つの異なる体験で再利用。 シミュレーター系の続編で 面接シミュ / 物理パズル / 流体 / ソフトボディ等のシリーズ化候補があります。