簡単なプログラムを繋げ合わせる

今まで学んだプログラムはどれも数行あれば実行できる簡単なプログラムでした。 こういったもので最初に動画で見たようなビジュアル表現が可能なのでしょうか? 答えはYesです。基本的にどのような複雑なプログラムも今まで学んだようなプログラムを組み合わせて作っているのです。 もっとも図形や文字を描くだけでなくマウスや音声の反応によってインタラクティブな表現をしたいという場合には、 もう少し命令の数を覚えていかなければなりません。 今回は今までに学んだプログラムを組み合わせて少し凝ったプログラムを組んでみましょう。

//ランダムな色をした四角形を画面に順に表示するプログラム

//初期設定
size(200,200);
colorMode(HSB,100);
background(99);

//繰り返しと描画
for(int y=0; y < 200; y+=10){
   for(int x=0; x < 200; x+=10){
       float f = random(99);
       fill(f,90,90);
       rect(x,y,8,8);
   }
}

上記の説明を行います。初期設定はサイズと色を指定しています。 次はfor文を入れ子(ネスト)にしています。これは1つめのfor文の1回目の繰り返時に、2個目のfor文の繰り返しを全部行います。 具体的に説明すると1つ目の繰り返しでyが0のときにxが0〜190まで繰り返します。この繰り返しを行うことで1行ずつ短形を描いていっています。 またint f = int(random(99));はint a = random(0,99); int f = int(a);と同じ意味です。 今まで通りの記述方法でもいいですが、今回のような記述方法だと1行短く記述することが可能となります。実行結果は以下になります。


プログラムを改良する

上記のプログラムを少し改造してみましょう。上の例だと短形しか描いていないので、今回は短形→円→短形の順に描いてみましょう。 上記の例に数行プログラムを追加します。

//初期設定
size(200,200);
colorMode(HSB,100);
background(99);
int count = 0;

//繰り返しと描画
for(int y=0; y < 200; y+=10){
   for(int x=0; x < 200; x+=10){
       float f = random(99);

       //偶数の場合
       if(count%2 == 0){
          fill(f,90,90);
          ellipse(x+4,y+4,8,8);
          count++;
       //奇数の場合
       } else {
          fill(f,90,90);
          rect(x,y,8,8);
          count++;
       }
   }
}

追加したものを順番に説明していきます。5行目のcountは図形の個数をカウントする変数です。何も描いていない段階なので0が入っています。 13行目からは、入れ子になったfor文にif〜elseを追加しています。ここでのcount%2 == 0とはカウント変数を2でわったときの値は0か否かということです。 0だった場合は円を描き、0でなかった場合は四角形を描きます。どちらも描いた後はcount変数を+1して図形のカウントを増やしています。 このcountが2で割って0になるか否かというのは、割って0ということは偶数ということです。逆に0でないということは奇数になります。 これを繰り返すことで交互に図形の描画を変えています。

上記が結果になっています。きちんと交互に図形が変わっていますね。 プログラミングというのは今回のように簡単なプログラムを組み合わせていき、少しずつ改良改善をしていくことがポイントになります。 自身でも今まで学んだプログラムを組み合わせていき、様々な表現を作りだしてみましょう。

広告