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

表示の順番:図形はプログラムに描いた順番に重ね書きする



Processingリファレンス - 図形を描く

  1. 図形のプログラムと表示の順序

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

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

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //四角形を描く
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    int x11 = 50; //整数型 始点のx座標
    int y11 = 50; //整数型 始点のy座標
    int w12 = 200;//四角形の幅
    int h12 = 200;//四角形の高さ
      int x21 = 100;//整数型 始点のx座標
      int y21 = 100;//整数型 始点のy座標
      int w22 = 200;//四角形の幅
      int h22 = 200;//四角形の高さ
        int x31 = 150;//整数型 始点のx座標
        int y31 = 150;//整数型 始点のy座標
        int w32 = 200;//四角形の幅
        int h32 = 200;//四角形の高さ
          int x41 = 200;//整数型 始点のx座標
          int y41 = 200;//整数型 始点のy座標
          int w42 = 200;//四角形の幅
          int h42 = 200;//四角形の高さ
    
    void draw() {
    
       strokeWeight(30);//線の太さをピクセル単位で
    
       //@番目に黒で描く
       stroke(0,0,0);//線色を黒
       rect(x11, y11, w12, h12);//四角形1を描く
       //A番目に赤で描く
       strokeJoin(ROUND);//コーナーを丸に
       stroke(255,0,0);//線色を赤
       rect(x21, y21, w22, h22);//四角形2を描く
       //B番目に緑で描く
       strokeJoin(BEVEL);//コーナーを斜めにカットに
       stroke(0,255,0);//線色を緑
       rect(x31, y31, w32, h32);//四角形3を描く
       //C番目に青で描く
       strokeJoin(MITER);//コーナー??
       stroke(0,0,255);//線色を青
       rect(x41, y41, w42, h42);//四角形4を描く
    
    save("line_01f.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示


  2. 図形の内部を透明にする

    ・図形の内部を透明にする関数 noFill( ).

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

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //四角形を描く 2図形の内部を透明
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    
      noFill( );//図形の内部を透明にする
    }
    
    int x11 = 50; //整数型 始点のx座標
    int y11 = 50; //整数型 始点のy座標
    int w12 = 200;//四角形の幅
    int h12 = 200;//四角形の高さ
      int x21 = 100;//整数型 始点のx座標
      int y21 = 100;//整数型 始点のy座標
      int w22 = 200;//四角形の幅
      int h22 = 200;//四角形の高さ
        int x31 = 150;//整数型 始点のx座標
        int y31 = 150;//整数型 始点のy座標
        int w32 = 200;//四角形の幅
        int h32 = 200;//四角形の高さ
          int x41 = 200;//整数型 始点のx座標
          int y41 = 200;//整数型 始点のy座標
          int w42 = 200;//四角形の幅
          int h42 = 200;//四角形の高さ
    
    void draw() {
    
       strokeWeight(30);//線の太さをピクセル単位で
    
       //@番目に黒で描く
       stroke(0,0,0);//線色を黒
       rect(x11, y11, w12, h12);//四角形1を描く
       //A番目に赤で描く
       strokeJoin(ROUND);//コーナーを丸に
       stroke(255,0,0);//線色を赤
       rect(x21, y21, w22, h22);//四角形2を描く
       //B番目に緑で描く
       strokeJoin(BEVEL);//コーナーを斜めにカットに
       stroke(0,255,0);//線色を緑
       rect(x31, y31, w32, h32);//四角形3を描く
       //C番目に青で描く
       strokeJoin(MITER);//コーナー??
       stroke(0,0,255);//線色を青
       rect(x41, y41, w42, h42);//四角形4を描く
    
    //save("line_01g.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示

[ 目次に戻る ]