Processingで画像処理(画像の取り込み)

Processingを使って画像処理の勉強をしているのでまとめておきます。

画像処理を行うために、まず画像の取り込みと表示してみます。

画像の読み込み

画像の読み込みはPImage型の変数とloadImage関数を使います。 対応している形式はgif、jpg、tga、pngです。

画像のファイル名のみ指定すると、pdeと同じフォルダに入っている画像を読み込みます。任意の場所の画像を読み込みたい場合は、相対パス、もしくは絶対パスでファイルを指定します。パスで指定する場合はエスケープシーケンスが必要です。

また、URLで画像を指定することもできます。

PImage pict;

void setup()
{
    size(600, 400);
    //current directory
    pict = loadImage("image.jpg");
    //any directory
    pict = loadImage("C:\\Users\\Public\\Pictures\\image.jpg");
    //URL
    pict = loadImage("https://processing.org/img/processing-web.png");
}
void draw()
{
}

画像の表示

読み込んだ画像は、image関数を使って指定の場所に表示します。指定した座標が、画像の左上になります。

PImage pict;
void setup()
{
    size(600, 400);
    pict = loadImage("https://processing.org/img/processing-web.png");
    image(pict, 0, 0);
}
void draw()
{
}

このままだと少し問題があります。

ウインドウサイズをあらかじめ指定していますが、画像のサイズと異なっている場合は画像が途切れて表示されたり、余白が表示されたりします。

f:id:ArtificialArts:20180715080116j:plain

そこで画像の大きさでサイズを指定すればいいのですが、size関数 に変数を指定することができません。

PImage pict;
void setup()
{
    pict = loadImage("https://processing.org/img/processing-web.png");
    size(pict.width, pict.height);
    image(pict, 0, 0);
}
void draw()
{
}

このように書くと、エラーメッセージが表示されて実行することができません。

f:id:ArtificialArts:20180713233539j:plain

これはsetting関数を使うことで解決できます。Processing3.0で追加された関数で、この中ではsize関数に変数を使用することができます。

PImage pict;
void settings()
{
    pict = loadImage("https://processing.org/img/processing-web.png");
    size(pict.width, pict.height);
}
void setup()
{
    image(pict, 0, 0);
}
void draw()
{
}

また、surface.setResizableでサイズ変更を許可することでも対応できます。

PImage pict;
void setup()
{
    pict = loadImage("https://processing.org/img/processing-web.png");
    
    surface.setResizable(true);
    surface.setSize(pict.width, pict.height);
    
}
void draw()
{
    image(pict, 0, 0);
    noLoop();
}

※この場合、画像を表示するimage関数は、drawの中に入れないとうまく表示されませんでした。

こうすることで、読み込んだ画像の大きさでウインドウが表示されます。

f:id:ArtificialArts:20180713235521j:plain

次は画素を扱ってみます。