P5.js 日本語リファレンス(imageMode)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の imageMode関数を説明します。

imageMode()

説明文

画像モードを設定します。 image() に指定されたパラメータが解釈される方法を変更することにより、画像が描画される場所を変更します。

デフォルトのモードは imageMode(CORNER) で、image() の2番目と3番目のパラメータをイメージの左上隅として解釈します。 2つの追加パラメータが指定されている場合、それらは画像の幅と高さを設定するために使用されます。

imageMode(CORNERS) は、image() の2番目と3番目のパラメータを1つのコーナーの位置として解釈し, 4番目と5番目のパラメータを反対側のコーナーとして解釈します。

imageMode(CENTER) は、image() の2番目と3番目のパラメータを画像の中心点として解釈します。 2つの追加パラメータが指定されている場合、それらは画像の幅と高さを設定するために使用されます。

構文

imageMode(mode)

パラメタ

• mode
  定数：CORNER、CORNERS または CENTER

例1

let img;
function preload() {
  img = loadImage('assets/mountain.png');
}

function setup() {
  createCanvas(500, 500);
  
  // 表示する画像の左上隅の座標を (10, 10) にする
  // 表示する画像の幅と高さを 100 x 100 にする
  imageMode(CORNER);
  image(img, 10, 10, 100, 100);
}

実行結果

例2

let img;
function preload() {
  img = loadImage('assets/mountain.png');
}

function setup() {
  createCanvas(500, 500);
  
  // コピー元画像を原寸大で表示します
  image(img, 0, 0);

  // 表示する画像の左上隅の座標を (50, 10) に、
  // 右下隅の座標を (150, 110) にする
  imageMode(CORNERS);
  image(img, 50, 10,  150, 110);
}

実行結果

例3

let img;
function preload() {
  img = loadImage('assets/mountain.png');
}

function setup() {
  createCanvas(500, 500);
  
  // コピー元画像を原寸大で表示します
  image(img, 0, 0);
  
  // 表示する画像の中心座標を (150, 100) に、
  // 幅と縦を 150 x 100 にする
  imageMode(CENTER);
  image(img, 150, 100,  150, 100);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。