このページでは[「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) に従います。