LEDの色をなめらかに変えてみよう（難易度：★★★）
先頭のLEDを赤色に光らせ、その次のLEDからはだんだんと緑色に近い色へと変化していくように、LEDを光らせてみましょう。
この課題のプログラムの完成図は、上の図のようになります。プログラムの中で使われている、新しい部品について説明しましょう。
ボタンを押したら何かをする
これまでのプログラムは、プログラムを動かした後は、ただプログラムが動く様子を見るだけで、ボタンをおして何かをするようなことができませんでした。
「イベント」の中にある「ボタン・・：が・・・のとき」と書かれた部品を使うと、M5StickC のボタンを操作したときだけ動く、プログラムを書くことができます。
M5StickC には三つのボタンがあります。このうち、M5と書かれている大きなボタンと、画面の右上（側面）にあるボタンBを、プログラムの中で使うことができます。
左下にあるリセットボタンは、M5StickC をリセットしたり、電源を消すために使うボタンで、プログラムの中では使うことができません。
この部品の動作を試すために、上の図のようなプログラムを書いてみましょう。
このプログラムは、ボタンAを押していないときは、M5StickC の画面の色が赤色になります。そして、ボタンAを押したときに、一瞬だけ青色になります。
なぜ、一瞬だけ青になって、すぐに赤に戻ってしまうのでしょうか？
それは、「ボタンが・・のとき」の部品の中にあるプログラムは、ボタンが押された瞬間に、1回だけ実行されたあと、すぐにまた Setup の下にある「ずっと」の中にある「画面の背景色を赤色にする」を実行してしまうからです。
M5Flow のプログラムは、普段は Setup の下にあるプログラムが実行され続けます。しかし「ボタンが・・のとき」の部品があると、ボタンが押されたときだけ、Setup の下のプログラムを中断して、「ボタンが・・のとき」の下にあるプログラムを実行します。
そして、「ボタンが・・のとき」の下のプログラムの実行が終わると、また Setup の下にあるプログラムに戻って実行を続けます。
だから、ボタンを押した一瞬だけ画面が青になり、すぐに赤にもどってしまいます。
なお、"wasPressed" という部分は「ボタンが押された」ということを意味しています。"wasReleased" は「ボタンを離した」、"longPress" は「長く押した」、"wasDoublePress" は「二回続けて押した」を意味します。
ボタンAが押されたら、画面の色を「ずっと」青にしたいときは、上の図のように変数と「もし・・であれば」の部品を使います。こうすると、ボタンAを押すことで変数 j の数が １ に変わります。
すると、左側の「ずっと」に戻っても、変数 ｊ の数は 1 のままなので、「もし」の右にある "j は 0 と同じかどうか？」という検査に失敗して、LEDの色は青のままになります。
ボタンAを押している間だけ、画面の色を青にしたいときは、上の図のようにします。
「もし・・であれば・・そうでなければ」の部品は、前の課題で使った「もし・・であれば」とよく似ています。「もし」の横にある「検査内容」に合格したときは、「であれば」にくっついているプログラムを実行します。そして「検査内容」に合格しなかったときは、「そうでなければ」のプログラムを実行します。
ボタンAを押す前は、j の変数の数は 0 （Setup の直後に0にしている）なので、「もし」の検査は合格となり、画面の色は赤になります。ボタンAを押すと、j の変数の数が１になります。すると、「もし」にくっついている「j が 0 と等しい」という検査の結果が「不合格」となり、画面の色が青になります。
ボタンAをはなすと、j の数はまた 0 になるので、画面の色は赤に戻ります。少し複雑ですが、ボタンを押したとき、はなしたときで、プログラムの動きを変えたいときは、このように変数と「もし・・であれば・・そうでなければ」の部品を使います。
ただし、単にLEDを消したいだけなら、上のように明るさを０にすればOKです。Setup 側にあるプログラムで明るさを変更しない限りは、これでLEDは消えたままになります。
LEDの色を位置によって違う色にする
プログラムの上の図の部分は、LED の色をひとつずつ、違う色に設定しています。
まず、先頭の（1つ目の）LEDの色を赤(63) 緑 (1) にしています。次の（2つ目の）LEDの色は、赤(62) 緑 (2) にしています。そうやって、LEDが進んでいく間にだんだんと赤を減らしていき、代わりに緑色を増やしていきます。
こうすることで、LEDの色を赤からオレンジ色、黄色、黄緑色、緑色となめらかに変えることができます。
このような、色をなめらかに変化させることを「グラデーション」と言います。
そして、「Jを1から64まで1ずつカウントする」と書かれた部品のことを、プログラミングの用語で「for（フォア）ループ」と言います。この部品は少し複雑に見えますね。ですが、プログラムではよく使われる部品です。
for （フォア）ループって何だろう？
「for ループ」の部品の動作を調べるためのプログラムを書いてみましょう。
上の図のプログラムを動かすと、M5StickC の画面に 1 から順番に 100 まで数字が表示されます。
「forループ」の部品は、「ずっと」と同じように、右側にくっつけられたプログラムを繰り返し実行します。ただし、「ずっと」とは違って、繰り返し回数は無限ではありません。上のプログラムの場合は、繰り返しの回数は100回になります。
なぜそうなるのか、実際のプログラムの動作を追いながら確認してみましょう。
「forループ」の部品が初めて実行されると、部品の先頭に書かれた変数（ここでは "j"）に、その直後に書かれている数字（ここでは１）が入れられます。
そして、その状態で「forループ」の部品にくっつけられているプログラムを1回実行します。上のプログラムでは、画面の中にある "label0" に j の数字を表示する部品があるので、画面には変数 j に入っている数字（つまり１）が表示されます。
「ラベル・・に・・を表示」の部品の実行がおわると、また繰り返しの最初に戻ります。先頭に戻ったときに、変数 j の数は１増えて２になります。
変数 j の増える数が１なのは、部品に「1 ずつカウントする」と書かれているからです。もし「2ずつカウントする」とかかれていたら、変数 j の数は２増やされて３になります。
こうして、変数 j の数が100 になるまで、100 回の繰り返しが実行されます。
101 回目の繰り返しのときは、これまでとは違います。変数 j の数を1増やすと、変数 j の数が 101 になってしまいます。ですが、「for ループ」の部品には「1 から 100 まで」と書かれているので、変数 j の数がその範囲を超えてしまっています。
変数 j が部品に書かれた範囲からはみ出てしまうと、「forループ」の部品は、繰り返すことをやめます。その結果、画面に表示される数字は、100で止まるのです。
for ループを使ってLEDの色を位置によって違う色にする
この課題のプログラムでは、LEDの色をひとつずつ変えるために「forループ」の部品を使っています。
「初めての繰り返し」では、プログラムの動作は上の図のようになります。つまり、1番目のLEDの色が赤 (63) と緑 (1) を足した色になるというわけです。
2回目の繰り返しの時は、上の図のようになります。変数 j の数が 1 増えて 2 になっているので、色を変える LED の位置が 2 番目になり、LED の色は少しだけ緑に近づきます。
64回目の繰り返しの時は、こうなります。64番目のLEDの色は、赤 (0) と緑 (64) の組み合わせ・・・つまり、赤色が混じらない「緑色」になります。
そして、65回目の繰り返しはありません。なぜなら、変数 j の数が「forループ」の部品に書かれた「1から64まで」の範囲から外れてしまうからです。
for ループを使わないとどうなる？
「forループ」を使わなくても、同じプログラムを書くことができます。実際に書いてみましょう。
これは、先頭から4個分だけ書いたところですが、もう面倒になってきました・・・
この方法で 64 個分のLED の色を設定しようとすると、LEDの色を設定する部品を64個もつなげる必要があります。そんな長いプログラムを書くのは、とても手間がかかります。
「forループ」を使わなくても、LEDの色をひとつずつ設定することはできます。ですが、「forループ」の部品をうまく使うと、プログラムをとても短く書くことができるのです。
同じ部品がいくつもつながったプログラムは、「forループ」の部品を使うことで、短く書き直せることがあります。そのようなプログラムを書くときは、「forループ」の部品を使って書き直すことができないか、考えてみましょう。
試してみよう
・LED の色の変わり方を、違う色に変えてみよう。
・ボタンAを押すとLEDが消えて、はなしたときにまたLEDがつくようにしてみよう。