元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【p5.js】画像の読み込みと表示:preload(),loadImage(),image()

p5.jsは、画像を表示することができます。画像などのデータは、予めpreload()内で読み込みます。その後、setup()やdraw()内で処理します。preload()内では、画像の他に音楽や動画、モデリングデータ、JSONデータなどを読み込めます。

画像の読み込みと表示:preload(),loadImage(),image()

  • preload():予め画像データなどを読み込んでおく場所
  • loadImage():画像の読み込み
  • image():画像の表示

※画像読み込みの注意点。p5.jsでは、同じドメインからしか画像を読み込めない。そのため、ローカル開発境なりを自分で用意しないと画像の表示確認はできない。

表示例

今回は、はてなブログのファビコンを表示させてみる。

const filepath = "https://●●●●●●.hatenablog.com/icon/touch";
let img = null;

function preload(){
  img = loadImage(filepath);    //画像の読み込み
}

function setup(){
    createCanvas(120, 120);
}

function draw(){
  background(127, 127, 127);
  image(img, 0, 0); //画像の表示
}

まとめ

  • preload():予め画像データなどを読み込んでおく場所
  • loadImage():画像の読み込み
  • image():画像の表示