LogoMark.png

情報デザイン概論/2021/1206

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

情報デザイン概論/20212021.12.06

AGENDA



以下、LIVE動画をご覧下さい。記事に沿って解説します。
記録動画の公開は 12月10日(金)までとします。早めの確認をお願いします。



https://youtu.be/uOq0jjZbq1o

CONTENTS


はじめに

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

ソフトウエア

こちらのページで解説します > Processing
公式サイト:https://processing.org/



ミニッツペーパー

受講生の方のコメント


PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-12-06 (月) 19:03:56