« ピクセルアート盛り上がりました! | トップページ | 全国専門学科情報科研究協議会に参加中です。 »

ピクセルアートその後

「生物教師の作品集」『いのちのエイズ教育』(完全収録済)は,こちらです。

「生物教師の生物学講座」(ユニークな言葉づかいによる生物学の解説)は,こちらです。

先週は,家庭訪問期間で午後の授業がなく,
「図形と画像の処理」の授業が1回飛んで,
結果的に丸1週間空いてしまいました。

前回ご報告しました「多角形とピクセルアート」実習の
フォローを中心に座学の授業を行いました。
最初に,一人ずつ呼んでレポートを返却しました。
私は,答案返却の際もそうですが,必ず一言評価の言葉を添えて渡します。
寄せてくれる生徒さんの感想の中に,
先生からもらえる「よくできているよ。がんばったね」
を励みに勉強をがんばりましたという内容が多々見受けられます。
このような節目節目での小さな評価活動の大切さを
かみしめているところです。

今回のレポートにおける評価規準は,
結果,考察,感想・意見がきちんと記入できていることです。
多角形やピクセルアートの描画の出来について
+αの部分の評価としています。

その後,一斉授業に入りました。
今回の主眼は,実習を通して生徒さんに
コンピュータグラフィックスにおける
アンチエイリアシング
(ソフトウェア的にはアンチエイリアス)
の重要性を理解させることです。

アンチエイリアシングについて,
現在授業で準教科書として使用している
(「図形と画像の処理の教科書はありません)
『マルチメディア表現-図形と画像の処理-』(実教出版)
には,次のように記載されています。

---------------------------

ペイント系ソフトウエア上で描く線には,
ピクセルが整然と並ぶことによって表されるが
ゆえの特徴があります。
鉛筆ツールで,水平・垂直な線は均―な幅を保って
描くことができるのですが,
斜線や曲線は,階段状にギザギザした状態で
描かれてしまいます。
こうした状態のことをジャギーやエイリアシングなどとよび,
荒れた線のように感じることでしよう。

例えば,ブラシツールで描いた斜線は,描画色(線を描く色)で
ピクセルを階段状に塗ると同時に,背景色(背景の画面の色)との
中間の色で線の周囲を塗っています。
このように、描画色と背景色の中間色のピクセルを加えることによって,
線をぼかした印象にし,見た目でジャギーを
感じさせないようにすることを
アンチエイリアシングといいます。

---------------------------

実際にやってみると,なるほど効果てきめんです。
今回の実習では,描画色は黒,背景色は白ですので,
画面上におけるデータは次のようになります。

描画色 黒( R: 0  G: 0  B: 0  )
背景色 白 ( R:255 G:255 B:255 )

画面上での色すなわち光ですので,
光の三原色である赤(R),緑(G),青(B)の
割合が黒と白では両極端になるわけですね。

さて,ここでアンチエイリアシングに用いる
中間色はどうなるかといいますと

中間色 灰 ( R:128 G:128 B:128 )ですね。
実際に作ってみると,濃いめの灰色になるのがわかります。

最初に,黒でピクセルアートを描いておき,
色を灰色に変えて,階段状になった部分の
まわりに灰色のピクセルを置くとよいわけです。

出来上がった作品を画面上で眺めたり,
印刷したものを見たりすると
なるほど,ジャギー(エイリアシング)が
目立ちません。

応用として,
背景色は同じ「白」の場合,
描画色が「赤」だったら
アンチエイリアシングには何色を用いるか?
みたいな例題をやってみました。
前期期末考査も近づいていますので,
問題演習となると,生徒さんの関心も高まります。

まず,実習でやったケースを次のように板書しました。

描画色 黒( R: 0  G: 0  B: 0  )
 ↓
中間色 灰 ( R:128 G:128 B:128 )
 ↓
背景色 白 ( R:255 G:255 B:255 )

そして,例題のケースを

描画色 赤( R:255  G: 0  B: 0  )
 ↓
中間色    ( R:     G:    B:    )
 ↓
背景色 白 ( R:255 G:255 B:255 )

このように書き,考えさせたのです。

しばらく時間を与え,答え合わせに入りました。
生徒さんは,色については
これまでの経験上,桃色あるいはピンクになる
ことを推測できましたが,
R:G:Bのデータに少し苦労していたようです。

しかし,よく考えてみると
GとBについては,黒-灰-白のケースと同じです。
違うのは,Rだけですが,
これはいずれも255ですから,
中間も同様に255になります。
そのことを説明して,正解を板書しました。

描画色 赤( R:255  G: 0  B: 0  )
 ↓
中間色 桃 ( R:255  G:128 B:128 )
 ↓
背景色 白 ( R:255 G:255 B:255 )

実際に,私もPhotoshopでR:255  G:128 B:128の
色を作ってみました。
どちらかというとあまり美しくない「桃色」といった
感じの色ができました。

このように,R:G:Bのデータを理論的に考えて
中間色を設定することにより,
カラー描画の際もアンチエイリアシングの技術が
黒-灰-白と同じように使えるということを
生徒さん達は理解してくれたようです。

いずれ,本格的なグラフィックス実習に入る際,
大いに役立ててくれるのではないかと期待しています。

また,レポートの考察で出題した
「ピクセルアートは,アンチエイリアスの技法が使えたか。
うまく使えなかったとすると,どうすればアンチエイリアスが
より機能するようになると思うか,考えて書け。」
という課題に対しては,
もちろん,「使えた」という考察も有りであることは
押さえた上で,
黒板に,大きい□をずらしながら上下に並べて,
階段状になった箇所を中間色で埋めた図と,
それよりも小さい□で同様に描いた図とを書き,
どちらがより,ジャギーが目立たないかを
全員どちらかに手を挙げさせて,尋ねてみました。

ある程度の数の生徒さんが,小さい□の方に挙手をしました。
関心・意欲の高さをまず誉め,
今回のように1pixel単位で描画した
ピクセルアートでは,これ以上□を小さくできない
では,どうするか?
とさらに尋ねてみました。
しばらく考えたのち,
「解像度を上げる」という方法を答えた生徒さんがいました。
正解です!

今回の実習では,1時間完結で,という方針もあり
32pixel×32pixelでやりましたが,
これをたとえば128pixel×128pixelでやると
縦・横ともに4倍のpixel数になり
解像度は16倍になることを説明し,
このぐらいの解像度だと
もともとジャギーは目立たないし,
アンチエイリアシングの効果も
さらに高まることを説明しました。

実習でやったばかりの内容であったこともあるのでしょう,
総じて生徒さんの取り組む態度がよく,
充実した1時間の授業にできました。

読まれた方は,押していただくと嬉しいです。(現在第13位にランクイン)
BEST BLOGランキング「教育・学問・科学」部門

|

« ピクセルアート盛り上がりました! | トップページ | 全国専門学科情報科研究協議会に参加中です。 »

「専門教科「情報」」カテゴリの記事

コメント

初めまして。カナダでメディアリテラシーの研究をしている者です。興味深く読ませて頂きました。嘉穂には何度か訪れたことがあります。こんなに情報教育が進んでいたとは、素晴らしいですね!

投稿: 渡辺 | 2006年8月11日 (金) 15時42分

はじめまして。進学塾の講師をしています。
こちらのブログは大変興味深いものですね。
また拝見させていただきたいと思います。
なお私は現在「受験勉強相談室」http://www.purple.dti.ne.jp/jukensoudan/という中学受験・高校受験・大学受験の効果的な受験勉強法や有益な受験情報をまとめたサイトを運営しています。今までの受験指導経験をもとに、どうすれば第一志望校合格という夢が叶えられるかを書きました。学校の成績を確実に上げる方法やお奨めの参考書・問題集の紹介もあります。現在、無料で「算数の問題集」を公開しています。また9月以降「無料インターネット授業」も運営していこうと考えています。もしよろしければ、ぜひお立ち寄り下さい。お待ちしております。

投稿: buchiyamato | 2006年6月29日 (木) 18時27分

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/142253/10627149

この記事へのトラックバック一覧です: ピクセルアートその後:

« ピクセルアート盛り上がりました! | トップページ | 全国専門学科情報科研究協議会に参加中です。 »