ICT演習

第10回

乱数、マウスの操作

１乱数

・乱数とは
　　乱数は規則性のない数のことで、random() 関数を呼び出すごとにいろいろな数を創り出します。
　　 int x = random(0,1);
　　のようにプログラムを書くと、変数 x に何の数値が代入されるかはその時になるまでわかりません（数値の範囲は 0.0～1.0未満）。
　　また、この random() は呼び出される毎に毎回異なる数値を発生させます。

　　乱数は、この性質を利用して自然現象のシミュレーションやゲームなど、幅広くいろいろなプログラムで使用されています。

・ Processingで乱数を使う
　　乱数は、ほぼ全てのプログラミング言語で使用できます。
　　（C言語：rand()関数、Python：random.random()など、Java：RandomクラスのnextInt()など、Excel：RAND()関数、‥‥ ）

　　Processingでは、下記の書式で使用します。

　　float r = random( 0, 1 ); // 0.0～1.0未満の乱数を r に代入する(小数を含む）
　　float r = random( 0, 10 ); // 0.0～10.0未満の・・・
　　float r = random( 3, 8 ); // 3.0～8.0未満の・・・
　　float r = random( -5, 3 ); // -5.0～3.0未満の・・・
　　int x = (int)random( 0, 5 ); // 0, 1, 2, 3, 4 のいずれかの整数値が x に代入される
　　int x = (int)random( 0, 2 ); // 0, 1 のいずれかの整数値が x に代入される
　　int x = (int)random( -2, 2 ); // -2, -1, 0, 1 のいずれかの整数値が x に代入される
　　
　＜例：乱数を表示してみる＞

float r = random( 0, 1 ); // 0.0～1.0未満
println("0.0～1.0未満 = " + r);
r = random( 0, 10 ); // 0.0～10.0未満
println("0.0～10.0未満 = " + r);
r = random( 3, 8 ); // 3.0～8.0未満
println("3.0～8.0未満 = " + r);
r = random( -5, 3 ); // -5.0～3.0未満
println("-5.0～3.0未満 = " + r);
int x = (int)random( 0, 5 ); // 0, 1, 2, 3, 4 のいずれか
println("0, 1, 2, 3, 4 のいずれか = " + x);
x = (int)random( 0, 2 ); // 0, 1 のいずれか
println("0, 1 のいずれか = " + x);
x = (int)random( -2, 2 ); // -2, -1, 0, 1 のいずれか
println("-2, -1, 0, 1 のいずれか = " + x);

　　　
　＜実行結果（数値は毎回変わるハズ）＞
　　

　　
　　
　＜例：0～9の乱数（整数値）を15個表示する＞

for(int i=0;i<15;i++){
int x = (int)random( 0, 10 ); // 0,1,‥,9 のどれか
print(" " + x);
}

　　　
　＜実行結果（数値は毎回変わるハズ）＞
　　

　　
　　　
＜演習１＞

　以下は、400個の〇を描画するプログラムである。これを乱数を使ってバラバラの（ランダムな）位置に描画するように修正しなさい。

size(400,400);
background(255);
for(int i=0;i<400;i++){
float x = (i%20)*20 + 10;
float y = (i/20)*20 + 10;
ellipse( x, y, 20, 20 );
}

　＜実行結果＞
　　

　下図↓のようにランダムな位置になるように上記のソースを修正しなさい。
　　

　　
　　
　解答例
　　　　　　

２マウスの操作

Processingは、マウス操作が簡単にできます。

・マウスポインターの位置
　マウスポインタ―の座標は mouseX, mouseY に格納されている
　　mouseX：マウスポインタ―の水平位置（ヨコ方向）
　　mouseY：マウスポインタ―の垂直位置（タテ方向）
　　
　＜例：mouseX,mouseY の値をコンソールに表示する、その位置に〇を描画する＞

void setup()
{
size(400, 400);
}

void draw()
{
background(255);
println( mouseX + "," + mouseY ); // コンソールに表示
ellipse( mouseX, mouseY, 20, 20); // マウスの位置に〇を描画
}

　　
　　
　＜例：マウスポインタ―が左半分にあれば画面全体を黒色、右半分にあれば白色にする＞

void setup()
{
size(400, 400);
}

void draw()
{
if( mouseX<200 ){ // マウスが左半分の領域にある
background(0); // 背景を黒色にする
}else{ // マウスが右半分の領域にある
background(255); // 背景を白色にする
}
stroke(128);
line(200,0,200,400); // 真ん中にタテの線分を描画する
}

　　
　　　
＜演習２＞

　マウスポインタ―が画面の上半分にあるときは上半分を青色に、下半分にあるときは下半分を青色になるようにしなさい。
　青色領域の描画は fill(0,0,255); rect(‥); を使用すること。
　＜実行例　左図：マウスが上半分にある、　右図：マウスが下半分にある＞
　

　　　　　　
　　解答例
　　　　　
　　
・マウスボタンの処理
　マウスボタンが押された時の処理も簡単に実装できます。
　Processingではマウスボタンが押されると void mousePressed() 関数が呼び出されます。
　
　＜例：マウスボタンを押したところに〇を描画する＞

void setup()
{
size(400, 400);
background(255);
}

void draw(){ } // 空のdraw()関数

void mousePressed() // マウスボタンが押されたら呼び出される
{
ellipse( mouseX, mouseY, 20,20 ); // マウスの位置に〇を描く
}

　＜実行結果＞
　　

　
＜演習３＞

　以下は、マウスボタンをクリックしたところに、波紋のように〇が広がるアニメーションのプログラムである。
　/* 空欄 */ を埋めて完成させなさい。
　＜マウスボタンがクリックされたところから〇が波紋のように広がるプログラム＞

float radius; // 円の半径
float x,y; // 円の中心座標

void setup()
{
size(400, 400);
radius = 880.0; // 初期値
x = y = 200.0;
}

void draw()
{
background(255);
ellipse( /* 空欄 */ ); // 〇の描画
/* 空欄 */; // 〇の半径を 1px 増やす
}

void mousePressed()
{
/* 空欄 */; // マウスのx座標を変数x に代入
/* 空欄 */; // マウスのy座標を変数y に代入
/* 空欄 */; // 〇の半径を 0px にする
}

　＜実行例の動画＞　
　
　　解答例
　　　　