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

デスクトップやWEBにある写真・画像を読込,表示する     



Processingリファレンス - 画像変数・画像の読込み・表示
  1. Processingで使用できるラスター形式の写真・画像は,JPG/ GIF/ PNG/ TGAの拡張子がついている.

    ・画像ファイルは,わかりやすい場所,例えばデスクトップに置くと便利.

     上部のタイトル欄にある画像に,image_demo01.jpgとimage_demo02.pngと名前を付けてデスクトップに保存する.


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

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

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

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

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


  3. まずは,デスクトップに置いた写真・画像をSketchの「data」フォルダーの中に取り込む

    ・アイコン をクリックし新規にSketchフォルダーを作成する.

    ・メニューから 「Sketch」->「Add File...」をクリックし,先ほどの画像ファイルを選択し,これを「開き」読み込む.

    ・メニューから 「Sketch」->「Show Sketch Folder」をクリックし,

     先ほどの画像ファイルが「Sketch」フォルダーの中の「data」フォルダーの中にあることを確認する.

    ・アイコン をクリックし新規Sketchファイルを名前を付けて保存し,安心して次に進む.


    1. 「data」フォルダーの中の1枚の写真・画像をloadImage(画像ファイル名)で読込みimage(画像変数,x座標,y座標)で表示する

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

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

      ソースファイル
      //ファイル名:sketch_xxxxxxxxxx.pde 
      //写真・画像を読込み表示
      
      PImage myimg01;//画像変数myimg01に写真格納場所を用意
      
      void setup() {
        // キャンバス(実行画面)の設定
        size(500, 500); // キャンバスの大きさ
        background(255);// キャンバスの背景色 白
      
        myimg01= loadImage("image_demo01.jpg");// 画像を読込
      
      }
      
      void draw() {
      
        image(myimg01,50,50);// 実際の大きさで画像表示
      
      //save("image_01a.jpg");// 実行結果を画像形式で保存
      //noLoop();//繰返し処理を止める
      
      }
      
      
      実行結果

      500X500のキャンバスに表示

    2. マウスで写真・画像の位置を動かす

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

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

      ソースファイル
      //ファイル名:sketch_xxxxxxxxxx.pde 
      //写真・画像を読込み表示
      
      PImage myimg01;//画像変数myimg01に写真格納場所を用意
      
      void setup() {
        // キャンバス(実行画面)の設定
        size(500, 500); // キャンバスの大きさ
        //background(255);// キャンバスの背景色 白
      
        myimg01= loadImage("image_demo01.jpg");// 画像を読込
      
      }
      
      void draw() {
      
        //image(myimg01,50,50);// 実際の大きさで画像表示
        image(myimg01,mouseX,mouseY);// マウスのxy座標
      
      //save("image_01a2.jpg");// 実行結果を画像形式で保存
      //noLoop();//繰返し処理を止める
      
      }
      
      
      実行結果

      マウスを動かすと画像がついてくる

    3. 画像のサイズを測定し,image(画像変数,x座標,y座標,画像幅width,画像高height)で画像を拡大縮小表示する

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

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

      ソースファイル
      //ファイル名:sketch_xxxxxxxxxx.pde 
      //写真・画像を読込み表示
      
      PImage myimg01;//画像変数myimg01に写真格納場所を用意
      
      void setup() {
        // キャンバス(実行画面)の設定
        size(500, 500); // キャンバスの大きさ
        background(255);// キャンバスの背景色 白
      
        myimg01= loadImage("image_demo01.jpg");// 画像を読込
        // 画像サイズの値をコンソールに表示
        println(myimg01.width);  // 画像幅widthの表示
        println(myimg01.height); // 画像高heightの表示
      
      }
      
      void draw() {
      
        image(myimg01,50,50);// 実際の大きさで画像表示
       // 1/2縮小で画像表示
       image(myimg01,300,50,myimg01.width/2, myimg01.height/2);
      
      //save("image_01b.jpg");// 実行結果を画像形式で保存
      //noLoop();//繰返し処理を止める
      
      }
      
      
      実行結果

      実際の大きさと1/2縮小画像


    4. 「data」フォルダーの中の2枚の写真・画像をloadImage( )で読込みimage( )で表示する

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

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

      ソースファイル
      //ファイル名:sketch_xxxxxxxxxx.pde 
      //写真・画像を読込み表示
      
      PImage myimg01;//画像毎に格納する場所を用意
      PImage myimg02;
      
      void setup() {
        // キャンバス(実行画面)の設定
        size(500, 500); // キャンバスの大きさ
        background(255);// キャンバスの背景色 白
      
        //「data」フォルダから画像を読込む
        myimg01= loadImage("image_demo01.jpg");
        myimg02= loadImage("image_demo02.png");
      
      }
      
      void draw() {
      
        image(myimg01,50,50);// 実際の大きさで画像表示
        image(myimg02,250,250);
      
      //save("image_01c.jpg");// 実行結果を画像形式で保存
      //noLoop();//繰返し処理を止める
      
      }
      
      
      実行結果

      異なる画像を張りこむ


  4. WEB上の写真・画像を取り込みキャンバス(実行画面)に表示する

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

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

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //写真・画像を読込み表示
    
    PImage myimg03;//画像変数myimg03に写真格納場所を用意
    
    void setup() {
    
      // WEBから画像を読込む
    String url = "http://monge.tec.fukuoka-u.ac.jp/"
    +"cad_SketchUp_exhibi/model/14ta/26-ta141003-998-01.png";
    myimg03 = loadImage(url,"png");
    
      // 画像サイズの値をコンソールに表示
      println(myimg03.width);  // 画像幅widthの表示 640
      println(myimg03.height); // 画像高heightの表示 468
    noLoop();//これっきり
    
      // 写真に合わせたキャンバスの大きさ設定
      size(myimg03.width, myimg03.height); 
      background(255);// キャンバスの背景色 白
    
    }
    
    void draw() {
    
      image(myimg03,0,0);// 実際の大きさで画像表示
    
    //save("image_01d.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    
    }
    
    
    実行結果

    640X468のキャンバスに表示

[ 目次に戻る ]