レッスン 10
シンプルなタイマーをつくってみよう
このレッスンでは、簡単なタイマーの仕組みと条件分岐の仕組みができるようになるよ。
チャプター1このレッスンのゴール
このレッスンで完成させるものを確認しよう
チャプター2カウントアップ準備「0」を表示しよう
このチャプターでは、文字列を描画するよ。
2. 1 写してみよう
var count = 0; //カウント変数
//最初に一回だけ呼び出される初期設定
function setup() {
createCanvas(400, 400);
}
//繰り返し呼び出される処理
function draw() {
//背景の描画
background(0);
//塗りの色設定
fill(255);
//文字の設定
textAlign(CENTER);
textSize(100);
//カウント表示
text(count, 200, 250);
}
コードがかけたら実行してみよう。
0が表示されたらOKだよ。
2. 2 コードの解説(1−1)
var count = 0; //カウント変数
変数countを使って、真ん中に表示される数字とすることにしています。
//最初に一回だけ呼び出される初期設定
function setup() {
createCanvas(400, 400);
}
createCanvasでキャンバスの大きさを幅400px/高さ400pxに設定しているよ。
キャンバス要素を作成し、その寸法をピクセル単位で設定します。
値1： キャンバスの幅
値2： キャンバスの高さ
2. 3 コードの解説(1−2)
//繰り返し呼び出される処理
function draw() {
//背景の描画
background(0);
//塗りの色設定
fill(255);
//文字の設定
textAlign(CENTER);
textSize(100);
//カウント表示
text(count, 200, 250);
}
これまでのレッスンですでに出てきた内容だね。
backgroundで背景を黒を設定し、fillで塗りの設定し、textAlignやでtextSizeとtextで文字を表示しているよ。
背景に使用する色を設定します。デフォルトの背景は透明
値1:
図形を塗りつぶすのに使う色を設定します。
値1: 色
値1: 水平方向の配置、LEFT、CENTER、またはRIGHT
値2: 垂直方向の配置、TOP、BOTTOM、CENTER、またはBASELINE
現在のフォントサイズを設定します。このサイズは、以降のtext（）関数の呼び出しで使用されます。フォントサイズはピクセル単位で設定。
画面にテキストを描画します。
値1 : 表示する文字列
値2 : テキストのx座標
値3 : テキストのy座標
チャプター3draw()の呼び出される回数を確認しよう
このチャプターでは、draw()の呼び出される回数を確認するよ。
3. 1 変更しよう
カウント表示の下にcount = count + 1を追加しよう
//カウント表示
text(count, 200, 250);
+
+ //変数cに+1(1フレーム毎)
+ count = count + 1;
}
コードが書けたら実行してみよう。
数字の部分が0から増えていくとOKだよ
3. 2 コードの解説
1ずつ加算されて表示されているね
加算と表示の処理がdrawの中に書かれているので、drawが繰り返し呼び出されていることがわかるね。このdraw()は1秒間に約60回呼び出されているよ。
チャプター4カウントアップの数値を調整しよう
このチャプターでは、カウントアップの数値を1秒で＋１にしよう
4. 1 変更しよう
カウント表示の下を下記のように修正しよう
//カウント表示
- text(count, 200, 250);
//カウント表示
+ text(int(count / 60), 200, 250);
count = count + 1; の下に、console.log()を追加しよう
//変数cに+1(1フレーム毎)
count = count + 1;
+
+ //コンソールへ出力
+ console.log(count);
}
コードが書けたら実行してみよう。プレビューエリアの数字の部分が0から約1秒ごとに+1増えていくとOKだよ、先ほど表示されていた数値はコンソールエリアで確認できるといいよ。int(count / 60)で60で割って、int()で整数にして表示させているよ。
4. 2 コードの解説
値を整数に変換します。値の配列が渡されると、同じ長さのint配列が返されます。
1ずつ加算されて表示されているね
加算と表示の処理がdrawの中に書かれているので、drowが繰り返し呼び出されていることがわかるね。このdraw()は1秒間に約60回呼び出されているよ。
チャプター5カウントアップ「10」で止めよう
このチャプターで、条件分岐を理解しよう
5. 1 変更しよう
count = count + 1; の下に、10以上になったときの条件を追加しよう
//変数cに+1(1フレーム毎)
count = count + 1;
+ //10以上になったとき
+ if (int(count / 60) >= 10) {
+
+ //背景の描画を変更
+ background(0, 0, 255);
+
+ //カウント表示(10)
+ text(10, 200, 250);
+ }
+
console.log(count);
}
コードが書けたら実行してみよう。10までカウントアップして、10でストップするとOKだよ。
5. 2 コードの解説
ifでint(count / 60) >= 10 の条件に該当した場合に、 {} のなかに書かれた処理がなされます。
チャプター6「10」からのカウントダウンにカスタムしよう
このチャプターで、カスタマイズしてみよう
6. 1 変更しよう
初期値を600に変更しよう
- var count = 0; //カウント変数
+ var count = 600; //カウント変数
プラスからマイナスになるように変更しよう。
//カウント表示
text(int(count / 60), 200, 250);
- //変数cに+1(1フレーム毎)
- count = count + 1;
- //10以上になったとき
- if (int(count / 60) >= 10) {
//背景の描画を変更
- background(0, 0, 255);
//カウント表示(10)
- text(10, 200, 250);
}
console.log(count);
//カウント表示
text(int(count / 60), 200, 250);
+ //変数cに-1(1フレーム毎)
+ count = count - 1;
+ //0以下になったとき
+ if (int(count / 60) <= 0) {
//背景の描画を変更
+ background(255, 0, 0);
//カウント表示(0)
+ text(0, 200, 250);
}
console.log(count);
コードが書けたら実行してみよう。カウントダウンして、0でストップするとOKだよ。
6. 2 コードの解説
-
数字がカウントダウンする理由
-
背景の色がカウント0で変化する理由
ifでint(count / 60) <= 0の条件に該当した場合に、{}のなかに書かれた処理がされて、0の表示になっているよ。
チャプター7ここまで到達した方へ
まとめ
プログラミングの基本中の基本である、次のことを学習しました。
- 変数と繰り返し
- 条件分岐
基本の考え方を習得することはできましたが、少し複雑なことをするためには、もう少し学習を深める必要があります。例えば、
- 変数を1ずつではなく、自由自在に変化させたい
- 繰り返すタイミングをdraw以外にも、自由自在のタイミングで変化させたい
- 1つ以上の条件を組み合わせて、自由自在に場合を分けたい
「自由自在」にプログラムを使いこなすために必要な項目を、次のレッスン以降で学んでいきます。ここから少しレベルが上がりますが、テキストをよく読み、じっくり理解して1つずつ進めるようにしましょう。