【Processing】imageMode()関数の使い方【画像を表示する位置を変える】

2024年9月19日

当ブログ記事には広告が含まれている場合があります

【Processing】imageMode()関数の使い方【画像を表示する位置を変える】

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「imageMode()関数」を理解し、自分なりに使ってみること。

記事内のProcessingのバージョンは4.3。

動きのある画像は、コードではなく、GIF画像編集で無限再生されるようにしています。

【Processing】imageMode()関数について

imageMode()関数について

imageModeは、画像を表示させる位置を調整する
imageMode(CORNER);を使用すると、画像の左上が座標 (100, 100) に配置
imageMode(CORNERS);は、画像を表示するときに、画像の対角線の2つの角を基準にする方法
- 紙に絵を描くときに、紙の左上と右下の角を決めて、その範囲内に絵を描くような感じ
imageMode(CENTER);は、画像を表示するときに、画像の中心を基準にする方法
- 紙に絵を描くときに、紙の真ん中を決めて、その真ん中を基準に絵を描くような感じ

【Processing】imageMode()関数の主な書き方

CENTER

PImage img; // 画像データを保存する変数


void setup() {
  size(400, 400); // キャンバスのサイズを設定
  img = loadImage("giraffe.jpg"); // 画像を読み込む
  img.resize(200, 200); //画像を横400、建て400のサイズにする
}
void draw() {
  imageMode(CENTER);
  image(img, 100, 100, 300, 300); // 画像を表示する
}

CORNER

PImage img; // 画像データを保存する変数


void setup() {
  size(400, 400); // キャンバスのサイズを設定
  img = loadImage("giraffe.jpg"); // 画像を読み込む
  img.resize(200, 200); //画像を横400、建て400のサイズにする
}
void draw() {
  imageMode(CORNER);
  image(img, 100, 100, 300, 300); // 画像を表示する
}

CORNERS

PImage img; // 画像データを保存する変数


void setup() {
  size(400, 400); // キャンバスのサイズを設定
  img = loadImage("giraffe.jpg"); // 画像を読み込む
  img.resize(200, 200); //画像を横400、建て400のサイズにする
}
void draw() {
  imageMode(CORNERS);
  image(img, 100, 100, 300, 300); // 画像を表示する
}