このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の loadImage関数を説明します。
loadImage()
説明文
パスから画像を読み込み、そこからp5.Imageを作成します。
画像をすぐにレンダリングできない場合があります。画像を処理する前に画像の準備が整っていることを確認するには、loadImage() の呼び出しを preload() に配置します。画像の準備ができたときに画像を処理するためのコールバック関数を提供することもできます。
画像へのパスは、スケッチでリンクするHTMLファイルからの相対パスである必要があります。ブラウザの組み込みセキュリティにより、URLまたはその他のリモートロケーションからの画像のロードがブロックされる場合があります。
構文
loadImage(path, [successCallback], [failureCallback])
パラメタ
-
path
String:ロードする画像のパス -
successCallback
Function(p5.Image):画像が読み込まれた後に呼び出される関数。 p5.Imageが渡されます。 (オプション) -
failureCallback
Function(Event):画像の読み込みに失敗した場合、イベントエラーで呼び出されます。 (オプション)
戻り値
p5.Image:p5.Imageオブジェクト
例1
let img;
function preload() {
// URLでパスを指定
img1 = loadImage('https://dl.dropbox.com/s/w17l97yl5jrcelh/mountain.png?dl=0');
// 相対パスを指定
img2 = loadImage('./assets/mountain.png');
}
function setup() {
createCanvas(500, 500);
image(img1, 0, 0);
image(img2, 0, 200);
}
実行結果
例2
let img;
function setup() {
createCanvas(400, 400);
// コールバック関数を指定します。(画像ロード後に callBackFunc() を呼びます)
img = loadImage('./assets/mountain.png', callBackFunc );
}
function callBackFunc() {
image(img, 0, 0);
}
実行結果
著作権
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) に従います。