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

メインループ関数 draw( ) を使って円を繰返し描く 


  1. メインループ関数 draw

    1. Processingは,メインループ関数 draw( ) { } 内のブロックを1秒間に約60回繰返し実行する.

    2. 描いた実行画面の一枚をフレームという.この場合フレームを60回繰返し描画する.

    3. 1秒間に60回繰返し実行するブロック内の処理を,繰返し処理に利用する.

    4. 利用する関数

      ・println(frameRate); の記述でコンソール画面に,このコンピュータの1秒間の繰返し回数を表示する.

      ・frameRate ( x ); 1秒間の繰返し回数をxにする. 

      ・noLoop ( ); メインループ関数draw( )の繰返し実行を止める. 

      ・loop ( ); メインループ関数draw( )の繰返し実行を再開する. 


  2. 円を1個描く

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

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    int x = 100;//円の中心座標
    int y = 100;//円の中心座標
    
    void draw( ) {
      //中心x,y 座標に直径100ピクセルの円を描く
      ellipse(x, y, 100, 100);
      
    //save("st_ellipse_1c-a.jpg");// 実行結果を画像形式で保存
    
    }
    
    
    実行結果

  3. メインループ関数を使って円の中心座標を変えていく

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

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    int x = 100;//円の中心座標
    int y = 100;//円の中心座標
    
    void draw( ) {
    
      ellipse(x, y, 100, 100);
      x = x + 50;//1フレームごとにx座標を50ピクセル移動する
      y = y + 50;//1フレームごとにy座標を50ピクセル移動する
    
    
    //save("st_ellipse_1c-b.jpg");// 実行結果を画像形式で保存
    
    }
    
    
    実行結果


  4. メインループ関数を使って円の半径を変えていく

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

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //円を描く
    
    void setup ( ) {
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
      strokeWeight(10);//線の太さを10ピクセルに
      noFill( );//図形の内部を透明にする
    }
    
    int x = 250;//円の中心座標
    int y = 250;//円の中心座標
    int d = 20;//円の半径
    
    void draw( ) {
    
      ellipse(x, y, d, d);
      d = d + 30;//1フレームごとに直径を30ピクセル大きくする
    
    //save("st_ellipse_1c-c.jpg");// 実行結果を画像形式で保存
    
    }
    
    
    実行結果

[ 目次に戻る ]