Mr. Baby Paintと偶然発見された新しいセル・オートマトン

12月 — Mr. Baby Paintと偶然発見された新しいセル・オートマトンとピクセルを太らせるHeikki Lotvonen | 2026年2月4日に執筆 12月の大半を、幼児向けの非常にシンプルな共同描画アプリ「Mr. Baby Paint」の構築に費やしました。また、偶然にも洪水充填（flood-fill）ベースのセル・オートマトンを発見し、さらにビットマップフォント用のピクセル太らせアルゴリズムを開発しました。 幼児向けソフトウェアのデザイン: Mr. Baby Paint 12月には新しいエディターも作成・リリースすることができました！それは「Mr. Baby Paint」と呼ばれています [リンク: https://glyphdrawingclub.itch.io/mr-baby-paint]。私の3歳の子供は、私がするすべてのこと、コンピューター関連のことにも参加したがります。彼はバネ仕掛けのキーを押し、マウスを動かし、クリック音を鳴らし、ホイールを回すのを楽しんでいます。しかし、そのようなスキルセットでは、コンピューターでできることはまだあまりありません。私が考えられたのは2つのことだけでした：テキストエディターでの実験的なキーボード叩きつけ詩、または描画アプリでの「アクションペイント」です。WordpadとMS Paintの両方を試しました。できるだけシンプルだと思いました。彼は美しいランダムな落書きを描き、興味深いが不明瞭な文字の詩を生成することに成功しましたが、全体的な経験は楽しいというよりはフラストレーションがたまるものでした。彼のマウスの動きやクリックは無作為で予測不可能であり、キー入力もランダムだったため、彼がランダムなメニュー、ツールバー、またはタスクバー項目を「誤って」クリックするたびに、タイピングまたは描画モードに戻すために絶えず介入する必要がありました。また、色、フォント、その他のオプションを変更することも、一時的にマウスを彼から取り上げることを意味しました。彼はこれらの割り込みを迷惑に思いました。なぜなら、彼はただ遊び続けたいだけだったからです。（しかし、何らかの理由で、コンピューターがオフのときは、それらで遊ぶことに興味を示しません。）したがって、WordpadやMS Paintではうまくいかず、私たちのニーズと彼のスキルセットに十分なほどシンプルなものは他に見つかりませんでした。そのため、自分で作る必要がありました。そして、他のどのようなソフトウェアプロジェクトにも真剣に取り組むのと同じように、このタスクにも真剣に取り組み、幼児（とその介護者との共同作業）にとって良いソフトウェア体験をどのようにデザインするかを本当に考えたいと思いました。その結果が、「Mr. Baby Paint」という非常にシンプルな描画アプリです。最初は、アプリがシンプルなので、作るのも簡単だと思っていましたが、予想以上に興味深い挑戦となり、偶然にも洪水充填ベースのセル・オートマトンを発見するという驚くべき成果をもたらしました。 要件 この描画アプリで私が構想した最小実行可能製品は次のとおりです：メニューやツールバーのないフルスクリーンの空白キャンバスで、マウスをクリック＆ドラッグすると画面に直接描画されます。私の子供は私の膝の上に座ってマウスを操作し、私は左手でキーボードショートカットを処理します — CMD+Sで描画を保存し、CMD+Eでキャンバスをクリアします。画面全体が描画エリアであり、彼がキーボードを叩きつけても何も体験を壊しません。しかし、私はアプリをそれよりも少し面白く、楽しくしたいとも思いました。そして、本当に描画と創造的な遊びを奨励したいと思いました。意図的であってもそうでなくても、すべての行動は報われるべきです。したがって、すべての行動は、マークを作成するか、効果音、視覚効果、またはそれらの組み合わせを生成します。「しくじる」方法はありません。左クリックで描画、スクロールで砂を落とす、右クリックでペイントバケツです。速く描画するほど、より多くのペイントの飛沫が発生します。 私が抱えていた問題の1つは、マウスを非常に速く動かすと、コンピューターは実際には動きを滑らかな連続曲線としてではなく、数ミリ秒ごとにキャプチャされる空間の離散点として登録することでした。これは通常のコンピューター使用には問題ありませんが、連続線を描画したい描画アプリには使用できません。ほとんどの描画アプリは、各点を線で結ぶことでこれを解決しますが、これは中程度の速さのマウスの動きにはうまく機能します。しかし、幼児のマウスの動きは非常に速くなる可能性があり、キャプチャされたマウスの位置の間隔は数十または数百ピクセル離れている可能性があり、滑らかな曲線であるはずのものが非常に角張って見えます。私は、Catmull-Romスプラインを使用して点を結ぶことでこれを解決しました。これにより、点間に滑らかで連続した曲線が作成されます。その後、1ピクセルごとにブラシテクスチャを曲線に沿ってスタンプするだけです。このアプローチは、より大きなブラシでは遅延が発生したため、それらのブラシのスタンプ距離を制限する必要がありました。 UI 正確なマウス制御を要求する代わりに、私は予測不可能なマウスの動きを利用しました：画面の端でカーソルを動かすと設定が変更されます：画面の左端は16個のセグメントに分割されており、ブラシのサイズと選択されているフォントを制御します。画面の下端も16個のセグメントに分割されており、16色の中から1つを選択します。上端は64に分割されており、次の文字のいずれかを選択します：「A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ! ?」。フォントの1つは、アイコンと図形のセットでもあります。 共同ペイント 実際には、幼児が自分で使うことはあまり想定されていませんが、アイデアは（もちろん）幼児と一緒にこのアクティビティを行うことです — したがって、親（または他の介護者）と幼児のための共同ペイントのようなものです。より複雑な機能のすべては、親がキーボードショートカットでアクティブ化することを意図しており、幼児は不必要な割り込みなしに、描画という主なことに集中できます。たとえば、子供が左マウスボタンを押し続けるのは難しい場合があるため、親はAlt（MacではOption）キーを押したまま描画機能をトリガーでき、子供はマウスを動かすだけで済みます。その他のキーボードショートカットには以下が含まれます：左クリックまたはOption/Altキーを押し続けることで描画、右クリックまたはCmd/Ctrl + Xでフィル、マウススクロールまたはEnterキーを押し続けることで砂を注ぐ、スペースバーでフィルと砂の落下を一時停止、Cmd/Ctrl + Sで描画を保存、Cmd/Ctrl + Eで描画を消去、Cmd/Ctrl + Zで元に戻す、Cmd/Ctrl + Shift + Zでやり直し、Cmd/Ctrl + Cでストローク（描画線）を閉じる、Cmd/Ctrl + Bで円ブラシを選択、Cmd/Ctrl + Rで四角ブラシを選択、Alt + 数字キーおよびCmd/Ctrl + 数字キーで色を変更、ESCでメニューを開閉。 フィルツールとセル・オートマトンの発見 ほとんどの描画アプリではフィルツールは即時ですが、私はMario Paint [1]に触発されました。そこでは、フィルがリアルタイムでゆっくりと進行するのを見ることができます。それを見るのは満足感があります。Mario Paintでは、フィルはカーソル位置から始まり、上下方向に線ごとに充填されます。「Mr. Baby Paint」では、洪水充填は左右にも成長します。Mario Paintでは、別のフィルを開始する前にフィルが完了するのを待つ必要があります。しかし、私はそれが私のアプリでは直感的で楽しくないと感じました。私は、描画をブロックするアクションを望んでいませんでした。複数のフィルと描画が同時に発生することを望んでいました。しかし、その機能を実装したとき、私は偶然にも洪水充填ベースのセル・オートマトンを発見しました。そして「発見した」とは、文字通りそういうことです：パターンが現れ始めるまで、フィルをテストしまくっていたのです！方法は次のとおりです：別の成長中のフィルの内側の端の近くに新しいフィルを開始しました。「洪水充填」の「成長予算」はすべての洪水充填で共有され、1フレームあたり1000ピクセルまで成長が制限されているため、新しい洪水充填はより小さいため、古いものよりも速く成長します。そのため、より小さなフィルは、まだ成長中の古いフィルの端と衝突し始めました。そして、最初のフィルと同じ色の別のフィルを配置すると、それらはすべて互いに崩壊し始め、波打ってシフトする非常に有機的な見た目のパターンを形成しました。それは半安定です：安定した振動パターンに落ち着く前に数千世代続くこともありますし、時には1つのフィルが「勝ち」、他が消えることもあります。それは楽しいグリッチなので、そのままにしておきました。（技術的な補足：私はすべてCPUで1つのスレッドで行っています。そのため、計算はシーケンシャルであり、洪水充填オートマトンが機能するために必要です。GPUバージョンをコンピュートシェーダーで試しましたが、