Last updated: 2015 -2014. Kajiyama                    [ 目次に戻る ]

for ループを使って円を繰返し描く


  1. for ループ

      a. for ループとは、ブロック内の処理を指定した条件が満たされるまで繰り返し実行する.

      b. for ループの構文

      //サンプル 円の中心座標を forで処理
      
      void setup ( ) {
        size(500, 500); //キャンバスの大きさ
      }
      
      int i;
      int x = 0;int y = 0;
      
      void draw( ) {
        for(i = 1; i <= 45; i=i+1) {
          x = 10 * i;y = 10 * i;
          ellipse(x, y, 10, 10);
        }
      }
      
      
      
      c. 2重 for ループの構文

      //サンプル 円の中心座標を2重 forで処理
      
      void setup ( ) {
        size(500, 500); //キャンバスの大きさ
      }
      
      int i;int j;
      int x = 0;int y = 0;
      
      void draw( ) {
        for(i = 1; i <= 45; i=i+1) {
           for(j = 1; j <= 45; j=j+1) {
             x = 10 * i;y = 10 * j;
             ellipse(x, y, 10, 10);
           }
        }
      }
      
      


  2. 円を描く

    ・図形はプロクラムの順序で上書きされる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //2重のforループを使用して円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    void draw( ) {
      ellipse(100, 100, 100, 100);
      ellipse(150, 150, 100, 100);
      ellipse(200, 200, 100, 100);
      ellipse(250, 250, 100, 100);
      ellipse(300, 300, 100, 100);
      ellipse(350, 350, 100, 100);
      ellipse(400, 400, 100, 100);
      
    //save("st_ellipse_1a.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果


  3. 円の中心座標を変数に置き換える-1

    ・図形はプロクラムの順序で上書きされる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    void draw( ) {
    int a = 50;
    int d = 100;//円の直径
    
    int x1 = a*2;int y1 = a*2;//円の中心の座標
    int x2 = a*3;int y2 = a*3;
    int x3 = a*4;int y3 = a*4;
    int x4 = a*5;int y4 = a*5;
    int x5 = a*6;int y5 = a*6;
    int x6 = a*7;int y6 = a*7;
    int x7 = a*8;int y7 = a*8;
    
      ellipse(x1, y1, d, d);//円を描く
      ellipse(x2, y2, d, d);
      ellipse(x3, y3, d, d);
      ellipse(x4, y4, d, d);
      ellipse(x5, y5, d, d);
      ellipse(x6, y6, d, d);
      ellipse(x7, y7, d, d);
    
    //save("st_ellipse_1a2.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果


  4. forループを使用して円の中心座標の変数を動かす

    ・図形はプロクラムの順序で上書きされる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    void draw( ) {
    int a = 50;
    int d  =100;
    
       for (int i = 2; i <=8; i = i+1 ) { 
         ellipse(a*i, a*i, d, d);
       }
    
    //save("st_ellipse_1a3.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果


  5. forループを使用して円の中心座標の変数を水平に動かす

    ・図形はプロクラムの順序で上書きされる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    void draw( ) {
    int a = 50;
    int d  =100;
    
       for (int i = 2; i <=8; i = i+1 ) { 
         ellipse(a*i, a*2, d, d);
       }
    
    //save("st_ellipse_1a-2.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果


  6. forループを使用して円の中心座標の変数を垂直に動かす

    ・図形はプロクラムの順序で上書きされる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    void draw( ) {
    int a = 50;
    int d  =100;
    
       for (int i = 2; i <=8; i = i+1 ) { 
         ellipse(a*2, a*i, d, d);
       }
    
    //save("st_ellipse_1a-3.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果


  7. 2重のforループを使用して縦と横に繰返し円を描く

    ・図形はプロクラムの順序で上書きされる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    void draw( ) {
    int a = 50;
    int d = 100;
    
     for (int i = 2; i <=8; i = i+1 ) { 
        for (int j = 2; j <=8; j = j+1 ) { 
          ellipse(a*i, a*j, d, d);
        }
     }
    
    //save("st_ellipse_1b.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

[ 目次に戻る ]