p5.jsでは、JPEG、GIF、PNG形式と、SVG形式の画像を読み込んで表示することができます。
JPEG、GIF、PNG形式の画像はラスター画像と呼ばれます。これは、画面の小さなドット(ピクセル)に色を付けていくことで画像を表現します。これに対しSVG形式の画像はベクター画像と呼ばれ、画像を円の方程式などの計算で表現します。下図はSVG形式で作成された、有名なGhostscript_Tiger.svgという名前のファイルです。
透明度
GIFとPNG、SVG形式は透明度をサポートしています。これは、ピクセルを見えなくしたり、ある部分だけ見えるようにできる、ということです。GIF画像は1ビットの透明度を持ちます。これは、1つのピクセルを完全な不透明か完全な透明にできる、ということです。PNG画像は8ビットの透明度を持ちます。これは、各ピクセルが不透明の可変レベルを持つことができる(不透明の度合いを2の8乗=256階調で表せる)、ということです。
GIFの透明度
使用するのは背景が透明の次のGIFファイルです。
let img;
function preload() {
img = loadImage('clouds.gif');
}
function setup() {
createCanvas(480, 120);
}
function draw() {
background(204);
image(img, 0, 0);
image(img, 0, mouseY * -1);
}
draw()内で一度GIFイメージを描画し、それに重ねて同じGIFイメージをマウス位置で描画しているので、イメージをマウスで上下させているように見えます。
GIFアニメーション
透明度を持つGIFアニメーションを再生することができます。
let animationGif_transparent;;
let backgroundJpg;
function preload() {
backgroundJpg = loadImage('back.jpg');
// GIFアニメーションのp5.jsイメージ
animationGif_transparent = createImg("worm-propeller-animation-wrong.gif");
}
function setup() {
createCanvas(300, 350);
}
function draw() {
// 背景にするJPGイメージを描画
image(backgroundJpg, 0, 0);
// GIFアニメーションの位置指定
animationGif_transparent.position(10, 10);
}
SVGイメージの描画
SVGは計算によって生成されるベクター画像なので、非常にきれいに描画できます。
let img;
let w, h;
function preload() {
img = loadImage('NewTux.svg');
}
function setup() {
w = img.width / 2;
h = img.height / 2;
createCanvas(w, h);
}
function draw() {
background(240);
image(img, 0, 0, w, h);
image(img, mouseX - w, 0);
}