トレイルトップに戻る    印刷する

画像ファイルの描画

P5.jsは gif、jpg、png形式の画像データを表示できます。画像データはp5.Imageクラスのオブジェクトとしてプログラム内に読み込みます(p5.Imageオブジェクトには画像のピクセルデータが保存される)。読み込んだ複数のp5.Imageオブジェクトを切り替えて表示することでアニメーションさせることもできます。
サンプルや練習問題で使う画像ファイルは、画像ページからコピーできます。

画像ファイルを表示する

リストT1-1-1では、ひとつの円を描きましたが、円の代わりに画像を表示したのが下の例です。

(1) スケッチフォルダ(jsファイルのあるフォルダ、[スケッチ]メニュー→[スケッチフォルダーを開く]で表示される)の下にimagesフォルダを作り、その中に画像ファイル(今の場合catB25.png)を置くことにする。

(2) p5.Imageオブジェクトを入れる変数を用意する。関数の外側で、グローバル変数として定義する。
let catImg;  //画像データ用の変数

(3) この変数に、loadImage関数を使って画像ファイルからデータを読み込み、p5.Imageオブジェクトを作る。画像の読み込みは、setup()関数が実行される前に終わっていてほしいので、preload()関数の中で行う(preloadが修了してからsetupが実行される)。
	function preload() {
	  catImg = loadImage("./images/catB25.png");
	}

(4) image関数を使って、画像データを描画する。 image()関数の第2、第3引数は画像の左上隅の座標で、この例では、座標(35, 35)が画像の中心に来るように、画像を描く位置(x, y)の値を計算している。catImg.widthとcatImg.heightは、p5.Imageクラスのプロパティとして定義されている画像の幅と高さ。
  let x = cx - catImg.width/2;   //画像を描くx座標
  let y = cy - catImg.height/2;  //画像を描くy座標
  image(catImg, x, y);  //(cx, cy)に画像の中心をおく
キャンバス領域がはっきり分かるように、背景をグレーで示しました。
猫が1
【リストT1-4-1】
const cx = 35;  //画像の中心のx座標
const cy = 35;  //画像の中心のy座標
let catImg;     //画像データ用の変数
function preload() {
  catImg = loadImage("./images/catB25.png");
}
function setup() {
  createCanvas(250, 250);
}
function draw() {
  background(240);
  let x = cx - catImg.width/2;   //画像を描くx座標
  let y = cy - catImg.height/2;  //画像を描くy座標
  image(catImg, x, y);  //(cx, cy)に画像の中心をおく
}

画像を複数描く

練習問題1-1で、10行10列で100個の円を描きましたが、代りに同じ画像を100回描いたのが下の例です。setup()、draw()関数以外はリストT1-4-1と同じです。

猫が100
【リストT1-4-2】
const cx = 35;  //左上の画像の中心のx座標
const cy = 35;  //左上の画像の中心のy座標
let catImg;  //画像データを保存する変数
function preload() {
  catImg = loadImage("./images/catB25.png");
}
function setup() {
  createCanvas(300, 300);
}
function draw() {
  let x = cx - catImg.width/2;  //左上の画像を描くx座標
  let y = cy - catImg.height/2; //左上の画像を描くy座標
  for (let j=0; j<10; j++) {
    for (let i=0; i<10; i++) {
      image(catImg, x+i*catImg.width, y+j*catImg.height);
    }
  }
}

演習問題


【問題T1-4-1】
リストT1-2-2で、2項目のデータの割合を色分けで示しました。同様に、今度は画像でデータを区別してみましょう。
猫が100

ペットフード協会のデータによると、
2011年の猫の飼育推計数は9612千頭、犬の飼育推計数は11861千頭
2020年の猫の飼育推計数は9644千頭、犬の飼育推計数は8489千頭
とのこと。犬猫の飼育推計数の割合の変化を100個の画像を表示することで、示してみよう。


copyright © info