2017/04/18(火) [n年前の日記]
#1 [ruby][dxruby] Ruby + cairo(rcairo)でドット絵モドキを自動生成
Windows10 x64 + Ruby 2.2.6 p396 mingw32版 + cairo(rcairo) + color で、ドット絵モドキを自動生成できるかどうかテスト。
結果はこんな感じに。
_前回の実験結果 と比べると、境界線を追加しただけでも結構それっぽくなってきた、ような気もするけど、やっぱりちょっとビミョーな感じが…どうなんだコレ。
ちなみに、スペースキーを押すと次々にドット絵モドキを自動生成します。
ソースは以下。
_mieki256/tinypixelartgrad.rb
表示確認には DXRuby を使用。生成部分は cairo と color しか使ってないので、Cairo::ImageSurface を変換できれば他の何かしらでも使える、のかな。どうかな。
cairo、color 等は以下でインストールできる、のではないかなと。
アルゴリズムは…。ランダムに、グラデ塗り＋境界線で、矩形もしくは丸をたくさん描いて、横方向や縦方向でミラー(反転コピー)してるだけ。やっぱりグラデ塗りをするだけでも、なんだか色々と誤魔化せるような気が。
結果はこんな感じに。
_前回の実験結果 と比べると、境界線を追加しただけでも結構それっぽくなってきた、ような気もするけど、やっぱりちょっとビミョーな感じが…どうなんだコレ。
ちなみに、スペースキーを押すと次々にドット絵モドキを自動生成します。
ソースは以下。
_mieki256/tinypixelartgrad.rb
表示確認には DXRuby を使用。生成部分は cairo と color しか使ってないので、Cairo::ImageSurface を変換できれば他の何かしらでも使える、のかな。どうかな。
cairo、color 等は以下でインストールできる、のではないかなと。
gem install cairo --platform=x86-mingw32 gem install color gem install dxruby
アルゴリズムは…。ランダムに、グラデ塗り＋境界線で、矩形もしくは丸をたくさん描いて、横方向や縦方向でミラー(反転コピー)してるだけ。やっぱりグラデ塗りをするだけでも、なんだか色々と誤魔化せるような気が。
◎ ライセンスについて。 :
今回自分が書いたスクリプトソースは CC0 / Public Domain ってことで。ランダムに矩形や丸を描いてるだけだし…。
ただ、バイナリにまとめてツールとして配布云々となると、cairo(rcairo) が GPL なので、ツールも GPL になっちゃう気がするわけで。いわゆるGPL汚染。そこはちょっと注意を…。 *1 もちろん、cairo を別のライブラリで置き換えたり、描画処理を自前で書けばGPLに汚されなくて済みそうですが。GPL、面倒臭いッスね。
ただ、バイナリにまとめてツールとして配布云々となると、cairo(rcairo) が GPL なので、ツールも GPL になっちゃう気がするわけで。いわゆるGPL汚染。そこはちょっと注意を…。 *1 もちろん、cairo を別のライブラリで置き換えたり、描画処理を自前で書けばGPLに汚されなくて済みそうですが。GPL、面倒臭いッスね。
◎ 改良案。 :
もしかすると台形も描画するようにしたらもうちょっとそれっぽく…。いや、どうかな…。
ザクのパイプっぽい模様とか、網目っぽい模様とかを、矩形の一種として描画したらもうちょっと…。いや、どうだろう…。
範囲が広い矩形の上には明度を変えた小さな矩形を何度か描いてやれば、STAR WARSに登場するメカのテクスチャっぽくなってくれたり…するのかな…どうなんだ。
ザクのパイプっぽい模様とか、網目っぽい模様とかを、矩形の一種として描画したらもうちょっと…。いや、どうだろう…。
範囲が広い矩形の上には明度を変えた小さな矩形を何度か描いてやれば、STAR WARSに登場するメカのテクスチャっぽくなってくれたり…するのかな…どうなんだ。
[ ツッコむ ]
#2 [ruby][ubuntu] gosuでcairo(rcairo)のサーフェイスを表示できないか実験
上記のドット絵モドキ生成スクリプトは、結果の表示確認用として DXRuby を使っているけど。コレを、Ruby + gosu で表示できないものかと。
少しググって調べてみたけど、どうも gosu は、ファイル名を渡して Gosu::Image を作る以外の方法が無い上に、ドット単位でチマチマと描画していくメソッドすら無いみたいで、コレはちょっと難しいなと。いやまあ、cairo から、一つずつHDDにpngファイルを書きだして、それを読み込み直して、とかやればできなくもないけど…。ソレってダサいというか、絶対に遅いよなと…。
一応、RMagick の何かを渡して Gosu::Image を作れる、という記述も見かけたけど。Windows上で RMagick をインストールしようとすると、一緒にインストールする ImageMagick のバージョンによってはハマる罠があるので、できれば RMagick は使わずに済ませたいわけで。
でもまあ、*NIX や Mac なら RMagick のインストールも特にハマらないのかもしれないか…。せめて Ubuntu Linux上で試してみるか…。
少しググって調べてみたけど、どうも gosu は、ファイル名を渡して Gosu::Image を作る以外の方法が無い上に、ドット単位でチマチマと描画していくメソッドすら無いみたいで、コレはちょっと難しいなと。いやまあ、cairo から、一つずつHDDにpngファイルを書きだして、それを読み込み直して、とかやればできなくもないけど…。ソレってダサいというか、絶対に遅いよなと…。
一応、RMagick の何かを渡して Gosu::Image を作れる、という記述も見かけたけど。Windows上で RMagick をインストールしようとすると、一緒にインストールする ImageMagick のバージョンによってはハマる罠があるので、できれば RMagick は使わずに済ませたいわけで。
でもまあ、*NIX や Mac なら RMagick のインストールも特にハマらないのかもしれないか…。せめて Ubuntu Linux上で試してみるか…。
◎ Ubuntu Linux で RMagickのインストール。 :
一応、Ubuntu Linux で RMagick をインストールする方法もググったり。
_Ubuntu 14.04 で gem install rmagick - kunitooの日記
_Ubuntu12.04でimage-magickとrmagickを入れる - Qiita
_ruby - Installing rmagick on Ubuntu - Stack Overflow
_Ubuntu14.04にRmagickをインストールしようとしたらエラーが出たので、やったことメモ
_rmagick/rmagick: Ruby bindings for ImageMagick
Ubuntuもインストール時にエラーが出てハマる時があるのか…。何だよソレ…面倒臭いな…。
これがもし Python だったら、PIL(Pillow) を入れればある程度は画像処理ができてしまうのだけど。Ruby には PIL 相当が無いから ImageMagick関連に頼るしか無くてなんだか不便だなと思えてきたり。
などとブツブツ言いつつも、一応 github のソレには、「libmagickwand-dev もインストールしろ」と注意書きがあるので、ソレを信じて VMware Player + Ubuntu 16.04 LTS上で試してみたり。
でも、本当にインストールできたのかな。
_Ubuntu 14.04 で gem install rmagick - kunitooの日記
_Ubuntu12.04でimage-magickとrmagickを入れる - Qiita
_ruby - Installing rmagick on Ubuntu - Stack Overflow
_Ubuntu14.04にRmagickをインストールしようとしたらエラーが出たので、やったことメモ
_rmagick/rmagick: Ruby bindings for ImageMagick
Ubuntuもインストール時にエラーが出てハマる時があるのか…。何だよソレ…面倒臭いな…。
これがもし Python だったら、PIL(Pillow) を入れればある程度は画像処理ができてしまうのだけど。Ruby には PIL 相当が無いから ImageMagick関連に頼るしか無くてなんだか不便だなと思えてきたり。
などとブツブツ言いつつも、一応 github のソレには、「libmagickwand-dev もインストールしろ」と注意書きがあるので、ソレを信じて VMware Player + Ubuntu 16.04 LTS上で試してみたり。
$ sudo aptitude install libmagickwand-dev
以下の新規パッケージがインストールされます:
bzip2-doc{a} gir1.2-rsvg-2.0{a} libbz2-dev{a} libcdt5{a} libcgraph6{a} libdjvulibre-dev{a}
libexif-dev{a} libgraphviz-dev{a} libgvc6{a} libgvc6-plugins-gtk{a} libgvpr2{a}
libilmbase-dev{a} libjasper-dev{a} libjbig-dev{a} libjpeg-dev{a} libjpeg-turbo8-dev{a}
libjpeg8-dev{a} liblcms2-dev{a} liblqr-1-0-dev{a} liblzma-dev{a}
libmagickcore-6-arch-config{a} libmagickcore-6-headers{a} libmagickcore-6.q16-dev{a}
libmagickwand-6-headers{a} libmagickwand-6.q16-dev{a} libmagickwand-dev libopenexr-dev{a}
libpathplan4{a} librsvg2-dev{a} libtiff5-dev{a} libtiffxx5{a} libwmf-dev{a} libxdot4{a}
0 個のパッケージを更新、 33 個を新たにインストール、 0 個を削除予定、0 個が更新されていない。
12.3 M バイトのアーカイブを取得する必要があります。 展開後に 37.8 M バイトのディスク領域が新たに消費されます。
先に進みますか? [Y/n/?]
(以下略)
$ sudo gem install rmagick
Fetching: rmagick-2.16.0.gem (100%)
Building native extensions. This could take a while...
Successfully installed rmagick-2.16.0
Parsing documentation for rmagick-2.16.0
Installing ri documentation for rmagick-2.16.0
Done installing documentation for rmagick after 6 seconds
1 gem installed
$ irb
irb(main):001:0> require 'rmagick'
=> true
irb(main):002:0> exit
大量にパッケージがインストールされたけど、すんなり入ってくれた、ような気がする。助かった。でも、本当にインストールできたのかな。
◎ RMagickの動作確認。 :
ちゃんとインストールできたのか試してみる。
$ irb
irb(main):001:0> require 'rmagick'
=> true
irb(main):002:0> img = Magick::ImageList.new("0001.jpg")
=> [0001.jpg JPEG 3888x2592 3888x2592+0+0 DirectClass 8-bit 3307kb]
scene=0
irb(main):003:0> img.flop.write("dst.jpg")
=> 0001.jpg=>dst.jpg JPEG 3888x2592 3888x2592+0+0 DirectClass 8-bit 3299kb
動いてるっぽい。左右反転した jpg が保存された。
◎ cairoのサーフェイスをRMagickのImageに変換。 :
さて。cairo(rcairo)のサーフェイスを RMagick の Image に変換するには、何をどうすればいいのやら。
以下でやり方が紹介されてた。ありがたや。
_3階建ての2階角部屋 2nd : ruby/tk + cairoで高速化を目指す 3
おそらく以下の2行がソレなのだろう…。
ただし、この書き方は、リトルエンディアンのCPUにしか対応してない書き方、のような気がする。ビッグエンディアンのCPUで cairo を使うと、BGRAじゃなくてARGBの並びで返ってきそうな予感。
以下でやり方が紹介されてた。ありがたや。
_3階建ての2階角部屋 2nd : ruby/tk + cairoで高速化を目指す 3
おそらく以下の2行がソレなのだろう…。
magick = Magick::Image.new(width, height) ... magick.import_pixels(0,0, cairo.width, cairo.height, 'BGRA', cairo.data)
ただし、この書き方は、リトルエンディアンのCPUにしか対応してない書き方、のような気がする。ビッグエンディアンのCPUで cairo を使うと、BGRAじゃなくてARGBの並びで返ってきそうな予感。
◎ gosuで表示確認ができた。 :
ということで、Ubuntu 16.04 LTS上で、Ruby 2.3.1 p112 + RMagick 2.16.0 + gosu 0.11.3.1 を使って、前述のドット絵モドキ生成スクリプトの動作確認ができた。以下は証拠画像。
ソースは以下。もちろん、 _tinypixelartgrad.rb も必要。
_gosu_draw.rb
さておき。gosu はウインドウの背景色を指定できないようで、各画像の輪郭が分かりづらいなと…。背景画像を用意して背景色指定の代替に、と思ったら単色豆腐画像もすぐには作れないようだし。それと、キーボードを押した瞬間を取得できないのもなんだかアレで…。
その点 DXRuby は、ウインドウの背景色は1行で指定できるし、即座に単色豆腐画像を作れるし、キーボードを押した瞬間も取得できるしで、細かい部分で色々と気が利いてるので助かります。ありがたや。
ソースは以下。もちろん、 _tinypixelartgrad.rb も必要。
_gosu_draw.rb
さておき。gosu はウインドウの背景色を指定できないようで、各画像の輪郭が分かりづらいなと…。背景画像を用意して背景色指定の代替に、と思ったら単色豆腐画像もすぐには作れないようだし。それと、キーボードを押した瞬間を取得できないのもなんだかアレで…。
その点 DXRuby は、ウインドウの背景色は1行で指定できるし、即座に単色豆腐画像を作れるし、キーボードを押した瞬間も取得できるしで、細かい部分で色々と気が利いてるので助かります。ありがたや。
[ ツッコむ ]
#3 [pc] 何故にsvgビューアが存在しないのだろう
ズームとパンができてWindows上で動作するフリーのsvgビューアが無いものかとググっていたのだけど、これが全然見つからず。
単にsvgを表示するだけでズームもパンも何もできないソフトならチラホラ見かけたのだけど…。ラスターデータと違って拡大しても画質が荒れませんよ、てのがベクターデータの売りなのに、何故にどのソフトもズーム機能がついてないのだろう。不思議。
ていうか、皆一体何を使ってsvgの表示確認をしているんだ…。いやまあ、*NIX系ならデスクトップ環境にsvg表示機能が入ってたりもするからこのあたりWindowsだけの問題かもしれないのだけど。
bmp、jpg、png等、ラスター画像対応のビューアは山ほど存在するのに、svgは…。作るのが難しいのだろうか。それともWebブラウザで表示して済ませてる場面が多いのだろうか。にしても、この少なさは…。いやまあ、つまりはそれだけ、svg画像自体が作られていないし使われていないということかもしれんけど。
単にsvgを表示するだけでズームもパンも何もできないソフトならチラホラ見かけたのだけど…。ラスターデータと違って拡大しても画質が荒れませんよ、てのがベクターデータの売りなのに、何故にどのソフトもズーム機能がついてないのだろう。不思議。
ていうか、皆一体何を使ってsvgの表示確認をしているんだ…。いやまあ、*NIX系ならデスクトップ環境にsvg表示機能が入ってたりもするからこのあたりWindowsだけの問題かもしれないのだけど。
bmp、jpg、png等、ラスター画像対応のビューアは山ほど存在するのに、svgは…。作るのが難しいのだろうか。それともWebブラウザで表示して済ませてる場面が多いのだろうか。にしても、この少なさは…。いやまあ、つまりはそれだけ、svg画像自体が作られていないし使われていないということかもしれんけど。
◎ Batikの使い方をメモ。 :
一応、
_Apache Batik
の batik-squiggle というsvgブラウザが存在していて、ソレを使えばズームもパンもできるのだけど、ちょっと操作方法が一般的なビューアと違っているのでそのあたりをメモ。
入手は、 _Download Apache™ Batik 経由で _Index of /pub/apache/xmlgraphics/batik/binaries あたりから。batik-bin-1.9.zip をDLして解凍。
Javaで作られたソフトなので、Javaのインストールが必要。Javaがインストールされてないなら、 _java.com からJavaをインストール。
batik-squiggle の起動は、以下でいいのかな…。たぶん。
操作方法は…。
ここまでメモしてから気が付いたけど、 _Batik - SVG Browser に、バージョンは古いけどドキュメントの日本語訳があることに気が付いた。該当ページにリンクを貼っておくだけで済んだのだな…。
入手は、 _Download Apache™ Batik 経由で _Index of /pub/apache/xmlgraphics/batik/binaries あたりから。batik-bin-1.9.zip をDLして解凍。
Javaで作られたソフトなので、Javaのインストールが必要。Javaがインストールされてないなら、 _java.com からJavaをインストール。
batik-squiggle の起動は、以下でいいのかな…。たぶん。
javaw -jar Batikインストールフォルダ\batik-squiggle-1.9.jar javaw -jar Batikインストールフォルダ\batik-squiggle-1.9.jar hoge.svgbatik-bin-*.*.zip を解凍すると、中に samples というフォルダがあって、その中に色々な svgファイルが入ってるから、試しに表示してみるのもいいかもしれず。まあ、表示/描画に失敗するsvgファイルも入ってるのがなんだか気になるけど。
操作方法は…。
- Shift + 左ボタンドラッグ : PAN。(スクロール)
- Shift + 右ボタンドラッグ : ズーム
- Ctrl + 左ボタンドラッグ : 選択範囲をズーム
- Ctrl + 右ボタンドラッグ : 回転
- Ctrl + T : ズーム率を戻す
- Ctrl + I : ズームイン (拡大表示)
- Ctrl + O : ズームアウト (縮小表示)
- Ctrl + Y : サムネイル表示。拡大表示時はサムネイル内の枠をドラッグすることで表示場所を変更できる。
ここまでメモしてから気が付いたけど、 _Batik - SVG Browser に、バージョンは古いけどドキュメントの日本語訳があることに気が付いた。該当ページにリンクを貼っておくだけで済んだのだな…。
[ ツッコむ ]
以上、1 日分です。