04-01 イメージ処理の概要

p5.jsではイメージの処理を簡単に行うことができる。

■イメージのアップロード
imgフォルダ（名前は任意）を作成し、イメージファイルをアップロードしておく。

■イメージのロードと表示
次の手順でイメージのロードと表示を行う。

preload関数内で、loadImage関数により指定したイメージファイルをロード。
draw関数内で、image関数によりイメージを表示。

例題 4-1-1

コード

let photo1;
function preload() { 
  // イメージの読み込みなどの前処理
  photo1 = loadImage('img/sakura.jpg');
}
function setup() { 
  // 各種初期設定 
  createCanvas(200, 160);
}
function draw() { 
  // 描画処理 
  background(220); 
  image(photo1, 0, 0, 200, 160);
}