画像ファイルのしくみ


グラフィックスの基本要素=ピクセル

コンピュータの画面はピクセルの集まり

  うんと拡大すると・・・

ひとつひとつのピクセル(画素)は RGB(Red, Green, Blue) の3色の光る部分からなっている。

← これはほんとうはもっと強く光ってしかも小さい(縦横 0.2 mm ぐらい)ので,白い点に見える。

色は数字で表される

ディスプレイのすべての色は RGB 3色の配合だけで決められる。 配合にあたっては,それぞれの色の強さを 0〜255 の範囲で指定するのがふつうだ。 たとえば 255,255,255 なら白を表す(なぜ 255 かというと,2進法で表して 11111111 だからだ。その先の「なぜ?」には,今日はふれない)。

RGB を同じ強さで混ぜ合わせたときにえられる基本的な色としては C (Cyan: シアン), M (Magenta: マゼンタ), Y (Yellow,黄) がある。

RGB_CMY

その他の色ごとの数字の組み合わせを別表に示した。

画像の構造

もういちどまとめると,画像というのは左の図のように RGB で着色されたピクセルが 横と縦にびっしり並んだものに他ならない。

ためしに次のファイルを tiny.ppm という名前のファイルに貼付けてから保存して, それを GIMP で見てみたい。やり方をもういちど説明しておこう。

  1. Meadow メニュー画面の "File" から "Open File" を選ぶ。
  2. ファイル名として "tiny.ppm" と入力する。
  3. Firefoxの画面をクリック
  4. 下の"P3"から始まるテキストを範囲指定して右クリックで「コピー」
  5. Meadowをクリックしてアクティブにする
  6. "Edit" から "Paste"を選ぶ
  7. "File" から "Save" を選ぶ
  8. シェルで ls コマンドを使って,ファイルがセーブされているかどうかを確認する。表示されなかったらだれかに相談してね。
    
    ls
    
    

P3
# Tiny RGB Map
8 6
255
255 255 0 255 255 0 255 255 0 255 255 0 100 250 10 100 250 10 100 250 10 100 250 10 
255 255 0 255 255 0 255 255 0 255 255 0 100 250 10 100 250 10 100 250 10 100 250 10 
255 255 0 255 255 0 255 255 0 255 255 0 100 250 10 100 250 10 100 250 10 100 250 10 
0 255 255 0 255 255 0 255 255 0 255 255 255 50 255 255 50 255 255 50 255 255 50 255
0 255 255 0 255 255 0 255 255 0 255 255 255 50 255 255 50 255 255 50 255 255 50 255
0 255 255 0 255 255 0 255 255 0 255 255 255 50 255 255 50 255 255 50 255 255 50 255

これで画像ができているはずだ。 GIMP で "tiny.ppm" というファイルを探して読み込んでみよう。 前回とちがって,これは直接画像ファイルを Meadow で作っているから,プログラムを 走らせる作業は必要ない。

どうだろうか? 「読み込んだはずなのに見えなーい!」・・・(実はこんなのが → tiny) GIMP の表示でうんと大きく拡大してみよう。

もどる