6_1:イメージ p5.js JavaScript

イメージを画面に描画するには、次の手順を取ります。

  1. イメージを用意し適切な場所に配置する。
  2. イメージを保持する変数を作成する。
  3. loadImage()関数でイメージを変数に読み込む。

注意が必要なのは、読み込んだJPGやPNGなどの画像ファイルを直接使用するのではなく、そのデータをp5.jsのキャンバスに描画するということです。読み込んだ画像はデータなので、好きなように加工できます。

イメージの読み込み

イメージを読み込むために、ここではp5.jsの関数preload()を使用することにします。preload()関数は、setup()関数が呼び出される前に1度だけ呼び出されます。この関数は、イメージやその他のメディアファイルを、プログラムがスタートする前に確実に読み込んでおくために使用されます。

上記の3つの手順が終わったら、image()関数でイメージをキャンバスに描画できます。

let img;
// setup()より先に呼び出される
function preload() {
    img = loadImage('lunar.jpg');
}

function setup() {
    // 読み込む画像のサイズは480 x 240
    createCanvas(480, 120);
}

// イメージをキャンバスに描画する
function draw() {
    image(img, 0, 0);
}

image()関数に渡す1つめのパラメータは描画するイメージ(p5.Image)で、2つめと3つめはxとy座標のセットです。オプションの4つめと5つめのパラメータはイメージを描画する幅と高さのセットで、使用しない場合には、作成されたサイズで描画されます。

image(img, 0, 0);

読み込んでいるlunar.jpgのサイズは480 x 240で、キャンバスのサイズは480 x 120(イメージの半分の高さ)です。image()関数の2つめと3つめのパラメータに0と0を指定しているので、image()関数はイメージの左上隅をキャンバスの(0, 0)に揃えて、480 x 120分のデータを描画しようとします。しかしキャンバスに全データを描くだけのサイズがないので、イメージの下半分は描画されません。

preload()

説明

preload()関数は、setup()の直前に呼び出され、画面をブロックする方法で外部ファイルの非同期的な読み込み処理に使用される。preload()関数が定義されていると、setup()関数は、読み込みの呼び出しが完了するまで待機します。preload()関数内には、読み込みの呼び出し(loadImage、loadJSON、loadFont、loadStringsなど)以外は含めるべきではない。

preload()関数を使わず、非同期的な読み込みを行いたい場合には、読み込み関数が、そのcallbackパラメータを使って、setup()やそのほかの場所で使用できる。

デフォルトでは”loading…”というテキストが表示される。独自の読み込み中ページを作成するには、ページ内に”p5_loading”というidでHTML要素を作成する。詳細はこちら

シンタックス

preload()

loadImage()

説明

イメージをpathからロードし、そこからp5.Imageを作成する。

イメージは即座に利用できる状態にならない可能性があるので、確実に使用できるようにしておきたい場合には、loadImage()をpreload()内に配置する。loadImage()には、イメージの準備が整ったタイミングで呼び出されるコールバック関数を指定することもできる。

イメージへのパスはスケッチにリンクしたHTMLファイルからの相対パス。URLやそのほかのリモートにあるイメージのロードは、ブラウザに組み込まれているセキュリティ機能によってブロックされる可能性がある。

シンタックス

loadImage(path, [successCallback], [failureCallback])

image()

説明

イメージをp5.jsキャンバスに描画する。

この関数はさまざまなパラメータ数で使用できる。一番簡単に使用するには3つのパラメータ、imgとx、yを指定する(xとyはイメージの位置)。オプションでパラメータを2つ加えることもできる。その場合にはそれぞれ、イメージの幅と高さになる。

この関数にはまた、全部で8個の数値のパラメータも使用できる。これらのパラメータを区別するため、p5.jsでは、”destination rectangle(dx、dyなどdが付く)”と”source image(sx、syなどsが付く)”という言葉が用いられる。 ソースイメージの全体ではなく部分を表示したいときには、ソースイメージのサイズ指定が便利。下図はその説明図。

シンタックス

image(img, x, y, [width], [height])
image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight])

p5.jsのリファレンスに書かれているimage()の説明は分かりづらく感じます。一番合点がいくのは、たとえばimgが120 x 60で、image(img, 10, 10, 120, 30)を実行する場合なら、「画像の左上隅をキャンバスの(10, 10)に揃えて、120 x 60のデータを120 x 30のキャンバスに描画しようとする」という考え方です。

“source image”は読み込む画像、”destination rectangle”は読み込んだ画像のデータを描画するキャンバスの矩形と考えることができます。

p5.Image

説明

新しいnew p5.Imageを作成する。p5.Imageはイメージのキャンバス表現。p5.jsでは.gifと.jpg、.pngイメージが表示でき、2Dと3Dで表現できる。イメージを使用するにはその前に、loadImage()関数でイメージをロードする必要がある。

p5.Imageクラスはイメージの幅や高さ、イメージの全ピクセルを表す値を含むpixelsという名前の配列をフィールド(プロパティ)として持つ。

複数イメージのロード

2つの画像を読み込み、表示する部分を変えてキャンバスに描画します。

let img1;
let img2;

function preload() {
    img1 = loadImage('lunar.jpg');    // 480 x 240
    img2 = loadImage('capsule.jpg');  // 480 x 240
}

function setup() {
    createCanvas(480, 120);
}

function draw() {
    image(img1, -120, 0);
    image(img1, 130, 0, 240, 120);
    image(img2, 300, 0, 240, 120);
}

image(img1, -120, 0)は、lunar.jpgの左上隅をキャンバスの(-120, 0)に揃えて、480 x 240のデータを描画しようとします。しかしキャンバスのx座標-120から0にはキャンバスがないので、この部分に割り振られたデータは描画されません。描画されるのは下図の赤枠で囲んだ部分です(背景色のグレーはsetup()内にbackground(180)を追加して描画しています)。

image(img1, 130, 0, 240, 120)は、lunar.jpgの左上隅をキャンバスの(130, 0)に揃えて、480 X 240のデータを240 X 120のサイズで描画しようとします。その結果、半分の幅と高さで歪むことなく描画されます。

image(img2, 300, 0, 240, 120)は、capsule.jpg(これも480 x 240)の左上隅をキャンバスの(300, 0)に揃えて、480 X 240のデータを240 X 120のサイズで描画しようとします。しかし描画できる残りのキャンバスの幅は180(480 – 300)しかなく、下図の赤枠で囲んだ部分だけが描画されます。

draw()内の3つのimage()関数は毎フレーム、上から順に実行され、それぞれは下図の1,2,3を描画します。2は1を上書きし、3はそれを上書きするので、下図の一番下に示す結果となります。

マウスの移動でイメージを歪ませる

mouseXとmouseYを、image()関数の4番めと5番めのパラメータに指定すると、イメージのサイズをマウスの動きに合わせて変えることができます。

let img;

function preload() {
    img = loadImage('lunar.jpg');
}

function setup() {
    createCanvas(480, 120);
}

function draw() {
    background(0);
    image(img, 0, 0, mouseX * 2, mouseY * 2);
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA