スライド 1

Size: px

Start display at page:

Download "スライド 1"

かずゆきいんそん
5 years ago
Views:

1 グラフィックスの世界第 3 回サイバーメディアセンターサイバーコミュニティ研究部門安福健祐

2 Processing によるアニメーション

3 setup と draw void setup() size(400, 400); void draw() ellipse( mousex,mousey,100,100); void とか setup とか draw とかはじめて見るが出てきてややこしい ellipseは円描く関数でした mousex, mouseyは特別な変数のようだ

4 関数を定義関数の書き方 void setup() 命令 ; 関数を自分で作ることができる voidは戻り値がないという意味 ( 今はとりあえず無視 ) setupが関数の名前通常関数の名前は自由でつけるが setup と draw は特別! setup は最初に 1 回呼び出される関数 draw は画面が更新される度に繰り返し呼び出される関数

5 setup と draw void setup() size(400, 400); void draw() ellipse( mousex,mousey,100,100); setup というのは最初に1 回だけ実行される特別な関数 draw というのは繰り返して実行される特別な関数関数内で実行されるプログラムをで囲むのがルール void は戻り値がないという意味だがとりあえず無視

6 画面を繰り返し更新するプログラム void setup() size(400, 400); void draw() background(255); ellipse( mousex,mousey,100,100); 繰り返し実行される draw() の最初に背景を白くする処理を追加 255 は白という意味

7 クリックした時に画面をクリア void setup() size(400, 400); void draw() if( mousepressed ) background(255); ellipse( mousex,mousey,100,100); マウスのボタンを押したときだけ背景を白くする変数 mousepressed はマウスのボタンが押されていたら値がtrue (1) になっている押されていないときはfalse(0) になる if 文とは

8 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 が代入されるだけ

9 マウスボタンを押したとき図形を描く void setup() size(400, 400); void draw() if( mousepressed ) ellipse( mousex,mousey,20,20); マウスのボタンを押したときにカーソルの位置に図形を描く

10 キーボード ( 矢印 ) で図形を動かす 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); キーボードのを押すと図形が右に動くキーボードのを押すと図形が左に動く

11 キー入力処理キーボードのキーが押されているかチェック何かキーが押さたとき変数 keypressed が真 (1) になる何もキーが押されていない場合は偽 (0) 矢印キーの種類変数 keycode には矢印キー等の種類格納されている変数 key には文字の種類が格納されている keycode UP DOWN RIGHT LEFT キーボード

グローバル変数図形の x 座標は draw 関数繰り返し呼ばれている間値が保存されている必要があるグローバル変数を使うグローバル変数どの関数からも値を参照できる変数関数の外で定義するローカル変数関数内からしか値を参照できない変数関数内で定義する void setup() size(400, 400); void

12 グローバル変数図形の 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); ローカル変数にするとうまく動きません

13 練習 2: 上下にも図形を動かす図形を上下左右にも動くようにプログラムを追加してくださいキーボードのを押すと図形が右に動くキーボードのを押すと図形が左に動くキーボードのを押すと図形が下に動くキーボードのを押すと図形が上に動く

14 補足 2: 特別な関数 void keypressed() void keyreleased() keypressed は何かキーが押されたときに実行される特別な関数 keyreleased は何かキーが離されたときに実行される特別な関数関数に分けることで前述のプログラムよりも見やすくなるメリットキーの同時押しにも対応できる (ex02a 参照 )

15 サンプルプログラムについて

16 アニメーション 1 ファイル名 animation01 マウスをクリックした位置を中心にした円が広がっていく円の色がランダムに変わる広がるスピードは加速していく

17 ランダムに色を変えるには random() により乱数を発生させる random(max); max: 乱数の最大値 fill() により図形を塗りつぶす色を設定する fill( red, green, blue); red: 赤色成分 (0~255) green: 緑色成分 (0~255) blue: 青色成分 (0~255)

18 円をだんだん大きくするには半径を少しずつ大きくしながら繰り返し円を描く float speed = 0.0; float radius = 0.0; void draw() speed += 0.5; radius += speed; ellipse( mousex,mousey,100,100); マウスをクリックすると速度と半径を 0 に戻す

19 アニメーション 2 ファイル名 animation02 風車の画像を読み込み表示するマウスの左ボタンを押すと風車が右回転する押し続けていると加速するマウスの右ボタンを押すと風車が左回転する押し続けていると加速する何も押さなければ次第に止まる

20 画像ファイルを読み込んで表示するには Processing のウィンドウに画像ファイルをドラッグ & ドロッププログラムを保存してあるフォルダに data フォルダが作成される data フォルダに画像ファイルがコピーされている画像読み込み専用の Pimage という型の変数を宣言 PImage img; ファイル名を指定してロードする img = loadimage("kazaguruma.png"); image() により指定した位置に画像を表示する image( img, 0, 0 );

21 200 ピクセル座標変換による図形の移動 translate() による図形の移動 translate( x, y ); x: x 方向の移動量 ( ピクセル ) y: y 方向の移動量 ( ピクセル ) translate() を実行した後は図形の原点が変わっている 100 ピクセル size(400,400); translate(100,200); rect(0,0,100,100); x y

22 座標変換による図形の回転 rotate() による図形の回転 rotate( angle ); angle: 回転角度 ( ラジアン ) rotate() を実行した後は図形の座標軸の角度が変わっている size(400,400); translate(100,200); rotate( radians(10) ); rect(0,0,100,100); radians() は度をラジアンに変換 10 度 x y

23 速度の表現 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ピクセル / 秒

24 加速度の表現 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

25 停止する表現アニメーションを停止するのに慣性を考慮するとそれらしく見える ( 例 ) 慣性スクロール気持ちいい? 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 倍しているだけ

問 1 図 1 の図形を作るプログラムを作成せよ但しウィンドウの大きさはとし座標の関係は図 2 に示すものとする図 1 作成する図形原点 (0,0) (280,0) (80,0) (180,0) (260,0) (380,0) (0,160) 図 2 座標関係問 2

問 1 図 1 の図形を作るプログラムを作成せよ但しウィンドウの大きさはとし座標の関係は図 2 に示すものとする図 1 作成する図形原点 (0,0) (280,0) (80,0) (180,0) (260,0) (380,0) (0,160) 図 2 座標関係問 2 問 1 図 1 の図形を作るプログラムを作成せよ但しウィンドウの大きさは 400 200 とし座標の関係は図 2 に示すものとする図 1 作成する図形原点 (0,0) (280,0) (80,0) (180,0) (260,0) (380,0) (0,160) 図 2 座標関係問 2 for 文を用いて図 3 の様な図形を描くプログラムを作成せよ但しウィンドウのサイズは 300 300