日曜プログラマー大歓迎 JavaScriptの部屋 第15回

JavaScriptで写真をぼかすフィルターの仕組み

ミニチュア写真を自動で作るプログラムって？

おじ　写真の上下にぼかしを入れるだけで、ミニチュアのように見えてしまうって、なんか不思議だよね。
めい　目の錯覚なのかな？
おじ　さあ、よくわからないけど、5月9日発売の週刊アスキーNo.1125では、写真を加工してミニチュアに見えちゃうフィルターっていうのを作ったね。

めい　これはおじさんが、実際に東京都庁だかどっかで撮った写真なのよね？
おじ　そう。右側の２つのスライダーで、上下のぼかし範囲を決めて「ぼかしを加える」ボタンを押して作ったもの。
めい　以前に写真をモノクロにしたのと同じで、キャンバスに写真のデータを読み込んで加工するんだよね。
おじ　どうやってぼかすのか覚えてる？
めい　確か、まわりの色の平均を取るとかなんとか。
おじ　まわりって、何のまわりだよ。
めい　あ、写真の1個1個のドットだ。写真は、ドットがたくさん集まってできていて……。
おじ　うんうん。
めい　左上のドットから順番に、そのドットのまわりの色を全部足して、足したドットの数で割って、それを真ん中のドットの色にする……で、合ってる？
おじ　うん。ひとつのドットのまわりには、上下左右と斜めの全部で8個のドットがある。今めいが「全部の色を足して」と言ったのは、その8個に真ん中の1ドットも合わせて9ドットぶんを足すってことだね。それを9で割ると、その9個のドットの色の平均の色が出る。それを真ん中の1ドットの色にするんだ。
めい　んで、それを写真の全部のドットについてやるのよ。どうしてそれでぼけて見えるのかはよくわかんないけど。あれ？　でもまわりって9個だけじゃなかったような……。
おじ　そう、このプログラムでは、画面の上下端にいくほど、ぼけ具合が大きくなるようにしていたね。
めい　どうやって？
おじ　ほら、1ドットのまわりは、そのドット含めて9個だけど、さらにそのまわりも足すと……。
めい　あ、そういうことか！　えっと、9個のまわりも足すと……25個か。一気に増えたな。
おじ　で、それを25で割って平均化する。
めい　足すドット数が多くなるほどぼけ具合が大きくなるんだね。なんでだろ。
おじ　まぁ、ぼけるというより、より広い範囲の色が混ざり合うって感じかな。さらにそのまわりも足すと何個になるかわかる？
めい　え？　ちょっと待ってよ。1、2、3……はい、49個です！
おじ　今、めいは紙に描いて数えてたけど、その法則性を見つけてプログラム化すれば、いくらでもぼけの範囲を大きくできるってことだね。そうして、今回のプログラムでも4段階のぼけ具合を作り出している。

めい　こちらは、週刊アスキー編集部の近くの飯田橋駅らへんの写真だっけ？
おじ　うん。電車がおもちゃぽく見えるかな？
めい　うーん、見えると言えば見えるような。
おじ　まぁ、「ミニチュアふう」写真だから。
めい　でも、おじさんに見せてもらった人の写真集は、すっごいミニチュアに見えた。
おじ　本城直季さんの写真集だね。そもそも、本城さんのはこうやって作ったんじゃないってのと、あとミニチュアに見えやすい構図ってのがあるみたいね。
めい　構図？
おじ　やはり見下ろした写真のほうが見えやすい。あと、彩度が高めの写真のほうがいいとか。
めい　彩度？
おじ　鮮やかさのこと。ほら、風景写真は、遠くのものほどくすんだ色に見えるじゃん。鮮やかなものほど近くにあるっていう経験から距離感がごまかされるんじゃないかな。
めい　はあ、そうですか。

おじ　ところで、めいならこのプログラムを改造するとしたらどうする？
めい　まず、ミニチュアに見えるようにした写真を保存できるようにするかな。
おじ　さっきもちらっと言ったけど、もっと大きくぼけるようにしてみてもいいかもね。
めい　読者のみなさんも、何かおもしろい写真加工プログラムを作ったらぜひ投稿してみてくださいね。

アスキーJavaScriptプログラム募集要項

★アスキーの有料会員サービス「ASCII倶楽部」会員の方は、下記リンクをクリックすると直接ページが開きます。

日曜プログラマー大歓迎
JavaScriptの部屋

週刊アスキーNo.1125はBOOK☆WALKER、Kindle、kobo等電子書店で発売中!

週刊アスキー No.1125（2017年5月9日発行）[Amazon]

電子版週刊アスキーの購入はこちらから