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

キャンバスと座標系



Processingリファレンス - 図形を描く
  1. プログラムの実行結果はキャンバス(実行画面)に表示する.


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

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

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

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

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


  3. キャンバスの大きさ500X500を指定する.背景色を指定しないと背景はグレーになる.

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

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

    ソースファイル
    //キャンバスを作成 1
    
    void setup() {
    
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
    
      //background(255);//キャンバスの背景色を指定しない
    
    //save("draw_01a.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示

  4. キャンバスの大きさ500X500と背景色白を指定する

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

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

    ソースファイル
    //キャンバスを作成 2
    
    void setup() {
    
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
    
      background(255);//キャンバスの背景色 白
    
    //save("draw_01b.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X500のキャンバスを表示

  5. キャンバスの大きさ500X200と背景色赤を指定する

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

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

    ソースファイル
    //キャンバスを作成 3
    
    void setup() {
    
      //キャンバス(実行画面)の設定
      size(500, 200); //ピクセル単位で大きさを指定する
    
      background(255,0,0);//キャンバスの背景色RGBで指定 赤
    
    //save("draw_01c.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

    500X200のキャンバスを表示

[ 目次に戻る ]