こんにちはalanです。
前回の最後の図形、描けましたか?
そう、以下のような画面になるはずです。
これってどういうことなのかわかりますか?
おさらいしてみましょう。
100進んで90度曲がって、さらに100進んで90度曲がる、というのを四回繰り返した訳でした。
前回のコードfunction onLoad() {
logo.init();
penDown();
move(100);
turn(90);
move(100);
turn(90);
move(100);
turn(90);
move(100);
penUp();
}
同じ処理を四回繰り返すのに、コピペを多用するのはややこしいですね。
プログラムで繰り返しをしたいとき、一番簡単なのは、forという命令文を使うことです。
では、正方形を描くプログラムをfor文で書き直してみましょう。
function onLoad() {
logo.init();
penDown();
for(i=0;i<4;i++){
move(100);
turn(90);
}
penUp();
}
このように書き換えてみても、前回と全く同じように正方形が描かれることが確認できると思います。
for文は、上図のように、あとに続く「{」と「}」で囲まれた部分を指定した回数だけ繰り返せ、という命令です。
この場合、「4」という数字が見えますね。それが繰り返しの回数になります。
こういう命令の使い方をループ処理またはループと呼びます。
しかしこれだけだと、コピーした方が早いと感じてしまうかもしれませんね。
でも、例えば次のようにコードを書き換えてみて下さい
function onLoad() {
logo.init();
penDown();
for(i=0;i<360;i++){
move(1);
turn(1);
}
penUp();}
4だった部分を360に、moveとturnをそれぞれ1ドット、1度ずつにしてみました。
何が起きそうか、予感はしますか?
そう。結果は下図のようになります。
奇麗な円が書けました。
さすがに1度ずつ360回コピーするよりは、for文を使った方が断然ラクですよね?
さて、さっきは軽くスルーしましたが、このfor文にはiという記号が沢山でてきます。
このiとはなにかというと、「変数」です。
「変数」とは・・・要するに、変わる数ですね。
中身がどんどん変わっていきます。
for文をもう一度見てみましょう。
for(i=0;i<360;i++){
for文に続く()の中身を見てみると、なにやら複雑なことになっています。
しかし前回、「;」は文末を意味すると説明しました。
「;」はそのほかに、こうした場合に、「区切り」としても使われるのです。
とすると、このfor文の()の中身は、「i=0」と「i<360」と「i++」に分けられるということが解ります。
最初の「i=0」は、変数iに、0を代入しなさい、という命令です。だからこのときiは0になります。
いちど、{}の中身、つまり moveとturnを実行したあと、今度はさらにループを続けるか、ということをfor文は判断します。
そのときに、「i<360」という式を使います。
これは文字通り「iが360より小さければ」またループを繰り返せ、ということになります。
では最後のi++はなんでしょうか?
これは、iの中身を1増やせ、という意味です。
試しにiの中身を2ずつ増やしてみましょう。「i++」の部分を「i+=2」に変えてセーブしてからリロードしてみてください。
どうなりましたか?
なんと円が半分だけになってしまいました。
これは、本来1ずつ足していれば360度全部描けたのに、2ずつ足したことによって、ループ回数が半分の180回しかなかったため、正しい円ではなく半円になってしまった、ということなのです。
これを利用すると面白いことができます。
たとえば、以下のようにすると八角形を描くことができます。
penDown();
for(i=0;i<360;i+=360/8){
move(360/8);
turn(360/8);
}
penUp();
360を8で割って、そのぶんだけ回転しながら描画しているわけです。
ちょうど8回で終わるように割り算しているので、ちょうど8角形が描けるわけです。
これ、もちろん三角形でも六角形でも20角形でも好きなカタチを描画することができるんですね。
でも、実はみんな意外と知らないのが、7角形のカタチなんです。
360を7で割ると、割り切れないんですね。
7角形は分度器では描くのは非常に難しいので、コンピュータに描かせるのが一番もっともらしいものになります。
実際に描かせるとこんな感じになります。
実に不思議なカタチをしていますね。
余談ですけど、小学校などで五角形とか八角形の描き方を習った頃に、僕はプログラムを書けば七角形が描けるよ、と言ったらひどくモテたことを思い出しました。プログラミングも意外なところで役に立つものです。
さて、ところでここで使われているiですけど、ループに使う変数を特別にループ変数とかイテレータとか呼んだりすることもあります。
ループの面白さが解っていただけたでしょうか?
さらにもうひとつ、変わったことをしてみましょう。
このループ変数i、実はループの中でも使うことができるんです。
試しにこんなことをやってみましょう。
for(i=0;i<360;i++){
move(10);
turn(i);
}
これ、どうなるかすぐにわかりますか?
10進んで、i度だけ曲がるわけです。でもiは1度から360度までどんどん上がっていくから、どんどん曲がり方が急になっていくわけですね。
何だコリャ!!
こんなゼンマイというか渦巻きというか、そんな図形もループを使うと簡単に描けてしまうのですね。
ちなみにですよ。
ループをさらにループさせるということもできるんです。
for(j=0;j<4;j++){
for(i=0;i<360;i++){
move(10);
turn(i);
}
turn(90);
}
iのループの外側に、jという別のループ変数を使ったループを作ってみました。
さっきの渦巻きループを4回繰り返していますよ。
さあ、どうなるか、想像できますか?
結果は、ぜひ試してみて下さい。
ではまた次回!
文・alan
Related posts:
