JavaScriptで画像処理【2】グレースケール化・セピア調
1.はじめに
CANVASの画素を1つずつ操作することが可能になったので、今回から本格的に写真を使った画像処理を行っていきます。CANVASの画素の読み込み方は第1回に記載しております。
2.アルゴリズム
写真のグレースケール化はシンプルで、以下の式で表すことができます。
Gray = 0.299 * Red + 0.587 * Green + 0.114 * Blue;
光の3原色をそのまま足して3で割る方法もありますが、上式の輝度成分に基づく各色の重みで足す方が、人間の視覚特性上良いという理由から一般的にこの式が使われます。
セピア調画像は、茶褐色に見えるRGBの重みを元の画像のRGBに掛け合わせることで求めることができます。
3.ソースコード
4.実装
元画像
グレースケール化
セピア調
グレースケール化 → セピア調
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.ソースコード
5. 実装
6.おわりに
今回は、JavaScriptで画像処理を行うにあたっての導入を行いましたが、次回からはグレースケール化を始めとして、平滑化フィルタ、エンボス、モザイク等、順番に画像処理のアルゴリズムを実装していけたらいいなと思います。
LATEXの数式がJavaScriptで書けるMathJaxが凄い
実験のレポートや卒論などで、度々使わされるTEXですが、JavaScriptでTEXの数式が書けるのかとふと調べたところ、あっさりと見つかったので紹介しておきます。今更ですが、JavaScriptはスピードこそ遅いものの大体何でも実現しちゃうんですね。
使うときは、外部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のコードをそのまま引用できるので便利です。
自分なりの絵描きのモチベーションを保つ方法
小学生のころから大学生の今日にあたるまで絵を描いているわけですが、2013年をさかいに自分の趣味でイラストを作成することはめっきりとなくなりました。周りを見ていると年をとるにつれて絵を描くペースが減っている人を見かけます。理由としては、受験勉強や大学である実験のレポート作成、社会人ならば仕事で絵を描く暇がないなどがあります。自分も時間がありあまっていた小中学生の頃に比べて大学に入ってからは年間に2,3枚描く程度になってしまいました。しかし、それでも絵を描くことはやめていません。
最近では、自分で絵を描くというよりも誰かに頼まれて、もしくは誰かのために描かなければならないという立場で絵を描くことが多くなりました。絵の受注内容としては、サークルの模擬店のポスターや学科のものづくりの宣伝ポスターなどです。絵を描いていても途中で止めてしまうという方は、個人の範疇で絵を描いているのではないかなと思います。
例えとしては、C言語を独学しようと思ってもモチベーションが保てずにif文やwhile文までやって、その後の構造体やポインタまで勉強できなかったというケースがあると思います。しかし、大学の授業でC言語のテスト範囲に構造体やポインタの内容が入っていれば、大抵の人は単位をとるために一夜漬けでも勉強しきるのではないでしょうか。
自分は、模擬店のポスターや学科展示のポスターなど描かなければ周りに迷惑がかかるという状況下で絵を描き続けることができています。これが面白いことに、イラストの受注が本番の1日前や2日前だったりすることが多いのですが、大抵は徹夜でもして本番前までに絵を完成させてしまうことができるのです。(絵を描くこと自体が好きなので、夜の9時から朝の6時まで描いてたときもあります)
社会人であれば、製品の企画書のイラストやプレゼンテーションのイラスト作成担当を担うことによって、モチベーションに関係なく受動的にイラストを描くことができるのではないかと考えています。
絵はしばしばイラストレータやアニメータにならないとお金にならなかったり時間の無駄と言われますが、そんなことはないと思います。自分は大学の工学部に所属していますが、工学部だからこそ絵を描く人が圧倒的に少なく需要が生まれてきます。おにぎりをロボットが自動で握ってくれる製品のプログラム設計などができても、肝心のイラストがなければ見ている人を説得するのは難しくなると考えています。
長くなりましたが、絵描きのモチベーションというよりも絵を描きたいけど大学や仕事で忙しくて描く気力がないのであれば、大学や仕事場で必要な絵を描く状況を作れば、長いスパンで絵を描くことができるというのがここ最近の考えです。
自分自身絵を描くこと自体が昔から好きだったので、ロボットのイラストや模擬店のたこ焼きやワッフルなどの食べ物のイラストなどなんでもOKなので、飽くまでも趣味で特定のイラストのみ描きたい人は別の方法でモチベーションを保たなければならないかもしれません。なんでもいいから絵を描きたいのであれば、絵を描くチャンスを見かけたとき自分から絵描きの立候補をすると良いかもしれません。
5年ぶりに更新
2012年の半ばから突如はてなの更新を停止しておりましたが、春期休暇ということでパソコンの整理やネットアカウントの整理をしてた際に、はてなスターのお知らせがあったので、一時的に戻ってきました。
久しぶりということで、とりわけ2種類のメッセージを残していきます。
4月の頭まで、とりあえずゆっくりできると思うので、久しぶりに合流出来たらなと思います。
気になった5年間の動き
ここ最近情報系のワードで耳にするのが、ビッグデータ解析、人工知能、IoT、VR等々. プログラミング言語も最近では、人工知能の影響によりpythonの需要度が高まっているようですね。 JavaScriptをやっていただけに少しショックでしたが。そんなJavaScriptも昔はPHPみたいにサーバサイドで動くようになったり3Dモデリングが可能になったりと日々進化を遂げていましたが、ここ最近でC言語のようにデスクトップアプリが作れるようになったみたいです。JavaScript Electronで詳細が見られるかと。
話はそれましたが、情報の次の世代が人工知能などの技術にあたるようです。人工知能はGoogleのalpha goが囲碁棋士のトップに勝利したり、模擬戦の戦闘機の戦闘でパイロットを打ち破ったりと、人間ならではと呼ばれていた技術を超える存在になってきました。そんな人工知能ですが、イラスト業界でも動きがあったらしく面白い機能があったので紹介します。
PaintsChainerは機械学習によって作られた自動彩色プログラムです。線画を与えることによって、自動で彩色されるとのこと。 ためしに、線画オンリーの画像をそのまま着色してもらいました。1枚目が線画のみ、2枚目が自動着色、3枚目が色指定着色です。
着色してもらってう驚いたのが、このプログラム線画の手を認識しているんですね、。手は肌色でどこに影を付くかをこちらで指定せずにしっかりと塗ってくれているのです。タブレットの黒色も機械学習でそう認識しているかと。タブレットの画像は電子書籍をモチーフにしているのですが、ここだけ色がおかしくなりました。しかし、白色の点を線画にちょこっと塗るだけで3枚目の画像に変化し、それらしく描画してくれました。
ここからは教授の話になりますが、情報技術によりネット授業が公開されたり、コンピュータが患者の病名を診断し適切な薬を処置するなど、先生という職業や医者という職業が将来にはロボットの処置が正しいかのチェック役、もしくは存在自体なくなるそうな
産業用ロボットの時代からも言われていましたが、ロボットが人の職を奪うが、人工知能が人の職を奪うという言い方がされるようになってきたように思えます。
うごメモの方へ
あのうごメモのチャット名でも入力してくださいな「みんなの○○」(ヒント:漢字2文字で地霊殿)
本当はうごメモのユーザー個々に分けてメッセージを作っておきたかったのですが、色々思い出しすぎてしまったので思いついたことをそのまま書き下します。かなりネガティブな内容です。
はてなが運営するうごメモが終了してしまって、はてなIDを取得していない方ともう接触できなくなってしまったのは残念です。 主にボウさんやマエリ氏など、はてなIDを取得していてもほとんどの方ははてな以外の伝達手段がないのが残念です。主にソルナ氏やkanto氏など、twitter先のアカウントもリンク切れになっていたり、ユーザー名の変化などもあり、消息が分からない方もいます。マカ姫は今も元気にしているのか、SkyRuffle氏やライトバグ氏はSkypeで繋がっているので一応大丈夫!?
はてなでちらほらと活動していた痕跡のある方はひっそりと回ってきました。春期休暇でたまたま戻ってきたわけですが、3月9日が誕生日ということで、イラストも何もないですがひななん誕生日おめでとうございます。時折つけてくれていたはてなスターではてなの存在を思い出すことができました。中学のときに一緒にうごメモをやっていたリア友やマカ姫にスイカーマンなどみんなそれぞれの新しい方向にイラストを上達させていて、最近消えかかっていたやる気が復活しました。みんなの活動を見て勝手にモチベが上がったわけですが、ありがとうごいざいます。方向性を磨くという意味では、ひななんの画風が背景や構図などに凝っていてこの数年間でレベルが上がったように見えました。最近はワンドロにも挑戦されてるみたいですが、1枚絵で直したいと思ったところを自分が満足のいくまで修正するまで終われない系ペイント(名前は勝手につけた)を自分なりに勧めてみます。本当の意味で自分の最大限の実力を見るのに適しているかと。
ここ最近の心残りは、ユウアさんのオリキャラを描くという約束が果たせなかったことです。はてな自体のアカウントももうないため、オリキャラを確認することさえできないのが残念です。
もともと地底の掲示板は、みんなの日々の悩み事などを和らげるという意味で方向性が決まっていただけに、否定的な感情を残してそのまま消えてしまったソルナ氏やらのあめ氏にマエリ氏、ボウさんは元気にやっているかは気になります。
2012年ごろ突如活動をはてなどころかSNS全体を通して停止してしまいましたが、久しぶりに後日談でもできればと思います。