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);
上記プログラムで得られる描画。
5.3 演習
5.3.1 演習その1
- 下記の図形を描画するプログラムを書いてみましょう
- キャンバスサイズはすべて(300, 300)です。
5.3.2 演習その2
- ここまで学んだ内容を利用して、あるグラフィックを描画するプログラムを作成してください。
- 作成するグラフィックは、たとえば平面構成のようなものを想定しています。
- ただし、条件として、キャンバスの高さ/幅を 800 ピクセルとすること。