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

キャンバスの座標系を平行移動する



Processingリファレンス - 図形を描く
  1. キャンバスの2次元座標系と平行移動

    a. キャンバスの2次元座標系

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

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

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

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






    b. キャンバスの座標系を平行移動する

    (1) 座標系の原点の位置は変えることができる.

    (2) オリジナルのキャンバスの原点(0, 0)は左上のコーナにある.

    (3) 座標系の原点(0, 0)を(x, y)に移動する.

      2次元図形の座標変換の関数を利用する.

      translate(x, y);// 座標軸の原点(0,0)をキャンバスの(x, y)に移動





    機能processingの関数単位はピクセル単位
    平行移動translate (x, y);X軸方向の移動量 (x)とY軸方向の移動量 (y)  



  2. 最初に,キャンバス(500X500)にX軸とY軸を描く.

    ・キャンバスの原点(0, 0)は左上のコーナにある.

    ・ size(500, 500);の指定によりキャンバスの大きさは500X500である.width = X方向の幅500,height = Y方向の幅500.

    line( 0, 0, width, 0);//X軸を描く

    line( 0, 0, 0, height);//Y軸を描く


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

    ソースファイル
    // キャンバスのX軸とY軸
    
    void setup() {
      size(500, 500);//キャンバスのサイズは500mX500m
    }
    
    void draw() {
      background(255);//);//キャンバスの背景色 白
    
      strokeWeight(10);//線の太さをピクセル単位で
      stroke(255,0,0);//軸の線色を赤
      //座標軸を描く
      line( 0, 0, width, 0);//X軸
      line( 0, 0, 0, height);//Y軸
      
      //(100, 100)の位置に四角形を描く
      strokeWeight(1);//線の太さをピクセル単位で
      stroke(0,0,255);//軸の線色を青
      rect(100, 100, 100, 100);
    
    //save("draw_01a_xy1.jpg");// 実行結果を画像で保存
    }
    
    
    実行結果

    500X500のキャンバスと座標軸



  3. このキャンバスの中央 (width/2, height/2) に原点とX-Y座標軸を平行移動する

    (1) キャンバスの原点(0, 0)は左上のコーナにある. size(500, 500);の指定によりキャンバスの大きさは500X500である.

      width = X方向の幅500,height = Y方向の幅500.

    (2) size(width, height);の原点をキャンバスの中央(width/2, height/2)に移動する.

     ・2次元図形の座標変換の関数を利用する.

     translate(width/2, height/2);// 座標軸の原点(0,0)をキャンバスの中央に移動

     この行の後は,原点移動した新座標系での座標値を使用する.


    (3) 原点(width/2, height/2)移動後の座標軸を描く.

     line( -width/2, 0, width/2, 0);//移動後のX軸を描く

     line(0, -height/2, 0, height/2);//移動後のY軸を描く


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

    ソースファイル
    // キャンバスの中央()に原点を移動する
    
    void setup() {
      size(500, 500);//キャンバスのサイズは500mX500m
    }
    
    void draw() {
      background(255);//);//キャンバスの背景色 白
    
      strokeWeight(10);//線の太さをピクセル単位で
      stroke(255,0,0);//軸の線色を赤
    
      // 座標軸の原点(0,0)をキャンバスの中央に移動
      translate(width/2, height/2);
      //この後の行は原点移動後の座標を使う
    
      //座標軸を描く
      line( -width/2, 0, width/2, 0);//移動後のX軸
      line(0, -height/2, 0, height/2);//移動後のY軸
    
      //(100, 100)の位置に四角形を描く
      strokeWeight(1);//線の太さをピクセル単位で
      stroke(0,0,255);//軸の線色を青
      rect(100, 100, 100, 100);
    
    //save("draw_01a_xy2.jpg");// 実行結果を画像で保存
    }
    
    
    実行結果

    キャンバスの中央に原点を移動

[ 目次に戻る ]