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

2020/06/20 更新：図を添付しました。

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

image()

説明文

画像を p5.js キャンバスに描画します。

この関数は、さまざまな数のパラメータで使用できます。最も簡単な使用方法は、img、x、yの3つのパラメータのみを必要とします。ここで (x, y) は画像の位置です。画像の幅と高さを指定するために、さらに2つのパラメータをオプションで追加できます。

この関数は、8つの数値パラメータ全てで使用することもできます。これらすべてのパラメータを区別するために、p5.js は、「コピー先長方形」(パラメタ dx、dy などに対応)および「コピー元画像」(パラメタ sx、syに対応) のワードを使用します。 「コピー元画像」のサイズを指定すると、全体ではなくコピー元画像の領域を表示したい場合に役立ちます。これはさらに説明するための図です：

構文

image(img, x, y, [width], [height])

image(img, dx, dy, dw, dh, sx, sy, [sw], [sw])

パラメタ

• img
  p5.Image | p5.Element：表示する画像

• x
  Number：コピー元画像の左上隅のx座標

• y
  Number：コピー元画像の左上隅のy座標

• width
  Number：コピー元画像を描画する幅(オプション)

• height
  Number：コピー元画像を描画する高さ(オプション)

• dx
  Number：コピー元画像を描画するコピー先長方形のx座標

• dy
  Number：コピー元画像を描画するコピー先長方形のy座標

• dw
  Number：コピー先長方形の幅

• dh
  Number：コピー先長方形の高さ

• sx
  Number：コピー先長方形に描画するコピー先画像のサブセクションのx座標

• sy
  Number：コピー先長方形に描画するコピー先画像のサブセクションのy座標

• sw
  Number：コピー先長方形に描画するコピー先画像のサブセクションの幅(オプション)

• sh
  Number：コピー先長方形に描画するコピー先画像のサブセクションの高さ(オプション)

例1

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

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

  // コピー先長方形の左上隅を(0, 200)に指定して、
  // 幅と高さを 150 x 100に指定して画像を表示します
  image(img, 0, 200, 150, 100);
}

実行結果

例2

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

function setup() {
  createCanvas(500, 500);
  
  // コピー元画像を原寸大で表示します
  image(img, 0, 0);
  
  // コピー先長方形の左上隅を(0, 200)に指定して、
  // 幅と高さを 180 x 120に指定して画像を表示します
  // コピー元画像の位置は(150, 0)から開始して、150 x 100の領域をキャプチャします
  // キャプチャした画像をコピー先長方形に表示します
  image(img,  0, 200,  180, 120,  150, 0,  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) に従います。