CGプログラミング演習
1　Processingに触れてみる

第1回目の講義では、授業の概要の説明を行ったのち、Processing の基礎を学びます。

1　講義の全体予定

CGプログラミングとは
画像処理

点の定義
階調の定義
色彩の定義
描画の定義

映像処理
音響処理
課題制作
課題講評

2　課題説明

2.1　中間課題

プログラミングによるグラフィック表現

2.2　最終課題

追って提示します

3　本日の授業の概要

プログラムによるグラッフィク表現とは

絵筆、絵具、キャンバスなどの「道具」を用いない。
プログラムを道具とする、というよりは道具をプログラムする感覚に近い

Processing とは

MITのベン・フライ Ben Fry が開発したビジュアルプログラミングのための環境

Processing でできること

画像／音声／映像処理
空気の流れのシミュレーションを利用したアニメーション（AudiのCM）
http://www.universaleverything.com/204
ドラムと同期して映像をコントロール
http://www.youtube.com/watch?v=X7JbS5OCGyM&feature=related
リアルタイムで反応し映像が変化するデジタルの鏡
http://vimeo.com/9666035
口ロロ（クチロロ）のミュージックビデオ「CDの読み方」

とりあえず使ってみる

4　Processing を使ってみる

processing.org から Processing をダウンロードする
ダウンロード先から Mac OSX 版をダウンロード

Processing 起動画面。ウインドウ上部のボタンを操作して、プログラムファイルの読み書き、実行／停止を制御する。
・実行（Run）ボタン：プログラムの実行
・停止（Stop）ボタン：プログラムの停止
・新規作成（New）ボタン：新規ファイル（Processingではスケッチと呼ぶ）の生成
・読込み（Open）ボタン：保存された作品の選択
・保存（Save）ボタン：スケッチを保存（別名で保存したい場合はファイルメニューより''save As''を選択）
・出力（Export Applet）ボタン：表示されているスケッチをJAVAアプレットとして出力。

4.1　サンプルプログラムの実行

Processing には、はじめから豊富なサンプルプログラムが同梱されています。
「読込み（Open）」ボタンをクリックして、「Examples...」を選択し、サンプルプログラムを実行してみます。
ここでは「Basics: Color: Reading」を選択してみます。

Processing に同梱されているサンプルプログラムを選択し、プログラムを実行（Run）してみる。
先頭からサンプルプログラム一覧、メインウインドウ、実行ウインドウ。

Processing には、はじめから豊富なサンプルプログラムが同梱されています。「読込み（Open）」ボタンをクリックして、一覧にある「Examples...」を選択し、サンプルプログラムを実行してみます。

4.1　プログラミングの基本

実行の順序：上から順番に読みこまれていく
半角の英数字 (全角はダメ) のみを使用すること
文末にはセミコロン ; を入れる
いろいろな括弧が入れ子構造になっている
おなじ括弧に囲まれている部分がひとつのブロック
最小単位 → 関数
関数名(引数);

4.2　コメント

プログラムにはコメントを付けることができる
コメントは、プログラムの動作とは無関係
プログラミングしている際の留意事項を自由に書くことができる。
コメントすることをコメントアウトという
コメントアウトする時は　/* */　もしくは、コメントアウトしたい行に　//　をつける。

/*
    複数行にわたるコメントです
    何行でもコメントできます
 */
// この後ろに続く文字列がコメント扱いになります

4.3　関数 (function)

引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。
Processing=ビジュアルプログラミングのための関数の集合
関数名とその引数（パラメータ）から構成される
引数の数は関数によって異なる

関数名(引数1, 引数2, 引数3...)

4.4　ピクセル

コンピュータの画面は格子状に並んだピクセルの集合
それぞれのピクセルは赤R・緑G・青Bの三原色から成り立っている

4.5　座標

Processing の座標系では、左上が（0, 0）

Processing の座標系。Y軸の値が大きければ大きいほど、下に進む点に注意すること。

5　Processing を使って図形を描く

5.1　キャンパスの準備と図形の描画

はじめに描画をおこなうキャンパスを準備します。
キャンバスの準備
関数を利用した図形の描画

// キャンバスサイズの指定
// 幅400ピクセル、高さ200ピクセルのウインドウを開く
size(400, 200);

// 点
// 座業（200, 100）に点を描きます
point(200, 100);

// 線
// 座標（25, 175）から（175, 175）に線を描きます
line(25, 175, 175, 175);

// 長方形
// 左上の座標を（225, 25）として、150ピクセルの幅と 75ピクセルの高さを持つ長方形を描きます
rect(225, 25, 150, 75);

// 三角形
// みっつの頂点がそれぞれ（300, 125）（225, 175）（375, 175）の三角形を描きます
triangle(300, 125, 225, 175, 375, 175);

// 円、楕円
// 中心の座標を（100, 90）として、幅 140ピクセル、高さ 140ピクセルの円を描きます
ellipse(100, 90, 140, 140);

上記プログラムで得られる描画。

5.2　色の指定

つづいて色を指定します。
色は R（赤）・G（緑）・B（青）の三原色で指定します
指定の段階は 0〜255
加法混植なので注意すること

左：RGBによる加法混植
右：CMYKによる減法混色

// 背景色の指定
// background(［Rの値］,［Gの値］,［Bの値］);
background(255, 255, 255);

// 線の色の指定
// stroke(［Rの値］,［Gの値］,［Bの値］);
stroke(255, 0, 0);

// 塗りの色の指定
// fill(［Rの値］,［Gの値］,［Bの値］);
fill(255, 255, 0);

// 線を描画しない
noStroke();

// 塗りを描画しない
noFill();

さきほどのプログラムに色の指定を追加します。
色や線塗りつぶしの設定は、それ以降すべての描画に使われます
色を変えるには改めて別の色を設定する命令を入れます

// キャンバスサイズの指定
// 幅400ピクセル、高さ200ピクセルのウインドウを開く
size(400, 200);

// 背景色の指定
background(255, 255, 255);

// 点
stroke(255, 0, 0);
point(200, 100);

// 線
stroke(0, 0, 255);
line(25, 175, 175, 175);

// 長方形
noStroke();
fill(255, 255, 0);
rect(225, 25, 150, 75);

// 三角形
stroke(255, 0, 0);
noFill();
triangle(300, 125, 225, 175, 375, 175);

// 円、楕円
noStroke();
fill(0, 0, 0);
ellipse(100, 90, 140, 140);