「メディア情報学」を担当している松山です。よろしくお願いします。
さて、私の担当は今回が最終回です。
これまでは、円や長方形といった図形を描くことによる情報表現について触れてきました。
今回は、画像を読み込んであつかってみます。
今回もいくつかのサンプルプログラムを載せています。実際に自分の手で書いて実行してください。
では、はじめましょう。
まずは、画像を読み込んで表示するプログラムからはじめます。
こちら、自分のPCにある画像を使うこともできるのですが、まずは、「https://picsum.photos」という、ランダムな画像を返してくれるWebサイトの画像を読み込んで表示させてみます。
下記のプログラムを、p5.js ウェブエディタに書いて、実行してみてください。
https://editor.p5js.org/m18u/sketches/Xs_Nta45P
let img;
async function setup() {
createCanvas(400, 400);
img = await loadImage("<https://picsum.photos/200>");
}
function draw() {
background(220);
image(img, mouseX, mouseY);
}
実行すると、マウスの位置に画像が表示される。 実行するごとに違う画像が表示される。
プログラム5行目の loadImage("<https://picsum.photos/200>") は、幅 200 ピクセル、高さ 200 ピクセルのランダムな画像を作ってもらい、それを変数 img に保持しています。
そして、プログラム10行目の image(img, mouseX, mouseY); で、画像 img をマウスの位置に描画しています。
他にも、このプログラムには新要素 async と await がありますが、今は気にしなくても構いません。雰囲気的には、画像を準備するのに生じるタイムラグを考慮している感じです。
ちなみに、「https://picsum.photos」はランダムな画像を返してくれますが、 "<https://picsum.photos/id/28/200>" と書くと、「id=28」の常に同じ画像が返ってきます。
と。今回は上記の方法を基に進めてゆきますが、自分のPCにある画像を使う方法も紹介しておきます。興味ありましたら、下記「自分のPCにある画像を使う方法」を展開して、実際にやってみてください。