【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():画像の表示

こちらのカテゴリもオススメです

• p5.js
• Tweakpane
• SVG