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

線の性質を決める



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

  1. 直線の持つ性質

    ・直線の関数 line(始点のx座標,始点のy座標,終点のx座標,終点のy座標)

    ・アンチエイリアシング機能

    ・線の太さ

    ・線の両端の形状

    ・線の色
    ・図形のコーナーの形状


  2. ギザギザの直線と滑らかな直線を描き分ける

    ・アンチエイジング!!を行うアンチエイリアシング関数 noSmooth()  smooth().

    ・Processing 2.0以降は何もしなくてもアンチエイリアシング機能が働いている.

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

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

    ソースファイル
    //直線を描く 1
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    int x11 = 10; //整数型始点のx座標
    int y11 = 20; //整数型 始点のy座標
    int x12 = 450;//整数型 終点のx座標
    int y12 = 400;//整数型 終点のy座標
      int x21 = 10; //整数型始点のx座標
      int y21 = 60; //整数型 始点のy座標
      int x22 = 450;//整数型 終点のx座標
      int y22 = 440;//整数型 終点のy座標
        int x31 = 10; //整数型始点のx座標
        int y31 = 100;//整数型 始点のy座標
        int x32 = 450;//整数型 終点のx座標
        int y32 = 480;//整数型 終点のy座標
    
    void draw() {
    
    //何もしないとアンチエイリアシング機能が働いている
    line(x11, y11, x12, y12);//何もしない直線1を描く
    noSmooth();//アンチエイリアシングを無効にする
    line(x21, y21, x22, y22);//直線2を描く
    smooth();//アンチエイリアシングを有効にする
    line(x31, y31, x32, y32);//直線3を描く
    
    //save("line_01b.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理をめる
    }
    
    
    実行結果

    500X500のキャンバスを表示


  3. 線の太さを描き分ける

    ・線の太さをピクセル単位で指定する関数 strokeWeight()

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

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

    ソースファイル
    //直線を描く 2
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    int x11 = 10; //整数型始点のx座標
    int y11 = 20; //整数型 始点のy座標
    int x12 = 450;//整数型 終点のx座標
    int y12 = 400;//整数型 終点のy座標
      int x21 = 10; //始点のx座標
      int y21 = 60; //整数型 始点のy座標
      int x22 = 450;//整数型 終点のx座標
      int y22 = 440;//整数型 終点のy座標
        int x31 = 10; //整数型始点のx座標
        int y31 = 100;//整数型 始点のy座標
        int x32 = 450;//整数型 終点のx座標
        int y32 = 480;//整数型 終点のy座標
    
    void draw() {
    
    strokeWeight(1);//線の太さを1ピクセルに
    line(x11, y11, x12, y12);//直線1を描く
    strokeWeight(10);//線の太さを10ピクセルに
    line(x21, y21, x22, y22);//直線2を描く
    strokeWeight(30);//線の太さを30ピクセルに
    line(x31, y31, x32, y32);//直線3を描く
    
    //save("line_01c.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示


  4. 線の両端の形状を丸か四角にする

    ・両端の形状をしていする関数 strokeCape( ).

    ・Processing 2.0以降は何もしなくてもアンチエイリアシング機能が働いている.?

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

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

    ソースファイル
    //直線を描く 3
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    int x11 = 100;//整数型 始点のx座標
    int y11 = 100;//整数型 始点のy座標
    int x12 = 400;//整数型 終点のx座標
    int y12 = 100;//整数型 終点のy座標
      int x21 = 100;//整数型 始点のx座標
      int y21 = 200;//整数型 始点のy座標
      int x22 = 400;//整数型 終点のx座標
      int y22 = 200;//整数型 終点のy座標
        int x31 = 100;//整数型 始点のx座標
        int y31 = 300;//整数型 始点のy座標
        int x32 = 400;//整数型 終点のx座標
        int y32 = 300;//整数型 終点のy座標
          int x41 = 100;//整数型 始点のx座標
          int y41 = 400;//整数型 始点のy座標
          int x42 = 400;//整数型 終点のx座標
          int y42 = 400;//整数型 終点のy座標
    
    void draw() {
    
    strokeWeight(20);//線の太さを20ピクセルに
    
    //何もしない 先端を四角
    line(x11, y11, x12, y12);//直線1を描く
    strokeCap(SQUARE);//先端を四角に
    line(x21, y21, x22, y22);//直線2を描く
    strokeCap(ROUND);//先端を丸に
    line(x31, y31, x32, y32);//直線3を描く
    strokeCap(PROJECT);//先端を四角
    line(x41, y41, x42, y42);//直線4を描く
    
    //save("line_01d.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示


  5. 線の色

    ・関数 stroke(R, G, B).



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

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

    ソースファイル
    //直線を描く 4
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    int x11 = 100;//整数型 始点のx座標
    int y11 = 100;//整数型 始点のy座標
    int x12 = 400;//整数型 終点のx座標
    int y12 = 100;//整数型 終点のy座標
      int x21 = 100;//整数型 始点のx座標
      int y21 = 200;//整数型 始点のy座標
      int x22 = 400;//整数型 終点のx座標
      int y22 = 200;//整数型 終点のy座標
        int x31 = 100;//整数型 始点のx座標
        int y31 = 300;//整数型 始点のy座標
        int x32 = 400;//整数型 終点のx座標
        int y32 = 300;//整数型 終点のy座標
          int x41 = 100;//整数型 始点のx座標
          int y41 = 400;//整数型 始点のy座標
          int x42 = 400;//整数型 終点のx座標
          int y42 = 400;//整数型 終点のy座標
    
    void draw() {
    
       strokeWeight(30);//線の太さをピクセル単位で
       //何もしない
       line(x11, y11, x12, y12);//直線1を描く
       stroke(255,0,0);//線色を赤
       line(x21, y21, x22, y22);//直線2を描く
       stroke(0,255,0);//線色を緑
       line(x31, y31, x32, y32);//直線3を描く
       stroke(0,0,255);//線色を青
       line(x41, y41, x42, y42);//直線4を描く
    
    //save("line_01e.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示


  6. 図形のコーナーの形状を丸か四角にする

    ・両端の形状をしていする関数 strokeCape( ).

    ・Processing 2.0以降は何もしなくてもアンチエイリアシング機能が働いている.?

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

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

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

    500X500のキャンバスを表示

[ 目次に戻る ]