いろいろな変数と条件分岐
この章では、インタラクティブなプログラムや図形をきれいに配置するのに便利な特別な変数を紹介します。 また条件分岐を使って少し複雑なプログラムを作ります。
データの型
第二回ではじめて変数を導入したときには数値を記憶するために変数を使いましたが、その他の情報を記憶しておくこともできます。 データの種類のことを型といい、変数が代入される時点でコンピュータの判断によって決まります。 また、関数に与えたり計算に使う変数は指定された型である必要があります。 コンピュータが型を変換できる場合には自動的に変換してくれますが、そうでない場合にはエラーとなります。
| 型 | 説明 | 宣言と使い方 |
|---|---|---|
| 数値 | 整数や小数の数値 | |
| 文字列 | 文字列はダブルコーテーション " で括って表す |
|
| 真偽値 | true か false どちらかの値をとる変数 |
|
| 色 | 色の情報を保存でき、 fill() などで数値を3個指定するかわりに使える |
|
文字列を描画する
文字列は画像として画面内に描画することも可能です。
text() 関数の二つの使い方を紹介します。
文字列と左上の座標を引数に与えたときは、文字列を一行で表示します。
時の大きさはtextSize() で事前に決めておきます。
textSize(32);
text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);
上の例では、
fillに4つの引数を与えています。 これはテキストの色に加え、最後の引数で 不透明度 を指定してますfill(r, g, b, 不透明度)。 不透明度は alpha とも呼ばれ、この数値を設定することで背後の色が透けて見えるような表現ができます。 alpha = 0 で完全に透明（その色が全く見えず、背景が透ける）、 alpha = 255 で完全に不透明（自身の色だけが見え、背景を覆い隠す）、その間の数値では半透明になります。
文字列と左上の座標、右下の座標を引数に与えたときはその枠内に収まるように文字の大きさや改行が自動で決定されます。
let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box
システム変数
自分が作った変数以外にも、p5.js が用意した便利な変数があります。 代表的なものを表にしました。 システム変数は他にもあり、公式サイトから説明をサンプルプログラム付きで調べることができます。
| 変数名 | 型 | 意味 |
|---|---|---|
| width | 数値 | キャンバスの横幅 |
| height | 数値 | キャンバスの縦幅 |
| windowWidth | 数値 | ウィンドウ全体の横幅 |
| windowHeight | 数値 | ウィンドウ全体の縦幅 |
| frameCount | 数値 | draw が実行され画面が描画された回数 |
| mouseX | 数値 | 現在のカーソル位置のx座標 |
| mouseY | 数値 | 現在のカーソル位置のy座標 |
| pmouseX | 数値 | 直前のカーソル位置のx座標 |
| pmouseY | 数値 | 直前のカーソル位置のy座標 |
| mouseIsPressed | 真偽 | マウスボタンが押されているかどうか |
| mouseButton | 数値 | どのマウスボタンが押されているかを示す変数 ( LEFT / CENTER / RIGHT を比較に利用できる) |
| keyIsPressed | 真偽 | キーが押されているかどうか |
| key | 文字 | 最後に押された文字キー |
| keyCode | 数値 | 最後に押されたキーで、特殊キーも含む (https://keycode.info/でキーの名前と番号を調べられる) |
まずはwidth、height、mouseX、mouseYあたりを覚えると便利でしょう。
これらを使うと、画面サイズにあわせて図形の大きさを決めたり、マウスカーソルの位置に図形を描くことができます。
function setup(){
createCanvas(windowWidth, windowHeight); // 描画エリア全体をキャンバスにする
}
function draw() {
background(180); // 毎回、フレームを背景色で塗りつぶす
rect(width/4, height/4, width/2, height/2); // 画面中央に、画面サイズの半分の長方形を描く
ellipse(mouseX, mouseY, 20, 20); // マウスカーソルの位置に円を描く
}
条件分岐
プログラムでは、条件と分岐を使うことで論理の流れが複雑な処理をさせることができます。 p5.js ではif文という機能を使って条件分岐を実現できます。 次プログラムはカーソルの位置を条件として処理を二手に分け、円の色を変化させています。
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(255);
line(width/2, 0, width/2, height);
if(mouseX < width/2){
// カーソルが左半分にあるときの処理
fill(255, 80, 80); // 赤
circle(mouseX, mouseY, 40);
}
else{
// それ以外の場合の処理
fill(48, 255, 255); // 水色
circle(mouseX, mouseY, 40);
}
}
if文の構文は次の通りです。 条件式が真であるときに実行したい処理をif ブロックの中に書き、条件式が偽であるときに実行したい処理をelse ブロックの中に書きます。
条件式とは、ある式が真(true)であるか偽(false) であるかを判定できるもののことです。 真偽値型の変数のほかに、以下に挙げた演算をつかって複雑な条件をあつかうことができます。
| 演算子 | 意味 | 用例 |
|---|---|---|
== |
左辺と右辺が等しい | if( x == 10 ) |
!= |
左辺と右辺が等しくない | if( x == 10 ) |
> |
左辺が右辺より大きい | if( x == 10 ) |
>= |
左辺は右辺以上 | if( x == 10 ) |
< |
右辺が左辺より大きい | if( x == 10 ) |
<= |
右辺は左辺以上 | if( x == 10 ) |
&& |
論理積 左辺かつ右辺 | if( 0<=x && x<100 ), xは0以上かつ100未満 |
| || | 論理和 左辺または右辺 | if( x<0||100<x ), xは0未満または100より大きい |
! |
否定 ~ではない | if( !(x<=5) ), xは5以下ではない |
分岐のパターン
else で何もして欲しいことが無いときは、elseブロックを省略することができます。
[ if構文-else省略形 ]
また、else に続けてさらにif文を書くことで多数の分岐も可能です。
[ 多数の分岐 ]
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
}
function draw() {
for(let i=0; i<width/10; i++){
// 3分岐して色を設定する.
// i%3 はiを3で割った余り
if(i%3 == 0){
stroke(255, 0, 0); // 赤
}
else if(i%3 == 1){
stroke(0, 255, 0); // 緑
}
else{
stroke(0, 0, 255); // 青
}
line(i*10, 0, i*10, height);
}
}
lineで描く線の色や、rectの輪郭線の色を指定するときには、stroke(色)を使います(繰り返しと色の表現)。
練習問題
練習1
システム変数の windowWidth, windowHeightとfor文を使って、画面いっぱいに等間隔で図形を並べてください。
図形の間隔は画面の幅を使うとどう計算できるでしょうか。
練習2
練習1で作ったプログラムを使います。
for文の中で条件分岐 if, else 、余りの演算 % を使って図形の色を規則的に変化させてください。
どんな色の変化でもかまいませんが、思いつかない人は横方向や縦方向に色を変化させるところから初めてみましょう。
