3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-07

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?