Processing lesson(番外編) 画像の読み込み)

Note
教材を使用される方は、“lesson資料のご利用について”のご一読をお願いします。

自分で作った画像をProcessingで読み込むこともできます。

例1. 画像を読み込む

// 画像を読むにはPImageクラスを使う
PImage pict;

void setup(){
    size(600, 400);
    // プログラムと同じフォルダに画像を配置し、読み込む
    pict = loadImage("Anpanman.png");
    image(pict, 0, 0); // 左0, 上0の座標に画像を表示する
}

../../images/lesson/2020/09/スクリーンショット-2020-09-23-10.20.40-1024x722.png 左0, 上0の座標に画像を表示する


例2.画像の大きさにキャンバスを設定する

PImage pict;
// 画像の大きさを扱う時は settings()関数を使う
void settings(){
    pict = loadImage("Anpanman.png");
    // 画像のサイズの大きさのキャンバスに設定する 
    size(pict.width, pict.height);
}

void setup(){
    image(pict, 0, 0); // 左0, 上0の座標に画像を表示する
}

../../images/lesson/2020/09/スクリーンショット-2020-09-23-10.22.00.png


例3. マウス位置に画像を描く

PImage pict;
void setup(){
    pict = loadImage("Anpanman.png");
    size(600, 600);
}

void draw(){
    background(255,255,255); //背景を都度消す
    image(pict, mouseX, mouseY); //マウス位置に画像を描く
}

../../images/lesson/2020/09/export-3.gif


例4. 画像を大きくする・落書きする

PImage pict;

// 画像の大きさを扱う時は settings()関数を使う
void settings(){
    pict = loadImage("Anpanman.png");
    // 画像のサイズを幅4倍、高さ4倍に拡大する
    pict.resize(pict.width4, pict.width4);
    // 画像のサイズの大きさのキャンバスに設定する
    size(pict.width, pict.height);
}
void setup(){
    image(pict, 0, 0); // 左0, 上0の座標に画像を表示する
}

void draw(){
// 色ペンのコード マウスをドラッグした時だけ時に実行されるブロック
if (mousePressed){
    stroke(245, 67, 245);
    line(pmouseX, pmouseY, mouseX, mouseY);
<code>    // 少しずつ縦方向(Y軸)にずらして、別の色で線を書く</code>
<code>    stroke(212, 100, 245); line(pmouseX, pmouseY+5, mouseX, mouseY+5); </code>
    <code>stroke(50, 245, 230); line(pmouseX, pmouseY+10, mouseX, mouseY+10); </code>
    <code>stroke(110, 80, 90); line(pmouseX, pmouseY+15, mouseX, mouseY+15);</code>
    }
}

../../images/lesson/2020/09/スクリーンショット-2020-09-23-10.45.42-990x1024.png


Ref: