6_2：GIFとPNG、SVG p5.js JavaScript

p5.jsでは、JPEG、GIF、PNG形式と、SVG形式の画像を読み込んで表示することができます。

JPEG、GIF、PNG形式の画像はラスター画像と呼ばれます。これは、画面の小さなドット(ピクセル)に色を付けていくことで画像を表現します。これに対しSVG形式の画像はベクター画像と呼ばれ、画像を円の方程式などの計算で表現します。下図はSVG形式で作成された、有名なGhostscript_Tiger.svgという名前のファイルです。

透明度

GIFとPNG、SVG形式は透明度をサポートしています。これは、ピクセルを見えなくしたり、ある部分だけ見えるようにできる、ということです。GIF画像は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);
}