flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScriptで画像処理【2】グレースケール化・セピア調

1.はじめに

CANVASの画素を1つずつ操作することが可能になったので、今回から本格的に写真を使った画像処理を行っていきます。CANVASの画素の読み込み方は第1回に記載しております。

 


2.アルゴリズム

写真のグレースケール化はシンプルで、以下の式で表すことができます。

 

  Gray = 0.299 * Red + 0.587 * Green + 0.114 * Blue;

 

光の3原色をそのまま足して3で割る方法もありますが、上式の輝度成分に基づく各色の重みで足す方が、人間の視覚特性上良いという理由から一般的にこの式が使われます。

 

セピア調画像は、茶褐色に見えるRGBの重みを元の画像のRGBに掛け合わせることで求めることができます。

 

3.ソースコード

GrayScale and Sepia

4.実装

 

元画像

f:id:flandlescarlet:20170416225352j:plain

 

グレースケール化

f:id:flandlescarlet:20170417235335p:plain

 

セピア調

f:id:flandlescarlet:20170417235336p:plain

 

グレースケール化 → セピア調

f:id:flandlescarlet:20170417235337p:plain

 

5.おわりに

グレースケール化は画像処理の中でも簡易な処理となりましたが、この後の2値化やエッジ抽出などで重要な役割を果たします。次回は、トーンカーブに関する画像処理を実装していこうと思います。

 

 

JavaScriptで画像処理【1】CANVASの座標と画素

1.はじめに

画像処理といえば大半はC言語Java等の言語で行うのがほとんどであり、サンプルコードの多くがこれらの言語で実装されています。JavaScriptでも画像処理を行っている記事を見かけますが、ほとんどがグレースケール化、踏み込んでもSobelフィルタなどのエッジ抽出に使われるものだけで、画像処理ライブラリ的なものが現時点では、存在していませんでした。

 

今回JavaScriptで画像処理のアルゴリズムを実装するにあたってCG-ARTS協会の本を使います。ソースコードは一切かかれていませんが、アルゴリズムを深く理解するうえでは詳しく書かれている本だと思います。

ディジタル画像処理[改訂新版] | 画像情報教育振興協会 |本 | 通販 | Amazon

 

2.JavaScriptでの画像処理実装方法

JavaScriptで画像処理を行うにあたって、html5で実装されたcanvasを使います。

画像処理の座標系は数学でよくみる座標系と違って、原点の画素が左上から始まります(ループ文の回し方によって原点や読み込む方向が異なるので、本記事では下図のループで回すことにします)。

 

 

ここで、注意しないといけないのが、canvasの画素配列は二次元配列ではないということです。写真やイラストなどの2次元データは、canvasで扱うにあたって一次元配列として格納されています。とくに、一次元配列の中身は、赤、緑、青、不透明度の順番に格納されております。

 

 

RGBAの各値の範囲は 0 ~ 255 で加法混色の数値をそのまま扱うことができます。Aは画素のアルファ値(不透明度)の意味で 0なら完全に透明、255なら不透明となります。

 

3.設計

 本格的な画像処理を始めるには各画素の操作が必要となるため、canvasの画素配列の理解を深めるためにグラデーション画像を作ります。

サイズは 256x256、canvasの上部から下部にかけて黒→赤になるグラデーションを設計します。

 canvasは一次元配列でRGBA、画素をすべて格納すると書きましたが、4x4の画像があったとすると、各配列のパラメータは以下の図のようになっています。

 

 

赤の配列に着目すると、{0, 4, 8, ‥‥, 56, 60} と 4の倍数ごとに配列に格納されています。二次元画像で i = 2、j = 3の赤の配列を得たい場合には、( 2 × 4(width) + 3) × 4 とすれば得ることができます。一般的に表すと、( i × width + j ) × 4 で i×j 座標の赤の配列を得ることができます。

残りの緑、青、透明度を表す配列を得るときには、それぞれ、緑+1青+2透明度+3 としてやれば、すべての画素データを操作することができるようになります。

 

黒から赤のグラデーションをかけるので、緑と青の配列は常に0で赤の配列を0から255にかけて増やしていくことで黒から赤へのグラデーションをかけることができます。

縦にグラデーションをかけたいので i軸のみの増分値を赤の配列にそのまま代入することでグラデーションがかけられます。横方向にかけたい場合は j軸の増分値を代入することで横のグラデーションがかかります。

赤から黒にかけてグラデーションをかけたい場合は、255 - i とすることで実装できます。

 

4.ソースコード

Black-Red Gradation

 

5. 実装

 

canvas未対応のブラウザです

 

6.おわりに

今回は、JavaScriptで画像処理を行うにあたっての導入を行いましたが、次回からはグレースケール化を始めとして、平滑化フィルタ、エンボス、モザイク等、順番に画像処理のアルゴリズムを実装していけたらいいなと思います。

 

 

LATEXの数式がJavaScriptで書けるMathJaxが凄い

実験のレポートや卒論などで、度々使わされるTEXですが、JavaScriptTEXの数式が書けるのかとふと調べたところ、あっさりと見つかったので紹介しておきます。今更ですが、JavaScriptはスピードこそ遅いものの大体何でも実現しちゃうんですね。

 

www.mathjax.org

 

 

使うときは、外部jsファイルを読み込めば直接使えるようです使えるようです。

 

 <script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>


TEX数式

\[ \cfrac{\partial u}{\partial t} = D\cfrac{\partial^{2}u}{\partial x^{2}} \]

 

実行結果

\[ \cfrac{\partial u}{\partial t} = D\cfrac{\partial^{2}u}{\partial x^{2}} \]

 

感想としては、JavaScriptを読み込みTEX数式をパースして結果を出力するまで時間がかかるので、見た目が崩れるのを気にするならTEX数式を画像で出力してimgタグで貼りつけるのが無難かと思いました。

しかし、大量の数式を書く場合にはTEXのコードをそのまま引用できるので便利です。

ドット絵【リゼ】

サムネイルも約5年前のものだったので、新しくサムネイル用の絵を描いたのですが圧縮したときのボケ方がひどかったので、ドット絵を作ることにしました。

 

サムネイルを変更して、はてな各地のサムネイルが徐々に新アイコンになっていくのはなかなか面白いものです。しかし、反映に1日以上かかったりするのはどういった要因があるのか少し気になりました。

 

ドット絵もそうですが、16bit、8bit音楽みたいに限られた容量内で完成度を極めた作品は好きです。

 

拡大図

 f:id:flandlescarlet:20170329025518p:plain

 

原寸大 16x16

f:id:flandlescarlet:20170329025225p:plain

月のデッサン

春期休暇も僅かということで、久しぶりにスケッチブックを購入し色々と書いております。中学生の頃は、花瓶に入った紫陽花やデッサン用の手の模型などをリアルに描いていましたが、今回は月をモデルに描いてみました。

 個人的にはスケッチブックのあのザラザラとした質感よりも、自由ノートのようなきめ細かいザラザラの質感の方が、濃淡がなじむ気がします。

 

f:id:flandlescarlet:20170327234947p:plain

 

自分なりの絵描きのモチベーションを保つ方法

小学生のころから大学生の今日にあたるまで絵を描いているわけですが、2013年をさかいに自分の趣味でイラストを作成することはめっきりとなくなりました。周りを見ていると年をとるにつれて絵を描くペースが減っている人を見かけます。理由としては、受験勉強や大学である実験のレポート作成、社会人ならば仕事で絵を描く暇がないなどがあります。自分も時間がありあまっていた小中学生の頃に比べて大学に入ってからは年間に2,3枚描く程度になってしまいました。しかし、それでも絵を描くことはやめていません。

最近では、自分で絵を描くというよりも誰かに頼まれて、もしくは誰かのために描かなければならないという立場で絵を描くことが多くなりました。絵の受注内容としては、サークルの模擬店のポスターや学科のものづくりの宣伝ポスターなどです。絵を描いていても途中で止めてしまうという方は、個人の範疇で絵を描いているのではないかなと思います。

例えとしては、C言語を独学しようと思ってもモチベーションが保てずにif文やwhile文までやって、その後の構造体やポインタまで勉強できなかったというケースがあると思います。しかし、大学の授業でC言語のテスト範囲に構造体やポインタの内容が入っていれば、大抵の人は単位をとるために一夜漬けでも勉強しきるのではないでしょうか。

自分は、模擬店のポスターや学科展示のポスターなど描かなければ周りに迷惑がかかるという状況下で絵を描き続けることができています。これが面白いことに、イラストの受注が本番の1日前や2日前だったりすることが多いのですが、大抵は徹夜でもして本番前までに絵を完成させてしまうことができるのです。(絵を描くこと自体が好きなので、夜の9時から朝の6時まで描いてたときもあります)

社会人であれば、製品の企画書のイラストやプレゼンテーションのイラスト作成担当を担うことによって、モチベーションに関係なく受動的にイラストを描くことができるのではないかと考えています。

絵はしばしばイラストレータやアニメータにならないとお金にならなかったり時間の無駄と言われますが、そんなことはないと思います。自分は大学の工学部に所属していますが、工学部だからこそ絵を描く人が圧倒的に少なく需要が生まれてきます。おにぎりをロボットが自動で握ってくれる製品のプログラム設計などができても、肝心のイラストがなければ見ている人を説得するのは難しくなると考えています。

長くなりましたが、絵描きのモチベーションというよりも絵を描きたいけど大学や仕事で忙しくて描く気力がないのであれば、大学や仕事場で必要な絵を描く状況を作れば、長いスパンで絵を描くことができるというのがここ最近の考えです。

自分自身絵を描くこと自体が昔から好きだったので、ロボットのイラストや模擬店のたこ焼きやワッフルなどの食べ物のイラストなどなんでもOKなので、飽くまでも趣味で特定のイラストのみ描きたい人は別の方法でモチベーションを保たなければならないかもしれません。なんでもいいから絵を描きたいのであれば、絵を描くチャンスを見かけたとき自分から絵描きの立候補をすると良いかもしれません。

5年ぶりに更新

2012年の半ばから突如はてなの更新を停止しておりましたが、春期休暇ということでパソコンの整理やネットアカウントの整理をしてた際に、はてなスターのお知らせがあったので、一時的に戻ってきました。

久しぶりということで、とりわけ2種類のメッセージを残していきます。

4月の頭まで、とりあえずゆっくりできると思うので、久しぶりに合流出来たらなと思います。

この5年間で気になった動き

うごメモの方へ

気になった5年間の動き

ここ最近情報系のワードで耳にするのが、ビッグデータ解析、人工知能、IoT、VR等々. プログラミング言語も最近では、人工知能の影響によりpythonの需要度が高まっているようですね。 JavaScriptをやっていただけに少しショックでしたが。そんなJavaScriptも昔はPHPみたいにサーバサイドで動くようになったり3Dモデリングが可能になったりと日々進化を遂げていましたが、ここ最近でC言語のようにデスクトップアプリが作れるようになったみたいです。JavaScript Electronで詳細が見られるかと。

話はそれましたが、情報の次の世代が人工知能などの技術にあたるようです。人工知能Googleのalpha goが囲碁棋士のトップに勝利したり、模擬戦の戦闘機の戦闘でパイロットを打ち破ったりと、人間ならではと呼ばれていた技術を超える存在になってきました。そんな人工知能ですが、イラスト業界でも動きがあったらしく面白い機能があったので紹介します。

PaintsChainer

PaintsChainerは機械学習によって作られた自動彩色プログラムです。線画を与えることによって、自動で彩色されるとのこと。 ためしに、線画オンリーの画像をそのまま着色してもらいました。1枚目が線画のみ、2枚目が自動着色、3枚目が色指定着色です。

f:id:flandlescarlet:20170309234621j:plain

f:id:flandlescarlet:20170309234559j:plain

f:id:flandlescarlet:20170309235125j:plain

着色してもらってう驚いたのが、このプログラム線画の手を認識しているんですね、。手は肌色でどこに影を付くかをこちらで指定せずにしっかりと塗ってくれているのです。タブレットの黒色も機械学習でそう認識しているかと。タブレットの画像は電子書籍をモチーフにしているのですが、ここだけ色がおかしくなりました。しかし、白色の点を線画にちょこっと塗るだけで3枚目の画像に変化し、それらしく描画してくれました。

ここからは教授の話になりますが、情報技術によりネット授業が公開されたり、コンピュータが患者の病名を診断し適切な薬を処置するなど、先生という職業や医者という職業が将来にはロボットの処置が正しいかのチェック役、もしくは存在自体なくなるそうな

産業用ロボットの時代からも言われていましたが、ロボットが人の職を奪うが、人工知能が人の職を奪うという言い方がされるようになってきたように思えます。

うごメモの方へ

あのうごメモのチャット名でも入力してくださいな「みんなの○○」(ヒント:漢字2文字で地霊殿)