2020/06/20 更新：図を添付しました。
このページでは「P5.js 日本語リファレンス」 の 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) に従います。