【OpenCV】3つの擬似濃淡変換（ディザリング）の解説【Python】

擬似濃淡変換（ディザリング）とは 様々な画像処理の中に、擬似濃淡変換（以下ディザリング）というものがあります。 このディザリングは2値を扱うという特徴があり、「0」と「255」の2つの値しか扱いません。こういった画像は、2値画像といいます。 基本的な2値画像は例えばこういったものです。 こうすることによって、データ量を少なくすることができますが、やはり「0」と「255」しかないということで、画像のなめらかさは失われています。 そこで、ディザリングを使って、基本的な2値画像では再現できない画像のなめらかさを、少し複雑なアルゴリズム（仕組み）によって再現してあげます。 今回は普通の2値画像の紹介も含めて、3つの有名なディザリングを紹介していきたいと思います。 そして今回しようする画像はオープンソースの画像で、先ほど2値化された状態で紹介しましたが、こちらになります。 ファイル名は「lena.jpg」にしました。 もはやお馴染みですね。 普通の2値画像 まずは2値化する際に、ソース画像をグレースケール化してカラーチャンネルを1つにします。 次に、閾値（しきいち）を定める必要がありますが、一般的には閾値を「128」にするので、「128」に設定します。これは、「0」と「255」の中間の値です。 そして、画素値がこの閾値未満なら「0」に、以上なら「255」に変換してあげます。 [crayon-5c3864e72db46233914038/] 結果 先ほども言いましたが、やはりなめらかさが欠けていますね。 ここからは、ディザリングを行なっていき、なめらかさを再現していきます。 ランダムディザリング ランダムディザリングでは、閾値（しきいち）を乱数で生成します。その他は同じ方法です。 [crayon-5c3864e72db52636115205/] 結果 先ほどの2値画像よりかなり見栄えが良くなりました。 ノイズの向こうに綺麗な画像がありそうな感じを受けます。 誤差拡散ディザリング 誤差拡散ディザリングでは、2値化した際に生じる誤差を次の画素値に反映させます。 [crayon-5c3864e72db57478724706/] 結果 ランダムディザリングよりさらになめらかになり、より画像の詳細な情報を知ることができるようになりました。 組織的ディザリング

【保守性とは】Javaで「private」を使うメリット

保守性のあるプログラム [crayon-5c35c1e8e1a3b834980109/] 結果 [crayon-5c35c1e8e1a43124350462/] このプログラムでは、「Test」クラスの変数「_x、_y」（初期値0）に値を設定することで、割り算結果を得ることができます。 「Main」クラスでは、その「Test」クラスをインスタンス化した後、「_x、_y」の値を設定し、割り算結果を得ています。 保守性のないプログラム 次は、保守性ないプログラムを記述していきます。 つまり、先ほどの「_x、_y」を「public」にして、「set」関数も無くします。 [crayon-5c35c1e8e1a46940526850/] 一見先ほどのプログラムより行数も減って、よくなったと思うかもしれませんが、これが落とし穴になります。 その2つの例を順に見ていきましょう。 変数名を変更した時の落とし穴 ではここで、「Test」クラスの「x、y」変数の名前を変えてみます。 「x、y」ではなく、「div1、div2」にしてみたいと思います。 [crayon-5c35c1e8e1a49281905410/] この状態でコンパイルすると、以下のようなエラーが発生しました。 [crayon-5c35c1e8e1a4b010006859/] 内容を確認すると、「Main」クラス内で存在しない変数を扱っていると言います。 具体的には、「x、y」の名前のまま使ってしまっているということです。 なので「Main」クラス内のプログラムも変更する必要があります。 [crayon-5c35c1e8e1a4e098556084/] これでエラーはなくなりましたが、余計な作業を生み出してしまいました。 これがもし保守性のあるプログラムで書かれていたら、「Main」クラス内で変数名を修正することはありませんでした。 今回の例では修正する箇所が少なくて済みましたが、もし大きい規模のプログラムで同じことをやってしまったらどうなるでしょうか。 これが1つ目の落とし穴です。 割り算での落とし穴 次に、割り算をする際に「0」で割ってみたいと思います。 具体的には、「div2」の値を「0」にします。 [crayon

【OpenCV】ヒストグラムを作って画像の特徴を知る方法【Python】

ヒストグラムとは ヒストグラムは、画像内の画素値の度数分布を表したもので、画像の大まかな特徴や偏りを調べるためのものです。 例えばこの画像 出典： このように雲や空などが大部分を占める明るい画像だと、ヒストグラムはこのようになります。 左から右に、0〜255となっていくのですが、このヒストグラムを見ると255に近い画素値がかなり多いことがわかります。 逆に暗い画像だと、左（0に近い方向）に山が集中します。 こういった風に画像の特徴を知ることができる、それがヒストグラムです。 OpenCVでヒストグラムを作る プログラム（Python） 使用する画像 [crayon-5c34705d1843b455634456/] 結果 解説 ヒストグラムを作成する際は、画像として作成するので、まず最初に画像配列を作成します。 画像配列は「numpy.ndarray」型となるので、「numpy」の「zeros」関数で、初期値「0」の画像配列を作成します。 次に、「calcHist」関数を使って度数分布を求めていきます。 第1引数： ソース画像配列。「[]」で括ることによって、画像配列データとして認識させる。 具体的には、「numpy.ndarray」型から「list」型へ変換する。 第2引数： チャンネルの種類。[0]なら青、[1]なら緑、[2]なら赤を調べる。 ソース画像がグレースケールなら[0]を指定する。 第3引数： マスク画像。マスク画像を指定しない場合は、「None」を指定する。 第4引数： ビン（階級）の数。今回は全画素値を調べるので、[256]を指定。 第5引数： 計測する画素値の範囲。今回は全画素値を調べるので、[0, 256]を指定。 「calcHist」関数で返ってくる値は「numpy.ndarray」型で、256個の配列の中に各画素値の度数が代入されています。 ヒストグラムが取得できたら、描画に移ります。 今回は「line」関数で縦線を256本描画して、棒グラフを作成していきます。 「line」関数の引数には、描画対象となる画像と、始点・終点、そして線の色が入ります。 青・緑・赤チャンネルのヒストグラムを作成

Javaのクラスとインスタンスが絶対にわかる3つのポイント

クラスとは Javaで作られるアプリケーションは、クラスという部品が集まってできています。 例えば、「Button」クラスや「Label」クラスなどがわかりやすいと思います。 ボタンに関する処理は「Button」クラスで、ラベルに関する処理は「Label」クラスで行う、といった風に、それぞれに役割がある場合にクラス単位で処理を分けます。 クラスのインスタンス クラスを定義した段階では、クラスを実体化していません。 このように、クラスを宣言した段階では「あるだけ」の状態です。 ここから「車」を作るためには「実体化」する必要があります。 その「実体化」がインスタンス化ということです。 メモリには当然限りがあります。 なので、メモリ領域を使う情報の中で、無駄なものがあると困ります。 そこで、必要なものだけを実体化します。 そうすることによってメモリの節約ができるのです。 また、この考え方はプログラミングにおいてとても重要なので、なるべくメモリの無駄遣いをしないようなプログラミングを心がけるのが良いです。 スタティックなもの スタティックな変数や関数は、「汎用的なもの」に対して宣言されることが多いです。 例えば「KeyEvent」というクラス。 このクラスには様々なスタティック変数が定義されています。 「VK_RIGHT」や「VK_LEFT」、「VK_UP」に「VK_DOWN」などなど。 これらはキーコードの値を示しています。 こういった汎用的なものは、わざわざインスタンス化する必要がないため、スタティックとして定義されています。 まとめ ・インスタンス化は、「汎用的」な意味をもつ「車」や「人」などを実体化させる行為。 ・インスタンス変数・関数には、「車の名称」や「人の名前」などの、具体的な情報が割り当てられる。また、こういった変数・関数は、動的なものと呼ばれる。

【入門シリーズ】JavaゲームプログラミングPart17

前回 http://itech-program.com/?p=896   今回からいよいよゲーム制作に入っていきます。 ゲームはシューティングゲームを作っていきます。...

【OpenCV】ルックアップテーブルを用いた階調変換【Python】

[mathjax] ルックアップテーブルとは 例えば、ネガポジ転換と呼ばれる手法では、 \(f(x) = 255 - x\) この式をルックアップテーブルにセットし、ソース画像のすべて...

【入門シリーズ】JavaゲームプログラミングPart16

前回 http://itech-program.com/?p=874   CSSで装飾 JavaFXでは、コントロールをCSSで装飾することが可能です。 今回は、プログ...

【入門シリーズ】JavaゲームプログラミングPart15

前回 http://itech-program.com/?p=678 前回までで、図形や画像を描画してきましたが、今回はJavaFXの「コントロール」という機能を使って、「ボタン」や「ラベ...

【Java】コマンドプロンプト・ターミナルがフィールドの、STGを作ろうPart1

作るものの紹介   作る前に、まずどんなものを作っていくのかを把握しておく必要があるので、以下の動画をご覧ください。   [video width='1920'...

JavaFXかんたん風船アクションを作ろうPart5【最終回】

〜ゲームの仕上げ〜

JavaFXでかんたん風船アクションを作ろうPart4

〜画面遷移〜

JavaFXでかんたん風船アクションを作ろうPart3

〜障害物に関する処理〜

JavFXでかんたん風船アクションを作ろうPart2

〜プレイヤー（風船）の操作〜

JavaFXでかんたん風船アクションを作ろうPart1

〜プログラムの骨格〜

【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart3【最終回】

前回Part タイトル画面の作成 前回までで、ゲームの基本が完成しました。 ここからはゲームの仕上げに入っていきます。 そこでまず必要なのが「タイトル画面」です。 プログラムを実行した時に、まず初めにタイトル画面が出てきて、そこで「はじめる」を選択するとゲームが開始する。 ゲームオーバーしたらスコアの結果が表示されて、何かキーを押すとタイトル画面に戻る。 今回はタイトル画面はもちろん、こういった画面遷移処理のやり方も一緒に紹介していきます。 まずはタイトル画面のイメージ（構想）です。 もちろんまだ足りない部分はありますが、おおまかにはこれを目指していきます。 タイトル画面を表示する [crayon-5c2891956d967220303511/] まず、「enum」というキーワードが新たに出てきました。 この「enum」というのは、列挙型を定義する際にしようします。 今回のように「Title」「Game」「Result」と、3つの画面の種類を「列挙」しています。 絶対に「enum」を使わないといけない理由はないのですが、「enum」にした方が見やすいというのは言えると思います。 それから文章の記述量も少ないので楽です。 [crayon-5c2891956d975503371822/] 確かに個人差はあると思いますが、私は「enum」の方が見やすいです。 それから「初心者」の方はこれを機に「enum」を学べると思いますので、「enum」の使用をおすすめします。 では、「enum」の使い方ですが、「enum」で列挙型を定義したら「列挙型の変数」を作成します。 [crayon-5c2891956d978693837293/] 列挙「型」ですので、列挙型の変数が作れます。 そしてこの変数の使い方ですが、若干間違えやすいポイントがありますので、しっかり確認していきます。 [crayon-5c2891956d97a317773734/] switch文の中のcase文で「Screen.」と書いてしまいがちですが、case文では「Screen.」は必要ないので注意しましょう。 「enum」の解説はこれで以上です。 その上でプログラムを見てみましょう。

【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart2

前回のPart 障害物の処理 前回まででプレイヤーの基本操作が完了しました。 今回は障害物の処理を書いていきます。 Obstacleクラスを作る 「Obstacle.java」というファイルを作り、そこに「Obstacle」クラスを定義していきます。 ちなみに「Obstacle」は「障害物」の意味で、今回作る障害物は矩形です。 では「Obstacle」の持つ基本情報をまとめてみます。 では、実際に実装をしていきます。 [crayon-5c289199391b2578437184/] Obstacleクラスの関数を定義する 次は、障害物を生成し、描画するところまで実装していきます。 障害物の生成に関しては、今回は簡略化し、まず先に「Obstacle」クラスが機能するかを確かめていきます。 [crayon-5c289199391bc495347550/] [crayon-5c289199391bf516775319/] 結果： 赤い矩形が描画されていたら成功です。 障害物にランダムな値を設定する これで「Obstacle」関数が機能したわけなので、障害物にランダムな値を設定していきます。 さらに、障害物の生成にも工夫を加えていきたいと思います。 まずランダムな値ですが、障害物がどこから出てくるのか（Y座標）、障害物の形はどうなのか（幅・高さ）、障害物の色は何色か、障害物の速度（X方向の速度）はいくらか。 これらに関してはランダムな値を設定することにします。 ゲーム性が増しますからね！ [crayon-5c289199391c4926673412/] Y座標や幅・高さなどの式が少し複雑に見えるかもしれませんが、以下の画像を参考に好みで調整してみてください。 色を決定するには、「赤・緑・青」の成分の値をそれぞれ設定する必要があります。 ちなみに、色の合成は光の3原色ですのでご注意を。 そして「move」関数内での更新処理ですが、「x -= vx」となっています。

【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart1

今回は、シリーズ「JavaFXでかんたん風船アクションゲームを作る」の第1回目です。 このシリーズでどういったゲームを目指しているかは、こちらの動画を是非ご覧になってください！！ 1000点は意外と厳しい感じです。 私が下手なだけかもしれませんが・・・。 プログラムの骨格を作る ウィンドウを表示する [crayon-5c2891998d8f2877026148/] 結果： ダーク・タコイズ色のウィンドウが出てきました。 ダーク・タコイズにした理由は、空の色に似ているからというだけなので、色はご自身の好みでどうぞ。 さてウィンドウの作成ですが、「JavaFX」では「Stage」クラスというのを用います。 この「Stage」がウィンドウのことで、その上に「Scene」を乗せます。 「Scene」にはボタンやラベル、その他様々なノードを乗せることができ、 以下で説明する「Canvas」ももちろん乗せることができます。 「Stage」にその「Scene」を乗せるには「setScene」関数を用います。 この関数の引数は「Scene」型なので、作成した「Scene」を代入しましょう。 最後にウィンドウの表示ですが、これは「show」関数を呼び出すだけです。 行数があまりかからないのでいいですね。 Canvasをセットする 次は「Canvas」をセットします。 この「Canvas」に風船（プレイヤー）や障害物などを描画していきます。 [crayon-5c2891998d8fd057585594/] 結果に変化はありませんが、これで「Canvas」をセットできました。 「Canvas」をインスタンス化するところですが、引数は「Canvas」の幅・高さです。 今回はウィンドウ目一杯を「Canvas」にしたいのでウィンドウサイズと同じにします。 そして「GraphicsContext」を取得するところですが、この「GraphicsContext」というのは「Canvas」に様々なものを描画する際に役立ちます。というより、これを使わなければ描画はできません。 そしたら最後に、その「GraphicsContext」を使ってなにかを描画してみましょう。 円と矩形を描画する

【シリーズ】JavaFXで電卓を作ろう！！Part2【最終回】

前のPart 数字を電卓に表示させる 全てのボタンをリンクさせる 前回ボタンをリンクさせる方法を紹介しました。 なので今回、全てのボタンをリンクさせていきます。 [crayon-5c289199e78a7580038441/] このように全ての変数を宣言しました。 あとは「main.fxml」に、変数と「onClick」関数をリンクをさせていきます。 ここからはなかなかしんどい作業ですが、時間がない人はこちらをどうぞ。 （リンク作業が完了しているファイル） ボタンによる操作を記述する ここからは「onClick」関数を編集し、ボタンを押した時に数字が表示されるようにしていきます。 「1」ボタンが押されたら「1」を表示する。 そのあとに「3」ボタンが押されたら、「13」と表示する。 こういったプログラムを組んでいきます。 そのためには、何のボタンが押されたのかを知る必要があります。 そこで「onClick」関数の引数に注目です。 「onClick」関数の引数は「ActionEvent」型です。 そう、つまりこの「ActionEvent」クラスの関数を使えばどのボタンが押されたのかを知ることができるんです。 [crayon-5c289199e78b1736698587/] 「getSource」関数です。この関数を使えばどのボタンが押されたのかを知ることができます。 「getSource」関数でボタンの情報を取得し、「equals」関数で判別を行います。 このプログラムを実行したときに、 [crayon-5c289199e78b3373338232/] このように表示されれば成功です。 これを利用して数字を「TextField」に表示するプログラムを書いていきます。 [crayon-5c289199e78b4219896819/] 「TextField」に表示する文字列を保存するための変数「str」の語尾に数字を入れていきます。 こうすることでボタンによる数字の入力を実現することができます。 あとはこれを「0〜9」まで書いていきましょう。 [crayon-5c289199e78b6004089304/] 電卓で計算をする

【シリーズ】JavaFXで電卓を作ろう！！Part1

今回からシリーズ「JavaFXで電卓を作ろう！！」をやっていきます。 JavaFXによる電卓の作り方を知れば、JavaFX自体もよく知ることができます。 JavaFX Scene Builder 2.0を導入しよう！ JavaFXでレイアウトを作る上において、JavaFX Scene Builder 2.0は絶対に必要です。 以下のURLからダウンロードしてください。 バージョンは2.0なので、間違えないようにしてください！ 上の画像をよくみて、間違えないようにしてください。 ダウンロードできたら、インストールしてください。 インストールが完了したらJavaFX Scene Builder 2.0を開きましょう！ レイアウトの作成 これが完成図です。 これを目指して作っていきます。 AnchorPaneを用意する まず「AnchorPane」を用意します。 これは、電卓のボタンやテキストフィールド（答えを表示する場所）を貼り付けるための土台です。 このように、「AnchorPane」をドラッグして貼り付けてください。 土台ができたらボタンの貼り付けに移ります。 ボタンを貼り付ける ボタンは「Controls」にあります。 このボタンも、先ほどと同様にドラッグして貼り付けます。 そしたら、「Button」という文字が表示されている状態なので、「1」や「2」などの数字に変えていきましょう。 それから、ボタンのサイズも変更していきましょう。 ボタンの文字を変更するには、ボタンをダブルクリックして、直に書き込むやりかたと、「Properties」の「Text」欄を変更するやりかたの二つがあります。 まずはダブルクリックのやり方です。 ダブルクリックすると、文字が編集可能になります。 次に、「Properties」からの変更です。 矢印で指した場所から変更が可能です。 ちなみに、「Properties」からフォントや文字の大きさも変えられるので覚えておきましょう。 ボタンのサイズを変更する ボタンのサイズ変更は直感的に出来ます。

JavaFXでWebブラウザを作る！！【解説】

JavaFXで「Webブラウザ」を作っていきます！ 「Webブラウザ」でも、JavaFXなら特別な知識はいらず、簡単に作れてしまいます。 まずは完成品を紹介します。 「戻る」「進む」ボタンに、「URL指定欄」、「リロード」ボタン、そしてページを表示する領域があります。 これから、この完成品を目指してプログラムを書いていきます。 WebViewを表示する JavaFXでは、「WebView」というクラスが用意されているので、まずは「Stage」にこれを貼り付けていきます。 [crayon-5c289197a669c754814945/] これで「WebView」を貼り付けることができましたが、実行してみると真っ白な画面が出てくるだけです。 これは、どのページを表示するかが指定されていないのが原因なので、ページのURLを指定してあげる必要があります。 そういった処理をするには、「WebEngine」というクラスを用います。 WebEngineでページを指定する [crayon-5c289197a66a5775467888/] 「WebEngine」のインスタンスを取得するには、先ほど作成した「WebView」のインスタンスから、「getEngine」という関数を使って取得し、ページの読み込みは「WebEngine」クラスの「load」関数を使い、引数にURLを指定します。 さぁそして、実行した結果はどうでしょうか。Googleの検索ページが表示されて、既にらしくなってきましたよね。 URLをブラウザから指定する 「WebEngine」クラスの「load」関数にURLを指定するだけでWebページが表示されました。 ということは、テキスト領域を用意して、入力された値を「load」関数の引数にすれば、ブラウザからURLを指定することが可能になりそうです。 というわけで、「TextField」クラスを使って実現してみます。 [crayon-5c289197a66a8844931298/] まずは上のバーを設置し、テキスト領域を貼り付けます。 そして「WebView」の位置も少し下げました。 これでテキスト領域を設置は完了しました。