グラフィックスの世界第 3 回 サイバーメディアセンター サイバーコミュニティ研究部門安福健祐
Processing によるアニメーション
setup と draw void setup() size(400, 400); void draw() ellipse( mousex,mousey,100,100); void とか setup とか draw とかはじめて見る が出てきてややこしい ellipseは円描く関数でした mousex, mouseyは特別な変数のようだ
関数を定義 関数の書き方 void setup() 命令 ; 関数を自分で作ることができる voidは戻り値がないという意味 ( 今はとりあえず無視 ) setupが関数の名前 通常 関数の名前は自由でつけるが setup と draw は特別! setup は最初に 1 回呼び出される関数 draw は画面が更新される度に繰り返し呼び出される関数
setup と draw void setup() size(400, 400); void draw() ellipse( mousex,mousey,100,100); setup というのは 最初に1 回だけ実行される 特別な関数 draw というのは 繰り返して実行される 特別な関数 関数内で実行されるプログラムを で囲むのがルール void は戻り値がないという意味だが とりあえず無視
画面を繰り返し更新するプログラム void setup() size(400, 400); void draw() background(255); ellipse( mousex,mousey,100,100); 繰り返し実行される draw() の最初に 背景を白くする処理を追加 255 は白という意味
クリックした時に画面をクリア void setup() size(400, 400); void draw() if( mousepressed ) background(255); ellipse( mousex,mousey,100,100); マウスのボタンを押したときだけ背景を白くする 変数 mousepressed はマウスのボタンが押されていたら値がtrue (1) になっている 押されていないときはfalse(0) になる if 文とは
if 文 if 文の書き方 if( 条件 ) 命令 ; () 内の条件が成り立てば ( 真であれば ) 内の命令が実行される 演算子 意味 例 > 大なり If( a > b ) >= 大なりイコール If( a >= b ) < 小なり If( a < b ) <= 小なりイコール If( a <= b ) == イコール If( a == b )!= ノットイコール If( a!= b ) if( a=0 ) とすると変数 a に 0 が代入されるだけ
マウスボタンを押したとき図形を描く void setup() size(400, 400); void draw() if( mousepressed ) ellipse( mousex,mousey,20,20); マウスのボタンを押したときにカー ソルの位置に図形を描く
キーボード ( 矢印 ) で図形を動かす int x = 0; void setup() size(400, 400); void draw() background(255); if( keypressed && keycode == RIGHT ) x += 10; if( keypressed && keycode == LEFT ) x -= 10; ellipse( x, height/2, 20, 20); キーボードの を押すと図形が右に動く キーボードの を押すと図形が左に動く
キー入力処理 キーボードのキーが押されているかチェック 何かキーが押さたとき 変数 keypressed が真 (1) になる 何もキーが押されていない場合は偽 (0) 矢印キーの種類 変数 keycode には矢印キー等の種類格納されている 変数 key には文字の種類が格納されている keycode UP DOWN RIGHT LEFT キーボード
グローバル変数 図形の x 座標は draw 関数繰り返し呼ばれている間 値が保存されている必要がある グローバル変数を使う グローバル変数 どの関数からも値を参照できる変数 関数の外で定義する ローカル変数 関数内からしか値を参照できない変数 関数内で定義する void setup() size(400, 400); void draw() int x = 0; background(255); if( keypressed && keycode == RIGHT ) x += 10; if( keypressed && keycode == LEFT ) x -= 10; ellipse( x, height/2, 20, 20); ローカル変数にするとうまく動きません
練習 2: 上下にも図形を動かす 図形を上下左右にも動くようにプログラムを追加してください キーボードの を押すと図形が右に動く キーボードの を押すと図形が左に動く キーボードの を押すと図形が下に動く キーボードの を押すと図形が上に動く
補足 2: 特別な関数 void keypressed() void keyreleased() keypressed は 何かキーが押されたときに実行される 特別な関数 keyreleased は 何かキーが離されたときに実行される 特別な関数 関数に分けることで前述のプログラムよりも見やすくなるメリット キーの同時押しにも対応できる (ex02a 参照 )
サンプルプログラムについて
アニメーション 1 ファイル名 animation01 マウスをクリックした位置を中心にした円が広がっていく 円の色がランダムに変わる 広がるスピードは加速していく
ランダムに色を変えるには random() により乱数を発生させる random(max); max: 乱数の最大値 fill() により図形を塗りつぶす色を設定する fill( red, green, blue); red: 赤色成分 (0~255) green: 緑色成分 (0~255) blue: 青色成分 (0~255)
円をだんだん大きくするには 半径を少しずつ大きくしながら繰り返し円を描く float speed = 0.0; float radius = 0.0; void draw() speed += 0.5; radius += speed; ellipse( mousex,mousey,100,100); マウスをクリックすると 速度と半径を 0 に戻す
アニメーション 2 ファイル名 animation02 風車の画像を読み込み表示する マウスの左ボタンを押すと風車が右回転する 押し続けていると加速する マウスの右ボタンを押すと風車が左回転する 押し続けていると加速する 何も押さなければ 次第に止まる
画像ファイルを読み込んで表示するには Processing のウィンドウに画像ファイルをドラッグ & ドロップ プログラムを保存してあるフォルダに data フォルダが作成される data フォルダに画像ファイルがコピーされている 画像読み込み専用の Pimage という型の変数を宣言 PImage img; ファイル名を指定してロードする img = loadimage("kazaguruma.png"); image() により指定した位置に画像を表示する image( img, 0, 0 );
200 ピクセル 座標変換による図形の移動 translate() による図形の移動 translate( x, y ); x: x 方向の移動量 ( ピクセル ) y: y 方向の移動量 ( ピクセル ) translate() を実行した後は図形の原点が変わっている 100 ピクセル size(400,400); translate(100,200); rect(0,0,100,100); x y
座標変換による図形の回転 rotate() による図形の回転 rotate( angle ); angle: 回転角度 ( ラジアン ) rotate() を実行した後は図形の座標軸の角度が変わっている size(400,400); translate(100,200); rotate( radians(10) ); rect(0,0,100,100); radians() は度をラジアンに変換 10 度 x y
速度の表現 CG アニメーションでの等速運動表現 float x = 0.0f; float y = 0.0f; void setup() size( 400, 400 ); x = width/2; framerate(60); void draw() y = y + 1; ellipse( x, y, 10, 10 ); framerate() により 1 秒間に何回 draw() を呼び出すかを設定 draw() が実行されるごとにy 座標に 1を加える draw() が呼び出される間隔が1/60 秒とすると 速度は60ピクセル / 秒
加速度の表現 CG アニメーションでの等速運動表現 float x = 0.0f; float y = 0.0f; float s = 0.0f; void setup() size( 400, 400 ); x = width/2; framerate(60); void draw() s = s + 0.2; y = y + s; ellipse( x, y, 10, 10 ); draw() が実行されるごとにy 座標に変数 sの値を加える sは速度を表す 速度 sはdraw() が実行されるごとに 0.2を加える draw() が呼び出される間隔が1/60 秒とすると 加速度は12ピクセル / 秒 2
停止する表現 アニメーションを停止するのに慣性を考慮するとそれらしく見える ( 例 ) 慣性スクロール 気持ちいい? float x = 0.0f; float y = 0.0f; float s = 0.0f; void setup() size( 400, 400 ); x = width/2; framerate(60); void draw() if ( mousepressed ) s = s * 0.9f; else s = s + 0.2; y = y + s; ellipse( x, y, 10, 10 ); マウス押している間は減速させる ここでの減速方法は物理法則とは無 関係に 0.9 倍しているだけ