LogoMark.png

情報デザイン概論/2020/1130

第10回 コンピュータグラフィクス

情報デザイン概論/2020|地域共創学部|2020.11.30遠隔
情報共有シート|特設サイト

AGENDA


以下、動画をご覧下さい。記事に沿って解説しています。



本日のメニュー




はじめに

遠隔授業の回です。受講生のみなさんには、本日のテーマに関するコメントを求めます。講義の視聴する前に、特設サイトに、以下の雛形をコピーして、今回のテーマ用の「節」を作って下さい。


今回分のコメント雛形 の準備

以下のグレーの部分を、そのままコピーして、特設サイトのあなたのページにペーストして下さい。

==コンピュータグラフィクス|2020.11.30==
===CGと実写の違い===
* ◯◯◯◯◯◯、◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯。
* ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯、◯◯◯◯◯◯。
<br>
===CGアプリの紹介===
* https://www.example.com
* https://www.example2.com
<br>




概要

CG(コンピュータ・グラフィックス)は、大きく2つ、「形状記述」によるものと「手続き記述」によるものとに分類できます。

前者は「頭で思い描いた形を、マウス等を用いて対話形式で作り上げる」というタイプのもので、ペイント系ツール、ドロー系ツール、3DCGツールなどによるCGがそれにあたります。

一方後者は「手順(計算規則)を記述して、コンピュータに自動的に形を生成させる」というタイプのもので、これは、あまり馴染みがないかもしれませんが、例えば、Photoshopのフィルターの雲模様など、乱数によってパターンを自動生成するプロセスなどに 相当します。

2Dラスターグラフィックス

一枚の絵を、小さな点(画素)が縦横に並ぶものとして扱う画像データを、ラスター画像と言います。Photoshopなどのフォトレタッチ、ペイント系ソフトが扱っているのはこのラスターデータで、各点の色の値を入力データとして、様々な画像処理を行うことができます。

ラスター画像は各画素ごとに、R(0-255) 、G(0-255)、 B(0-255)の3つの数値データ(各1バイトの情報量)を持つのが一般的で、縦横の画素数が多くなるほど全体の情報量が大きくなります。例えば、横640pixel縦 480pixelのRGBモードの画像は、640x480x3 = 921,600B つまり約1MBの情報量を持ちます。

JPEG GIF BMP PSDといった拡張子を持つデータはこの形式のものです。

データの具体例

3x2.png

JPEG画像や、Photoshop形式の画像はバイナリーファイル(2進表記)ですが、例えば、汎用のPPM(Portable Pixmap)形式ではテキストファイルとして書くことができます。以下は、右の3X2pixelの画像のPPMデータです。

P3 ← RGBフルカラー PPM形式
3 2 ← 横3pixel 縦2pixel
255 ← 最大値
255 0 0 ← 1画素目の色(赤)
0 255 0 ← 2画素目の色(緑)
0 0 255
255 255 0
255 0 255
0 255 255


主なデータ形式

JPEG [.jpg] (Joint Photographic Experts Group)
PNG [.png] (Portable Network Graphics)
GIF [.gif] (Compuserve Graphics Interchange Format)
WebP[.webp] Googleによる次世代画像フォーマット
TIFF [.tif] (Tagged-Image File Format)
PS/EPS [.eps] (PostScript) *
PDF [.pdf] (Portable Document Format) *
RAW [.raw]   「生の」という意味。色データが単純に並ぶ、最もシンプルな形
PPM [.ppm] (Portable PixMap)
PSD [.psd] (Adobe Photoshop)
BMP [.bmp .dib] (Windows Bitmap)

ソフトウエア紹介

2Dベクターグラフィックス

一枚の絵を、線図形や面図形の集合として考えるようなデータ形式を、ベクターデータと言います。Illustratorが扱っているのはこのベクターデータで、幾何学的な形状の自動生成や、図形単位での移動・回転・拡大縮小をはじめとする様々な変換操作が可能です。
 図形単位に、頂点座標・結線・色属性などのデータを持つため、図形の数が多く複雑になるほど情報量は大きくなりますが、ラスター画像とは異なり、全体サイズの拡大や縮小で情報量が変わることはありません。

CADのデータ(DXF)やIllustratorのファイル(AI)、フォントのデータなどもこの形式です。尚、W3C標準のベクターデータはSVG(Scalable Vector Graphics)という形式のものです。

図形データの具体例

arrow.png

右図のような図形を SVG形式で書くと、以下のようなコードになります。


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
    width="300" height="300"  viewBox="0 0 480 360" >
<g id="g3">
	<polygon points="115.374,0 173.129,0 80.823,92.298 
          276.921,92.298 276.921,138.437 80.823,138.437 
          173.129,230.732 115.374,230.732 0,115.379 115.374,0" />
</g>
</svg>

主なデータ形式

SVG [.svg] (Scalable Vector Graphics : XML)
EPS [.eps] (Encapsulated PostScript) *
PDF [.pdf] (Portable Document Format) *
AI [.ai] (Adobe Illustrator)
[*]マークのものにはベクター・ラスターが共存します。

ソフトウエア紹介

3DCG

3DCGとは、幅・高さ・奥行き(x,y,z)という3つの軸を持つ仮想の空間上に、仮想の被写体・照明・カメ ラを配置して、計算によってカメラから見えるイメージを作り出す技術です。現在では様々な3DCGツールがあり、3次元空間図形に関する数学的な知識がなくとも直感的なインターフェイスでシーンの生成が可能です。3DCGのツールは数多くありますが、現場によって使用するものは様々で、場合によっては、その映画制作のためだけにオリジナルのソフトが開発されて、それが使用されるということも希ではありません。

3DCG の制作工程


主なデータ形式

ソフトウエア紹介

手続き記述型のCG(プログラムによるイメージ生成)

概要

こちらのページで概説します。> GenerativeArt

ソフトウエア

特設サイトへの書き込み

コンピュータグラフィクス

第10回目は、以上をもって終了とします。
第11回は、対面授業となります。教室の方へご出席下さい。




PAGES

GUIDE

DATA

Last-modified: 2020-11-30 (月) 17:26:31