2026/07/03 12:13
Mr. Baby Paint の偶然の発見による新しいセルオートマトン
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Heikki Lotvonen は、乳幼児とその保護者が遮断なく画面を共有できる協働描画アプリケーション「Mr. Baby Paint」を開発しリリースした。itch.io を介して Mac、Windows、Linux で 4.99 ドルで入手可能な同アプリは、現在では限られた販売（約 30 コピー）を見せているが、その特化されたメカニズムによって独自のニッチを確立している。インターフェースはメニューなしのfullscreen 空キャンバスを採用しており、子供が自由に描画する間に保護者が保存や元に戻すなど必須操作をキーボードショートカットで管理できるようになっている。描画入力は許容度が高い：不規則なマウス移動は Catmull-Rom スプラインを用いて滑らかに処理され、エッジベースの UI セグメントにより、ブラシサイズ、色、フォントの変更は正確な操作なしで行える。本ソフトウェアは CPU を駆使したフラッドフィル実験に基づいたセルULAR オートマトンを通じて瞬時描画ではなく有機的な成長をシミュレートする。さらに、実験的なピクセル・ファッテニングアルゴリズムは細いストロークを太く楽しい文字に転換し、特に手法 #4 は最終的な美学を得るために Aseprite で手動で編集されたものである。本アプリは Rob Hagemans 氏のコレクションからクラシックなフォントを利用しており、描画速度に基づいて単純なデジタル scribbles（ささくれ）を自然パターンに変えるよう設計されている。
本文
乳幼児向け描画アプリ「Mr. Baby Paint」の開発体験と技術的発見
Heikki Lotvonen が 2026 年 4 月 2 日に行う、3 歳の子供を相手にしたソフトウェア開発の物語。極めてシンプルな共同作業用ツールから、予期せぬフラッドフィル（溢れ塗り）セルオートマトンやビットマップフォント増量アルゴリズムの開発へと発展しました。
🎨 toddler 向けソフトウェアのデザイン：Mr. Baby Paint
背景と課題
- 著者の 3 歳の子供は、キー操作、マウス操作、クリック音などに喜びを感じますが、通常のコンピューターでの利用は困難でした。
- WordpadやMS Paintなどの既存ツールでは以下の問題が発生しました：
- メニューバーやツールバーへの誤クリックを頻繁に発生させ、親が常時介在する必要があるため、子供はイライラしていました。
- 「ただ遊ぶ」ことと「タイピングモード/描画モードの切り替え」が両立できず、体験が中断されていました。
- 既存のツールでは子供たちのスキルセットや遊び心に対応できないことが分かりました。
MVP（最小機能要件）
- メニューバー・ツールバーのないフルスクリーン空キャンバス
- 直感的な描画: マウスドラッグで直接画面に描画。
- 共有可能な役割: 子供はマウス操作、親はキーボードショートカット（保存
、消去/CMD+S
など）を担当。/CMD+E - 中断ゼロの設計: どんなに激しくてもキーボードを壊すような操作でも、描画体験が止まらないこと。
楽しさの原則：「失敗しない」インタラクション
- あらゆる行為には必ず**報酬（マーク、音、視覚効果）**がつくことを徹底しました。
- 「失敗する」方法は存在せず、子供は常に何らかのフィードバックを得られます。
- 操作方法:
- 左クリック：描画
- スクロール：砂を落とす（粒状エフェクト）
- 右クリック：ペイントバケツを使用（スプラッター生成は速度に依存）
🖱️ UI 設計：不規則な動作の活用
子供たちの予測不可能なマウス操作ではなく、それを特徴として利用しました。画面の縁を制御領域とし、複雑なメニューを用意しませんでした。
| 画面位置 | セグメント数 | 機能 |
|---|---|---|
| 左側 | 16 セグメント | ブラシサイズ選択、フォント変更 |
| 下側 | 16 セグメント | 16 色のカラー選択 |
| 上側 | 64 セグメント | アルファベット、数字、記号フォントの切り替え（図形フォントも搭載） |
| 右側 | 2 選択肢 | 丸ブラシ / 角ばった正方形ブラシ の切換え |
🤝 コーポペイント：共同作業のためのショートカット
単独利用ではなく、親との**共同作業（Co-op）**を想定した設計。複雑な機能はキーボードショートカットで親が制御し、子供は描画に集中します。
キーボードショートカット一覧
| 機能 | ショートカット / 操作 |
|---|---|
| 描画トリガー | 左クリック保持 または |
| フルール塗り | 右クリック または |
| 砂を注ぐ | マウススクロール または |
| エフェクト停止 | |
| 保存 | |
| 消去 (リセット) | |
| 元に戻す | |
| 取り消し再実行 | |
| ストローク閉じる | |
| 円形ブラシ選択 | |
| 正方形ブラシ選択 | |
| 色変更 | |
| メニュー開閉 | |
🌊 フラッドフィルとセル状オートマトンの発見
マリオペイントへのオマージュ
- 従来の「即時塗りつぶし」ではなく、『マリオペイント』のリアルタイムなゆっくりとした塗り込みプロセスを再現。
- 成長方向: 『マリオペイント』は上下のみに対し、「Mr. Baby Paint」では左右にも成長させました。
たまたま発見された「有機的パターンのバグ」
- 実装意図: 複数の塗りつぶしと描画を同時に発生させ、動作をブロックしないこと。
- 仕組み:
- 「成長予算」の共有: フラッドフィル全体で 1 フレームあたり 1000 ピクセルの総移動量に制限。
- 速度差: 新しい塗りつぶしの方が古いものより速く成長するため、境界で衝突します。
- 収束: 同色の別の塗りつぶしが追加され互いに収束すると、非常に有機的なパターンを形成。
- 結果: パターンが波打ったり移動したりする「準安定状態」が発生。最終的に安定するか、一つの勝ち組フラッドフィルが決済（消滅）するか繰り返す生命体のような挙動が発見されました。
- CPU での実装: GPU アクセラレーションも試みましたが、CPU の計算における「意図的な遅延」が心地よい体験だったため、あえて CPU ベースで動作させています。
遊び方とカスタマイズ
- クリックして塗りつぶしを開始し、その内側の縁近くにもう一つ起動するとパターンが発動します。
- 「Auto」ボタンで待機したり、進行中に変更を加えたり可能です。
- カンバス右クリックで画像をダウンロード（Save Image As...）できます。
📝 ピクセル増量（Pixel Fattening）アルゴリズムの開発
単一ストロークのビットマップフォントを、太く美しいフォントに変換する実験的プロジェクトです。手作業ではなくプログラムによるピクセル増量を追求しました。
開発プロセス：試行錯誤の連鎖
著者は以下のアルゴリズムを試験的に行い、結果を評価して次へ進みました。
- 単純なサンプリング: 黒い画素に大きな四角形を設置 → 失敗（詳細が潰れる）。
- 詳細保持拡大: 間隔を保ちながら線幅を増やす試み → 改善。
- Jump Flooding Algorithm (JFA): 距離フィールドを使用した拡大尝试 → 不成功。
- 角度ギャップ検出: JFA に 90°以上の黒い画素を検出し、間隔を推定。→ 有望。
- ホールフィルリング追加: 主要方向で囲まれた白色画素を埋める処理を追加。→ さらに向上。
- ホワイトスペーススケルトン検出: JFA に中軸線（脊髄）を検出して間隔を保存。→ 成功。
- 対角線許容と孤立白画素処理: 孤立した白色を埋めるポストプロセッシングパスの追加。→ より良好。
- 符号化距離フィールド (SDF) とレイキャスティング: 16 方向からの計算で安全な拡大値を算出。→ 高度な制御。
- ナローギャップ検出: レンダリング時の狭い間隔部分の処理強化。
- 距離比閾値アプローチ: 8 方向レイキャストと最近距離比率を用いた精密な計算。
- Meijster ユークリッド変換: ユニオン・ファイン CCL とヴォーロイ境界を利用した正確な変換。
- 反復的膨張と衝突検出: ピクセルをロックし、間隔幅で制御する手法。
- トポロジー保存型膨張: 白色領域の融合を防ぐためのピクセル除去処理（理論上の完全実現は難しかった）。
- ヴォーロイ境界を分水嶺として使用: 領域の併合をチェックしつつ制限線を引く最終手。
結論：#4 アプローチの採用
- 試行錯誤の結果、**アプローチ #4（角度ギャップ検出法）**を採用し、手動で Aseprite で調整しました。
- 成果: 同じソースから異なる重みとスタイルを生成可能な完全なビットマップフォントパイプラインが完成。
- 応用範囲: 文字だけでなく、あらゆる画像（図形やプロモーション資料）でも有効に機能します。
📊 プロジェクト結果とリンク
販売実績
- Mac, Windows, Linux の 3 プラットフォームに対応。
- itch.io で 4.99 ドルの販売価格にて提供中。
- 発売累計約 30 コピーを販売済み。