>塗りつぶしのアルゴリズム[ペイント系]ペイント系アプリなどで使用される指定した色でキャンバスを塗りつぶす「塗りつぶし」のアルゴリズムです。アルゴリズムの解説だけではなく、実際にこのページで塗りつぶしを体験できますのでロジックが理解しやすいと思います。「塗りつぶし」の機能があるペイント系アプリは、国内では100本も発表されていないと思いますが、いざ作ろうと思うと、アルゴリズムとテスト作業に数時間はかかってしまうと思いますので、どなたかのお役になれば幸いです。記事の後半にはJavaScriptによるサンプルプログラムがあります。時間がない方は先にそちらを参照すると良いです。塗りつぶしの体験この16x16のキャンバスで「塗りつぶし」を体験できます。ペンは点を描画します。マウスボタンを押しながらマウスを移動すると連続して描画可能です。「ペン」「塗りつぶし」や「色」を変更しながら試してみてください。塗りつぶしクリアこのドット絵用のキャンバスは私が作成したブラウザで動作する「アイコンエディタ」の試作品となっています。このキャンバスは「DIV」で作成されていますが、アイコンエディタの方は高速化の為にHTML5のcanvasを使用しています。アルゴリズム塗りつぶしのアルゴリズムは言葉にすると次のようになります。マウスダウンした座標から上下左右に走査して他の色にぶつかるまで続けます。その次に1回目の走査で取得した「塗りつぶす座標」を元に再度、上下左右に走査します。これを「塗りつぶす座標」分、繰り返し行います。他にも手法はあると思いますが、私はこのロジックにしました。速度もそんなに遅くはないと思います。※JavascriptのDIVエレメントの操作は遅いで注意してください。[1回目の走査図]1回目の走査ではマウスダウンをした座標を除く上下左右に塗りつぶされているのがわかりますね。2回目以降はこの黒色の座標(塗りつぶす座標)を元に上下左右に走査します。再度、取得した「塗りつぶす座標」を元に繰り返し走査を行います。サンプルプログラム最初の「塗りつぶしの体験」と同じコードとなります。粗雑なコードが12kぐらいありますので各パーツ毎に分けて記載します。※JavaScriptはHTMLの<head></head>の中に入れてください。</script>以上となります。粗雑で改善の余地はありますが、各人で改良して下さいね。(3)このブログについてオープンソースGitHubで複数のオープンソースを公開。Webアプリこのブログのマスターが作成した無料ツールです。(オープンソース)ブラウザで8/16/24/32bitの相互変換。Webの逆アセンブラブラウザでEXE/DLLファイルを逆アセンブルする※その他にも「プチラボ」でアプリを多数公開しています。3Dゲームこのブログのマスターが作成した無料ゲームです。短時間で遊べるファンタジーのオンラインRPG風ほのぼの癒し系のスマホアプリ※その他は「@ゲーム」で公開しています。※インストール不要でそのまま遊べます。スマートフォンこのブログのマスターが作成した無料アプリです。お主の画像減色お手軽にカメラの写真や画像を「高品質に減色」するお主は誰だ。(女性向け)ロボットこのブログのマスターが作成したロボットです。