Merry Xmas
どうもこんばんは、15-nomoです。
こちらはrogy Advent Calendar 2018の25日目、最後の記事になります。
本当はいま自作している自分のblogで公開したかったのですが、間に合わなくてrogiken blogに投稿します。 自作blogについてはまた今度。
また、記事も最近作っている三輪オムニボールについて書こうと思ったのですが、回路にミスがあったのでこちらもまた今度にします。
ということで今回はLinePictureという作品について書きたいと思います。
Abstract
ウィル・スミスが主演の「アイロボット」という映画の中で、人型ロボットが縦と横の線のみで風景画を描くシーンがあります。
このイラスト作ってみようと思って写真を縦と横の線のみで表現するように変換するツールを作ってみました。
入力
出力
これの面白いところは、写真で縦向きが多いところは縦の線で、横向きが多いところは横線で表現されるところです。
デモはこちら。
写真をuploadすると直線画にしてくれるtoolはこちら。
ソースコードはこちら。
LinePicuture Filter
5✕5 pixel の画素データの1 pixelあたりの平均を5✕5のマスの中心の一列にだけ付与します。
それを5 pixelずつずらしながら画像全体に適用します。
これで画像から一定間隔おきの直線を描くことができます。
この5✕5のマスの大きさは指定できるようになっているので、直線の間隔を変えることができます。
このFilterを縦と横でかければ縦線と横線に変換することができます。
Procedure
ではこのLinePicutureを使って画像を直線がに変換します。
まずは入力画像をグレースケールにして縦と横のSobel filterをかけて、縦と横の輪郭抽出をします。
この処理によって画像の縦方向の成分と横方向の成分を抽出することができます。
縦のSobelFilterwoかけた画像には縦の、横のSobel Filterをかけた画像には横のLinePicture Filterをかけます。
これによって縦成分と横成分がある領域にだけその強さに合わせて直線を引きます。
必要な直線と不必要な直線を線の強さによって二値化します。
これで閾値よりも濃ゆい線のみを残します。
これを重ねて表示すると直線画の出来上がりです。
Animation
「アイロボット」ではロボットがペンを両手に１本ずつもって、右手が縦線左手が横線を分担して、徐々にイラスト描いていきます。
その描いていく過程が好きなので、この直線画もAnimationするようにしていきます。
直線を1フレームおきに少しずつ伸ばすように、直線のpixelの座標を描画順に並べてArrayに入れておきます。
でもこのままでは左から順に描画していくだけで面白くないので、長い直線を先に描画するようにします。
直線画のすべての直線の長さを計算し、長さが大中小によって3つにわけ、大→中→小の順番に線を描画していくとおもしろいAnimationになります。
どうでしょうか、いろいろな画像を変換して遊んでみてください。
