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

キャンバスに直線・長方形・円を描く



Processingリファレンス - 図形を描く
  1. キャンバス size ( ) の2次元座標系

    ・キャンバスの二次元の表示画面には,

     それぞれのピクセル(画素)の位置にXY座標が与えられる.

    ・この座標系は,算数や数学で習ったものとは,

     Y軸の向きが違うので,注意が必要である.

  2. キャンバスに直線 line ( ) を描く

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

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

    ソースファイル
    //直線を描く
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    //線分P1P2を座標で定義する
       //始点P1
       int x1 = 10; //整数型 始点のx座標
       int y1 = 20; //整数型 始点のy座標
       //終点P2
       int x2 = 450;//整数型 終点のx座標
       int y2 = 400;//整数型 終点のy座標
    
    void draw() {
    
       line(x1, y1, x2, y2);//直線P1P2を描く
    
    //save("line_01a.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示



  3. キャンバスに長方形 rect ( ) を描く

    ・長方形の関数 rect(始点のx座標,始点のy座標,長方形の横幅,長方形の縦幅).定義の仕方に注意する.

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

    ソースファイル
    //長方形を描く
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    //長方形の始点と横縦の幅を定義する
       //始点P1
       int x1 = 100; //整数型 長方形始点のx座標
       int y1 = 100; //整数型 長方形始点のy座標
       //終点P2
       int w = 300;//整数型 長方形の横幅(ピクセル単位)
       int h = 200;//整数型 長方形の縦幅(ピクセル単位)
    
    void draw() {
    
       rect(x1, y1, w, h);//長方形を描く
    
    //save("line_01a-2.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示



  4. キャンバスに円 ellipse ( ) を描く

    ・円の関数 ellipse(中心のx座標,中心のy座標,円の横幅,円の縦幅).定義の仕方に注意する.

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

    ソースファイル
    //円を描く
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色 白
    }
    
    //円の中心と横縦の幅を定義する
       //始点P1
       int x1 = 250; //整数型 円の中心のx座標
       int y1 = 250; //整数型 円の中心のy座標
       //終点P2
       int w = 300;//整数型 円の横幅(ピクセル単位)
       int h = 300;//整数型 円の縦幅(ピクセル単位)
    
    void draw() {
    
       ellipse(x1, y1, w, h);//円のを描く
    
    //save("line_01a-3.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示

[ 目次に戻る ]