navigationProcessing入門web目次1準備2最低限の知識で作るアニメーション3プログラミングの基礎技術14多彩なアニメーションを作るために2最低限の知識で作るアニメーション2-1座標軸の理解と基本的な図形2-2色と図形の表示順序2-3データについて~基本編~2-4絵を描いてみよう2-4繰り返し2-6アニメーションの基本ページトップAbout2-5繰り返し繰り返しは、プログラミングの必須知識です。アニメーション処理を書くためにも、繰り返しを理解することが必要です。完璧にマスターしましょう。繰り返し処理のメリット円の数を増やす。繰り返しを制御する変数の初期値を1にする変数の増分を変える円をたくさんかく円をたくさんかく(失敗例)繰り返し処理のメリット上記のように三つの円をかくには、今までは円を描く処理を三度記述する必要がありました。プログラムを書くのがとても大変です。そのプログラムのどこかにミスがあった際、それを見つけるのはウンザリするような作業です。円の大きさを変えるといった修正が発生すると、すべてのコードが書き直しになります。「繰り返し処理」という技術を用いると、そういった問題を解決できます。下記は、繰り返し処理を使わないで書いたコードです。size(200,100);ellipse(width/2-50,height/2,50,50);ellipse(width/2,height/2,50,50);ellipse(width/2+50,height/2,50,50);繰り返し処理を用いると、下記になります。この例ではコード量が二行ほど増してしまいますが、円の数が百や二百、あるいは一万、二万と増えた場合はこのほうが断然コード量が減ります。修正や変更も容易です。50;}円の数を増やす下記は、円を三個から十個に増やす場合のコードです。<3」が「i<10」になっただけです。50;}実行結果は、下記になります。繰り返し処理の文法まずは大勢を理解しましょう。大まかには、繰り返し処理の文法は下記のようになります。繰り返し行う処理}下記はその具体例です。println(i);}では細かく説明します。i=0」「i<3」「i++」があります。これによって、繰り返し回数を定めることができます。=0;」はint型の変数iを宣言し、その初期値に0を代入するという意味です。「<」は不等号記号で、「小なり」と呼びます。「i<3」は、「どのようなときに繰り返処理を行うか」を定めています。「i++」は「繰り返し処理のたびに、iの値が一つ大きくなる」ことを定めています。i=0;i<3;i++)というのは、「変数iの初期値を0とし、繰り返し処理のたびにその値を1ずつ増やし、iの値が3未満のときに繰り返し処理を行う」という意味になります。この場合の繰り返し回数は三回になります。変数iが0のとき、1のとき、2のときで合計3回です。波括弧に囲まれた部分に、繰り返し行う処理を記述します。上記例ではprintln(i)の一行のみですが、複数行の処理を行うことも可能です。(波括弧とは「{」や「}」のことです。「{」をはじめ波括弧、「}」を終わり波括弧と呼びます)繰り返しの例println()は、丸括弧内の文字や変数の値をコンソールに出力します。文字列の場合は""でくくります。println(変数);println("文字列");上記例では、println()という命令が三度繰り返されました。下記のようになります。//丸括弧の中身をコンソールに出力する}この際、繰り返しを制御する変数iの値がどのように変化するかを確認しましょう。その答えはコンソールに出力されますが、「0,1,2,3,4」になります。繰り返しを制御する変数の初期値を1にする変数iの初期値は0でなくても構いません。1にした場合、繰り返しを制御する変数iがどのように変化するかを確かめましょう。答えは「四回の繰り返処理が行われ、変数iは「1,2,3,4」と変化する」です。//丸括弧の中身をコンソールに出力する}上記がその答えです。この場合、変数iの値は「1,2,3,4,5」と変化します。コンソールで確かめましょう。変数の増分を変える上記例では、繰り返しのたびに変数iの値を1ずつ大きくしました。この値は自由に変更することができます。下記では、変数の増分を2としました。println(i);}この場合、コンソールには「0,2,4,6,8,10」が出力されます。繰り返しのカイスは、6回になります。変数iの値は増やすだけでなく、減らすこともできます。下記では、「i++」を「i--」に変更しました。これで繰り返しのたびに変数iが1ずつ減ります。ついでに変数iの初期値を10とし、繰り返しの条件は「i>-1」(i大なり-1)とします。これでカウントダウンができます。println(i);}上記を実行すると、コンソールには「10,9,8,7,6,5,4,3,2,1,0」と出力されます。円をたくさんかく再び円を出力する例です。//半径25の円をかく。//繰り返しのたびにcircleXの値を50ずつ大きくする。(円を横にずらす)}このコードのポイントは、繰り返しのたびにcircleX(円の中心座標に用いる変数)の値を増やしていることです。円が重ならないようにするには、こういった処理が必要です。実行結果は下記になります。円をたくさんかく(失敗例)やりがちな失敗例です。繰り返しのたびに円を描く位置を移動しないと、同じ場所に円が描かれてしまうため、見た目には繰り返しが行われたことがわかりません。//半径25の円をかく。中心のx座標を50で固定する。}上記コードを実行すると、円を描く処理が10回繰り返されます。下記結果のように、同じ場所に円が描かれてしまうため、それがわかりません。PreviousNext。