![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2016-10-04T16:12:08+09:00","default:kyo-in","kyo-in") #author("2016-10-05T23:35:59+09:00","default:kyo-in","kyo-in") *講義資料の予習 [#c2d40298] 以下は演習問題1のヒントとして掲載されているプログラムである． 以下は演習問題3のヒントとして掲載されているプログラムである． // 定数 final int[] fishToLeft = new int[] { // 魚の形状 (左向き) 0, 0, 70, 30, // 胴体の相対位置(x,y)・横幅・縦幅 38, 0, 15, 25 // 尾びれの相対位置(x,y)・横幅・縦幅 }; final int[] fishToRight = new int[] { // 魚の形状 (右向き) 0, 0, 70, 30, -38, 0, 15, 25 }; final int bodyX = 0; final int bodyY = 1; final int bodyLength = 2; final int bodyWidth =3; final int finX = 4; final int finY = 5; final int finLength = 6; final int finWidth = 7; // 変数 int x; // 魚の中心の x座標 int y; // 魚の中心の y座標 int vx; // 魚の進む速さ int[] fish; // 現在の魚の形状 void setup() { size(400, 400); // ウィンドウのサイズ noStroke(); // 輪郭線を無効に background(63, 63, 255); // 背景色 fill(63, 31, 31); // 塗る色 // 変数の初期値 x = 100; y = 200; vx = 1; fish = fishToRight; // 変数 fish は 変数 fishToRight と同じ配列を参照 } void draw() { background(63, 63, 255); // 背景色 // 魚の姿の描画 fill(63, 31, 31); // 塗る色 ellipse(x + fish[bodyX], y + fish[bodyY], fish[bodyLength], fish[bodyWidth]); // 胴体 ellipse(x + fish[ finX], y + fish[ finY], fish[ finLength], fish[ finWidth]); // 尾びれ if (mouseX > x) { fish = fishToRight; vx = 1; } else if (mouseX < x) { fish = fishToLeft; vx = -1; } else { // mouseX == x // 止まるだけで向きは変えない(まだ同じ方向に動き出すかターンするか未定) vx = 0; } x = x + vx; } このプログラムは，前回の「プログラムをできるだけ分かりやすくする」という観点からするとまだ改善の余地がある． 今回登場した関数を使用することで以下のように書き換えることができる． // 定数 final int[] fishToLeft = new int[] { // 魚の形状 (左向き) 0, 0, 70, 30, // 胴体の相対位置(x,y)・横幅・縦幅 38, 0, 15, 25 // 尾びれの相対位置(x,y)・横幅・縦幅 }; final int[] fishToRight = new int[] { // 魚の形状 (右向き) 0, 0, 70, 30, -38, 0, 15, 25 }; final int bodyX = 0; final int bodyY = 1; final int bodyLength = 2; final int bodyWidth =3; final int finX = 4; final int finY = 5; final int finLength = 6; final int finWidth = 7; // 変数 int x; // 魚の中心の x座標 int y; // 魚の中心の y座標 int vx; // 魚の進む速さ int[] fish; // 現在の魚の形状 void setup() { size(400, 400); // ウィンドウのサイズ noStroke(); // 輪郭線を無効に background(63, 63, 255); // 背景色 fill(63, 31, 31); // 塗る色 // 変数の初期値 x = 100; y = 200; vx = 1; fish = fishToRight; // 変数 fish は 変数 fishToRight と同じ配列を参照 } void draw() { background(63, 63, 255); // 背景色 // 魚の姿の描画 魚を描く(描く中心座標，魚の設計図); //魚を動かす if (mouseX > x) { fish = fishToRight; vx = 1; } else if (mouseX < x) { fish = fishToLeft; vx = -1; } else { // mouseX == x // 止まるだけで向きは変えない(まだ同じ方向に動き出すかターンするか未定) vx = 0; } x = x + vx; } 魚を描画する処理を関数を使用して 魚を描く(描く中心座標，魚の設計図); // 尾びれ とすることで，このプログラムは魚を描いていることがすぐに把握できる． ~ ~ ただし，魚を描く関数はProcessingには標準で用意されていないので自分で作る必要がある． 自分で関数を作ることを考えると，魚を描くには，魚を描く中心座標がなければならない，また魚の左向き，もしくは右向きの場合の設計図（int型の配列）も必要である． これらを関数を使う際に指定できるようにするには「引数」を使う． また，関数の名前には通常日本語を用いないのでここではdrawFishとしておく．関数の名前は自分で自由に決めることができる．もちろんわかりやすい名前が一番良い． まだこれから先に学ぶが，関数は関数内で計算した結果を渡すための「戻り値」という仕組みもあるが，これは今回は使用しない．そのため，「この関数には戻り値はない」ことを示すため「void」と記述する． これらをまとめると以下のようになる． void drawFish(int fx, int fy, int[] f){ //引数により渡された魚の中心座標（fx, fy） //と，魚の設計図fを使用して //ここに魚を描画する処理を書く } 座標（x，y）の引数の名前はすでにある変数x，yとごっちゃにならないようfx，fyとした．このように引数の名前は自分で自由につけることができる． これを他の関数（setup，draw）の内部に入らない箇所に追加する． // 定数 final int[] fishToLeft = new int[] { // 魚の形状 (左向き) 0, 0, 70, 30, // 胴体の相対位置(x,y)・横幅・縦幅 38, 0, 15, 25 // 尾びれの相対位置(x,y)・横幅・縦幅 }; final int[] fishToRight = new int[] { // 魚の形状 (右向き) 0, 0, 70, 30, -38, 0, 15, 25 }; final int bodyX = 0; final int bodyY = 1; final int bodyLength = 2; final int bodyWidth =3; final int finX = 4; final int finY = 5; final int finLength = 6; final int finWidth = 7; // 変数 int x; // 魚の中心の x座標 int y; // 魚の中心の y座標 int vx; // 魚の進む速さ int[] fish; // 現在の魚の形状 void setup() { size(400, 400); // ウィンドウのサイズ noStroke(); // 輪郭線を無効に background(63, 63, 255); // 背景色 fill(63, 31, 31); // 塗る色 // 変数の初期値 x = 100; y = 200; vx = 1; fish = fishToRight; // 変数 fish は 変数 fishToRight と同じ配列を参照 } void draw() { background(63, 63, 255); // 背景色 // 魚の姿の描画 魚を描く(描く中心座標，魚の設計図); //魚を動かす if (mouseX > x) { fish = fishToRight; vx = 1; } else if (mouseX < x) { fish = fishToLeft; vx = -1; } else { // mouseX == x // 止まるだけで向きは変えない(まだ同じ方向に動き出すかターンするか未定) vx = 0; } x = x + vx; } void drawFish(int fx, int fy, int[] f){ //引数により渡された魚の中心座標（fx, fy） //と，魚の設計図fを使用して //ここに魚を描画する処理を書く } あとは， 魚を描く(描く中心座標，魚の設計図); // 尾びれ を作成した関数drawFishを使うように変更する． 今，魚の中心座標は変数x, yである．また関数の名前はdrawFishとした．また魚の設計図はintの配列fishである．従って以下のようになる． drawFish(x, y, fish); よって，以下のようになる． // 定数 final int[] fishToLeft = new int[] { // 魚の形状 (左向き) 0, 0, 70, 30, // 胴体の相対位置(x,y)・横幅・縦幅 38, 0, 15, 25 // 尾びれの相対位置(x,y)・横幅・縦幅 }; final int[] fishToRight = new int[] { // 魚の形状 (右向き) 0, 0, 70, 30, -38, 0, 15, 25 }; final int bodyX = 0; final int bodyY = 1; final int bodyLength = 2; final int bodyWidth =3; final int finX = 4; final int finY = 5; final int finLength = 6; final int finWidth = 7; // 変数 int x; // 魚の中心の x座標 int y; // 魚の中心の y座標 int vx; // 魚の進む速さ int[] fish; // 現在の魚の形状 void setup() { size(400, 400); // ウィンドウのサイズ noStroke(); // 輪郭線を無効に background(63, 63, 255); // 背景色 fill(63, 31, 31); // 塗る色 // 変数の初期値 x = 100; y = 200; vx = 1; fish = fishToRight; // 変数 fish は 変数 fishToRight と同じ配列を参照 } void draw() { background(63, 63, 255); // 背景色 // 魚の姿の描画 drawFish(x, y, fish); //魚を動かす if (mouseX > x) { fish = fishToRight; vx = 1; } else if (mouseX < x) { fish = fishToLeft; vx = -1; } else { // mouseX == x // 止まるだけで向きは変えない(まだ同じ方向に動き出すかターンするか未定) vx = 0; } x = x + vx; } void drawFish(int fx, int fy, int[] f){ //引数により渡された魚の中心座標（fx, fy） //と，魚の設計図fを使用して //ここに魚を描画する処理を書く } 関数が登場しプログラムの流れがややこしく感じるかもしれないが，プログラムの流れを図示すると以下のとおりである．デバッグモードを使用し，1行1行トレース実行することでも確認できる． #ref(flow.png);
