マルチメディア基礎 Professor Nishi's Lectures

マルチメディア基礎

メディアサイエンス概論

（第 6 回　 5 月 22 日 )

西 宏之

授業計画 ( シラバスより )

① オリエンテーションにより，メディアの種類と概念を学ぶ→【復習】プログラミング環境 (Visual Studio Comunity) を各自 インストール

② 色情報がコンピュータ上でどのように表現されているかを学び，色情報を加工するための基礎知識を身に付ける．光の三原 色，えのぐの三原色の関係を理解する．

③ 上記の理解度小テスト１を実施する． Visual Studio Community のインストール方と使い方を学ぶ．→【復習】講義中に作 成開始した簡単な画像表示プログラムを完成

④ 理解度小テストの復習・振り返りを行うとともに，写真表示プログラムの練習問題を完成させる． →【復習】講義中に作 成開始した簡単な画像切り替え表示プログラムを完成

⑤ Visual Basic の基本的文法を学ぶ．繰り返し処理，判断分岐，ピクセル情報の読み込み，書き出し方法を学ぶ． その知識 を基に，カラー画像をモノクロ化する手法を学ぶ．→【復習】講義中に作成開始したモノクロ化プログラムを完成させるこ と

⑥ モノクロ化プログラムを作成する．→【復習】講義中に作成開始したモノクロ化プログラムを完成

⑦ ネガポジ反転処理およびしきい値処理による，二値化画像作成処理を学ぶ．ネガポジ，二値化プログラムを作成する．→

【復習】二値化プログラムの完成．

⑧ 色画像情報を加工して，色合いや画像の雰囲気を変更・加工するアイデアを考案する．それに基づく，プログラムを企画す る．→【復習】これまでに学んだ知識を組合せ，さらにアイデアを盛り込んだ画像処理プログラムを考案し，プログラム作 成を開始する．

⑨ これまでに学んだ，画像処理および独自のアイデアを盛り込んだ画像処理プログラムを完成させる．→画像処理プログラム

「レポート１」提出

⑩ ゲームプログラミングの構成と考え方を学ぶ．→【復習】各自，自分が知っているゲームがどのような計算機能を行ってい るかを分析しておくこと．

⑪ ゲーム処理に必要なタイマー管理とそのプログラミング作法を学ぶ．→【復習】タイマー管理技法を応用して，「ストップ ウオッチ」プログラムを作成

⑫ ゲーム処理に必要な乱数発生とそのプログラミング作法を学ぶ．→【復習】乱数発生技法を応用して，「ビンゴ」プログラ ムを作成

⑬ ゲーム処理に必要なサウンド再生機能とそのプログラミング作法を学ぶ．→【復習】サウンド再生機能を応用して，音楽プ レーヤーアプリを作成

⑭ これまでに学んだ，技法を応用したモグラたたきゲームプログラムを作成する．→これまでの理解度小テスト２を行う

⑮ モグラたたきゲームに，ハイスコア表示など独自の機能を付け加える企画を行い，そのプログラム作成を開始する．→【復 習】独自機能を追加したモグラたたきゲームを作成する．

⑯ 企画した独自機能付きモグラたたきゲームプログラムを完成する．→【復習】継続して独自機能を追加したモグラたたき ゲームを作成し， 「レポート２」提出

レジメを置いているサイト

 「崇城大学 西研究室」で検索

 _{↓ ↓ ↓}

 _{「リンク」}

 _{↓ ↓ ↓}

 「西担当科目の講義録ページ」

 _{↓ ↓ ↓}

 左側のメニューで「マルチメディア基礎」

今日のポイント確認

 画像処理の基本中の基本

 取ってきて→加工して→置く

 _{これを繰り返す．}

 _{モノクロ化の復習}

 _{モノクロとは？}

 → 色合いがないこと．別の言い方をすると．．．

 _→RGB がすべて同じ値になっていることです．

 例： R=120, G=120, B=120

 例： R=57, G=57, B=57

 上の２つの例は何が違う？

３種類の画像処理

① _{モノクロ化}

① 変換元ビットマップオブジェクトの RGB 各値の平均値

を求める

② その平均値から RGB すべてに代入した色を作る

③ それを返還先のビットマップオブジェクトに描画する

② ネガポジ変換

① 変換元ビットマップオブジェクトの RGB 色情報を取得

し， 255 から引き算 ( 反転 ) した値を RGB 値としてもつ

色を作成する．

② それを変換先のビットマップオブジェクトに描画する

③ 2 値化

① 変換元ビットマップオブジェクトの RGB 各値の平均値

を求める

② その値があるしきい値より大きければ，白に，小さけれ

ば黒に設定する．

③ それを変換先のビットマップオブジェクトに描画する

④ 他にもいろいろある．自分でも考えて見よう．

作成するプログラム

ネガ反転して右の

画面に表示

FAX _{のような白黒}

画像にして右画面

に表示

モノクロ画像にして右の

画面に表示

処理対象の画像ファイル

を読込み左の画面に表示

注意事項

 ピクチャーボックスの SizeMode プロパティ

は

 _Normal にしておくこと（重要）

 StretchImage では正しく表示されないだけでな

く，エラーが出る．

 BorderStyle プロパティは Fixed3D がおしゃれ

 _Visible プロパティは True に

 しきい値 (0 ～ 255) の白い箱

 ₍ 今日は配置するだけ )

 _{TextBox コントロールを使う}

画像処理の流れ

① _読み込み

① 元画像ファイル名を取得する

② 取得した画像ファイルを新規のビットマップオブジェク

トとして宣言する

③ 画像処理用の変数をカラー構造体として宣言し，元画像

用ピクチャーボックスに表示する．

② 取得した画像ファイルのビットマップオブジェク

トから 1 つの点の色情報を取得する．

③ _{取得した色情報を 画像処理} する． ( ここがキモ )

④ 画像処理した色情報を描画する

⑤ 上記②～④をすべての点について繰り返し 処理す

⑥ る． _保存

① 処理した画像を新規ファイル名で保存する

作成するプログラム

ネガ反転して右の

画面に表示

FAX _{のような白黒}

画像にして右画面

に表示

モノクロ画像にして右の

画面に表示

処理対象の画像

ファイルを読込

左の画面に表示 み

「読み込み」ボタンのソースコー

ド

OpenFileDialog コントロールを使う～読み込みボタンクリック時

の動作

Dim fname As String ～ファイル名を格納する文字列型の変数名を宣言

OpenFileDialog1.Filter = "JPeg Image|*.jpg|Bitmap Image|*.bmp|Gif Image|*.gif “

' ～ファイル名を表示する際に特定の拡張子のファイルだけを表示

OpenFileDialog1.ShowDialog()

' ～これが，ダイアローグ

fname = OpenFileDialog1.FileName

' ～取得したファイル名を宣言した変数に代入

Dim bmpa As Bitmap = New Bitmap(fname)

' ～指定されたファイル名の中身画像を格納する

' ビットマップ構造体を宣言

PictureBox1.Image = bmpa

' ～ビットマップの中身をピクチャーボックスに表示

作成するプログラム

処理対象の画像フ

ァイルを読込み

左の画面に表示

ネガ反転して右の

画面に表示

FAX _{のような白黒}

画像にして右画面

に表示

モノクロ画像にし

て右の画面に表示

画像処理の定石

 ① 取ってきて→②加工して→③置く

 _{① ～③を繰り返す．}

 左のピクチャーボックスから，一つのピクセルの

色情報を取って来て．．．

 _{それに加工をして}

 加工した色情報を右のピクチャーボックスの同じ

場所に置く

 _{繰り返し処理が必要}

繰り返し処理の原理： For 文を

使う

For i = 0 To PictureBox1.Width - 1

For j = 0 To PictureBox1.Height - 1

iroa = bmpa.GetPixel(i, j) ' ～元画像のビットマップオブジェクトから 1 つの点の色情報を取

得する．

　　　　　「 iroa 」に対する色情報の加工を行ち，その結果を「 irob 」に入れる

bmpb.SetPixel(i, j, irob) 　　‘ ～それを変換先のビットマップオブジェクトにセットする

Next

Next

PictureBox2.Image = bmpb ‘ ～最後にビットマップをピクチャーボックス２に貼付る

i _方向

j _方向

二重の for 文

i _{が横方向の増}

加

j _{が縦方向の増}

加

PictureBox1.Width _{って何を表すか？}

「モノクロ」ボタンのソースコー

ド

① まず，宣言

Dim bmpa As Bitmap = PictureBox1.Image

Dim bmpb As Bitmap = New Bitmap(PictureBox1.Width, PictureBox1.Height)

Dim iroa, irob As Color

Dim heikin, i, j As Integer

② 繰り返し処理は FOR NEXT 文で回す

For i = 0 To PictureBox1.Width - 1

For j = 0 To PictureBox1.Height - 1

iroa = bmpa.GetPixel(i, j)

' ～ 元画像のビットマップオブジェクトから 1 つの点の色情報を取得する

．

heikin = Int((Val(iroa.R) + Val(iroa.G) + Val(iroa.B)) / 3)

' _～ 変換元ビットマップオブジェクトの RGB 各値の平均値を求める

irob = Color.FromArgb(heikin, heikin, heikin)

' ～ その平均値を RGB すべてに代入した色を作る

bmpb.SetPixel(i, j, irob)

' ～ それを返還先のビットマップオブジェクトにセットする

Next

Next

PictureBox2.Image = bmpb ' ～最後にビットマップをピクチャーボックスに貼付

る

heikin = Int((Val(iroa.R) + Val(iroa.G) + Val(iroa.B)) / 3)

この行の意味は？

Int は整数データにする関数

Val は構造体のデータを 0 ～ 255 の計算可能な値に変換する

～赤、緑、青の各色の強さの平均値を求めている 関数

irob = Color.FromArgb(heikin, heikin, heikin)

この行の意味は？

～求めた 平均値をコピー先の R 、 G 、 B すべてに代入している。結果

的に右の画面の色は赤、緑、青の値が同じ、つまり色合いが「無

い」灰色になっている。

作成するプログラム

処理対象の画像フ

ァイルを読込み

左の画面に表示

ネガ反転して右の

画面に表示

FAX _{のような白黒}

画像にして右画面

に表示

モノクロ画像にして右の

画面に表示

作成した画像を保存

「保存」ボタンのソース

Dim fname As String

Dim bmpb As Bitmap = PictureBox2.Image

SaveFileDialog1.Filter = "Bitmap Image|*.bmp"

SaveFileDialog1.ShowDialog()

fname = SaveFileDialog1.FileName

bmpb.Save(fname)

終了ボタンは？

 Me.Close() _でよい

 さあ，動かして見よう．

 _{うまくいったかな？}

プログラミングの流れのまとめ

① _{フォームの作成}

 新規作成で自動的に作られる

② _{コントロールの配置}

 ぱっと見の体裁を整える。

③ _{プロパティの設定}

 各コントロールのプロパティを設定し初期状態の動作と

見栄えを決める

④ _{コーディング}

 基本的には，この講義録のソースを張り付けるだけ

 コントロール名やプロパティ名は最初の 2 文字くらい入

力すると，候補が出てくるので欲しいものをダブルク

リックすると簡単に入力できる．

注意点

 ちょうどよい大きさの画像がなかなかないの

で，講義録サイトのサンプル画像を使って。

 コメント文は文の頭に ' _をつける

 それでは，作成して見よう

練習問題

 「モノクロ化」ボタンの隣に「暗くする」ボ

タンを配置しなさい．

 モノクロ化のコード画面に 1 行だけ追加し，

「暗くする」ボタンをクリックすると，モノ

クロ画像を半分程度の暗さにして表示するプ

ログラムを作りなさい．