遊び方
- 形を描きます。盤面の空いているところを指でなぞるか、マウスでドラッグすると線が引けます。線は何本でも引けますが、インクの総延長は560pxまでです。線を1本引き始めるたびに26px引かれます。
- 落とします。「落とす」を押すと、描いた形が描いた場所からまっすぐ落ちてきます。位置を選ぶ操作はありません。どこに描くかが、そのまま狙いです。
- 止まるまで待ちます。塔が完全に止まったら、そのときのいちばん高い点が高さになります。次の形が描けるようになります。
- 1つでも台から落ちたら終わりです。台の左右に床はありません。はみ出した欠片は落ち続け、そこでゲームオーバーです。それまでに届いた高さが記録になります。
ペンが丸いことが、このゲームの難しさです
ペン先は半径13pxの円です。どう動かしても、引いた線の太さは直径の26pxを下回れません。ここから2つの制約が出てきます。
1つめ、細い突起が作れません。「先を尖らせて次の欠片に刺す」という発想は使えません。どんなに短く突き出しても、その突起の太さは26pxあります。
2つめ、細い隙間が作れません。2本の線を26pxより近づけて引くと、ペンの丸が重なって間が塗りつぶされます。かぎ形の口を狭くしようとして寄せすぎると、口が消えてただの塊になります。引っかかりが欲しければ、26pxより広く空けて描くしかありません。これがこのゲームのほぼ全部です。
ごまかしは効きません。画面に見えている塗りつぶしと、物理の当たり判定は同じ円の集合だからです。丸ペンの軌跡に沿って7px間隔で半径13pxの円を並べ、その円の集合をそのまま剛体にしています。見た目には隙間があるように描いたつもりでも、円が重なっていれば物理でも塞がっています。逆に、見た目に不格好でも隙間が空いていれば、そこは本当に引っかかります。
小さすぎる形は落とせません
面積が2800平方px未満の形は「落とす」が押せません。だいたい、まっすぐ88px引いた線か、半径30pxの丸ひとつです。弾いている理由は3つあります。
- 軽すぎて積み上がらない。質量は面積から決めています（面積×0.0045）。小さい欠片は軽く、上から載っても跳ね飛ばされるだけで高さになりません。
- 接触が浅くて滑り落ちる。載る面積が小さいほど、摩擦が受け持てる力も小さくなります。積んだそばから落ちます。
- 数だけ増えて重くなる。点を打つだけで1個ずつ増やせると、欠片の数が増えて計算が跳ね上がります。フレームが落ちれば、上手い下手より前に遊べません。
なぜ「面積」で測るのか。外接する四角の大きさで測ると、細い線を長く1本引いただけで通ってしまいます。上の3つの理由はどれも面積に効く話なので、面積で測るのが筋です。面積は、円の集合を2px間隔の格子で塗って数えて求めています。円の面積を足す計算だと、重なった部分を二重に数えてしまうためです。同じ塗り方で重心と慣性モーメントも出しているので、ぐるぐる塗り重ねても重さは増えません（インクは減ります）。
ほかに2つだけ決まりがあります。線が離れていると落とせません。離れた2つは1個の物体にならず、片方だけ落ちたときに「落ちた」と数えるべきかが決まらないからです。1px以上重なっていればつながっているとみなします。そしていま積んである欠片と重なる場所には描けません。めり込んだ状態から始めると押し出す力が暴れて、積み方の腕前と関係のない結果になります。
高さは「止まってから」しか記録しません
塔が動いている間、高さの表示は灰色の未確定になります。記録が更新されるのは、全部の欠片が止まった瞬間だけです。止まったかどうかは、すべての欠片が毎秒6px・毎秒0.12ラジアンを下回った状態が0.55秒続いたかで判定します。
倒れかけの一瞬の高さを採ってしまうと、崩れる直前にたまたま高く伸びた人が勝つゲームになります。それは積み方の勝負ではなく、崩し方の運の勝負です。「立っている塔の高さ」以外を記録にしないのは、このゲームが競技として成立するための条件です。
止まりの判定は塔ごとにまとめて行っています。はじめは欠片1つずつ眠らせる作りにしていたのですが、隣の欠片に起こされてまた眠り直す堂々巡りになり、速さが毎秒0.03pxしかないのに永遠に静止しない状態になりました。止まらなければ記録が出ないので、これは遊びが成立しないということです。欠片は必ず塔として1つにつながっているので、全部が静かになった時にまとめて眠らせています。
中で何が起きているか
物理はライブラリを使わず、このページの中だけで動いています。1/120秒の固定刻みで、速度の拘束（めり込みを止める・摩擦）を16回、位置のずれ直しを4回まわす逐次インパルス法です。乱数は1つも使っていませんので、同じ形を同じ場所に落とせば必ず同じ結果になります。
作るうえでいちばん効いたのは接触点をまとめることでした。丸ペンの形は円の集まりなので、平らな面どうしが触れると当たりが40件も出ます。全部を拘束として解くと解が過剰になり、同じ面の40件が互いを押し合って横向きの余計な力を作ります。実測では、まっすぐ12段積んだだけの塔がひとりでに21px横へ滑って崩れました。剛体が動かないために本当に要るのは面ごとに端の2点だけなので、法線の向きで面を組分けし、組ごとに端の2点と最も深い1点だけを残しています。同じ12段で当たりの数は518件から24件に減り、横滑りは21pxから0.7pxになりました。
もう1つは押し出しでエネルギーを足さないことです。めり込みの深さに比例した速度を足す素直なやり方（Baumgarte安定化）だと、押し出したぶんだけ塔が元気になります。丸ペンの形は輪郭にごく浅い凹凸（深さ0.24px）があるので、そこへエネルギーが入り続けると永遠に小刻みに揺れます。いまは位置のずれ直しを「見かけの速度」で行い、本物の速度には一切足していません。
速度は実機で測っています。24個積んだ塔が動いている間で、物理と描画を合わせて1フレーム0.8ms（上位10%でも1.5ms）。塔が止まって眠っている間は描画だけになり0.4msです。60分の1秒（16.7ms）にはまだ余裕があります。インクの上限560pxは見た目の制限であると同時に、1つの欠片の円が80個を超えないようにするための上限でもあります。ここを倍にすると、当たりを調べる手間も描く円の数も倍になります。
上手くなるための順番
- まず土台を広く作る。台の幅は204pxです。1個目を横長に描いて台いっぱいに寝かせると、2個目以降が置ける面ができます。縦長に描くと、それだけで倒れます。
- 受け皿を作る。皿のようにゆるく凹ませた形は、次の欠片を真ん中へ滑らせてくれます。ただし凹みの内側の幅は26pxより広くないと、ただの塊になります。
- かぎ形は口を広く。引っかけたい相手の太さは最低でも26pxあります。口をそれより広く空けないと、そもそも噛みません。
- 重心を真ん中に。描いた形の重心が塔の中心からずれるほど、載せた瞬間に回ります。左右の重さは、線の長さで感覚的に揃えられます。
- インクを使い切らない。大きい欠片は重く、下の段を押しつぶす向きに効きます。上へ行くほど小さめに描くほうが、結果として高く伸びます。
よくある質問
- お絵かきタワーはどうやって遊びますか？
- 塔の上の空いている場所に、指かマウスで好きな形を描きます。描き終えて「落とす」を押すと、その形が描いた場所からまっすぐ落ちてきて積まれます。台は細く、左右は床の無い奈落です。1つでも台から落ちたらそこで終わりで、それまでに届いた高さが記録になります。
- ペンが丸いと何が難しいのですか？
- ペンの先が半径13pxの円なので、どう動かしても線の太さは直径の26pxを下回れません。細い突起は作れず、2本の線を26pxより近づけると間が塗りつぶされて隙間が消えます。つまり引っかかりを作りたければ、26pxより広く空けて描くしかありません。見た目だけそれらしく描いても、描いた線の集合がそのまま当たり判定になるので、隙間が塗りつぶされていれば物理でも塗りつぶされています。
- 小さい形が落とせないのはなぜですか？
- 面積が2800平方px未満の形は落とせません。質量は面積から決めているので小さい欠片は軽すぎて弾かれて飛ぶだけであること、接触が浅くてすぐ滑り落ちること、数だけ増えて計算が重くなることの3つが理由です。外接する四角の大きさで測ると細い線を長く1本引いただけで通ってしまうので、面積で測っています。
- 高さはいつ記録されますか？
- 塔が完全に止まった瞬間だけです。全部の欠片が毎秒6px・毎秒0.12ラジアンを下回った状態が0.55秒続いたら止まったとみなし、そのときのいちばん高い点を記録します。倒れかけの一瞬の高さで記録が出ると、崩れる直前に運よく伸びた人が勝つゲームになり、競技として成立しません。
- 描いた形と落ちてくる形は同じですか？
- 同じです。丸ペンの軌跡に沿って7px間隔で円を並べ、その円の集合をそのまま剛体の当たり判定に使っています。画面の塗りつぶしも同じ円の集合です。面積・重心・慣性モーメントは、その円の集合を2pxの格子で塗って数えて求めています。
- 線が離れていると落とせないのはなぜですか？
- 離れた2つは1個の物体になりません。1個として落とすと、片方だけが台から落ちたときに落ちたと数えるべきかが決まらず、記録の意味が壊れます。線どうしが1px以上重なっていればひとつながりと判定するので、交差させるか端を触れさせてください。
- 色に決まりはありますか？
- あります。このサイトのゲームは共通で、味方・自分・良いものを青系、危険・落とせないものを赤系にしています。お絵かきタワーでは、積んだ欠片といま描いている形が青、面積が足りない形と奈落の縁が赤、台と高さの目盛りが中立の金色です。
- データは保存・送信されますか？
- 最高記録だけをお使いのブラウザのlocalStorageに保存します。物理計算はすべてブラウザ内で完結し、外部サーバーへの送信は一切行いません。