P5.js 日本語リファレンス(p5.Image)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の p5.Imageクラスを説明します。

p5.Image

説明文

新しいp5.Imageを作成します。 p5.Imageはキャンバスに裏打ちされた画像の表現です。

p5は .gif, .jpgおよび.png画像を表示できます。画像は2Dおよび3Dスペースで表示できます。画像を使用する前に, loadImage() 関数でロードする必要があります。 p5.Imageクラスには, 画像の幅と高さのフィールド, および画像内のすべてのピクセルの値を含む, pixels []と呼ばれる配列が含まれています。

以下で説明する方法を使用すると, 画像のピクセルとアルファチャネルに簡単にアクセスでき, 合成プロセスが簡略化されます。

pixel[]配列を使用する前に, 必ずイメージでloadPixels() メソッドを使用して, ピクセルデータが正しく読み込まれていることを確認してください。

構文

new p5.Image(width, height)

パラメタ

• width
  Number：

• height
  Number：

フィールド

• width：画像の幅

• height：画像の高さ

• pixels：
  表示ウィンドウのすべてのピクセルの値を含む配列。この配列の値は数値です。この配列は、表示ウィンドウx4 のサイズ(pixelDensityの適切な係数を含む)であり、各ピクセルのR、G、B、Aの値を順番に表し各行を左から右に移動してから各列を下に移動します。 Retinaおよびその他の高密度ディスプレイは、より多くのピクセルを備えている場合があります。(pixelDensity ^ 2 の係数による) たとえば、画像が 100 x 100 ピクセルの場合 40,000 になります。 pixelDensity = 2 の場合、160,000 になります。配列の最初の4つの値(インデックス0〜3)は (0, 0) にあるピクセルのR, G, B, Aの値になります。 2番目の4つの値(インデックス4〜7)には, (1, 0) にあるピクセルのR, G, B, Aの値になります。
  一般的にピクセルの値を(x, y)に設定する例：

let d = pixelDensity() ;
for(let i = 0; i < d; i ++){
  for(let j = 0; j < d; j ++){
    index = 4 * (( y * d + j) * width * d +(x * d + i));
    pixels[index] = r;
    pixels[index + 1] = g;
    pixels[index + 2] = b;
    pixels[index + 3] = a;
  }
}

この配列にアクセスする前に、データを loadPixels() でロードする必要があります。配列データを変更した後、updatePixels() を実行して変更を更新する必要があります。

メソッド

• loadPixels()
  p5.image にピクセルデータを読み込みます。

• updatePixels()
  p5.image の内容を更新します。
  この画像がアニメーションGIFの場合、現在表示されているフレームのピクセルが更新されます。

• get()
  画像からピクセルの領域を取得します。
  パラメータが渡されない場合、画像全体が返されます。渡された唯一のパラメータがxとyの場合、単一のピクセルが抽出されます。すべてのパラメータが渡されると, 長方形の領域が抽出され p5.Image が返されます。

• set()
  単一ピクセルの色を設定するか、この p5.Image に画像を書き込みます。
  ピクセル数が多い場合は、ピクセル配列を直接操作してから updatePixels() を呼び出すよりも遅くなることに注意してください。

• resize()
  画像を新しい幅と高さにサイズ変更します。画像を比例的に拡大縮小するには, width または height の値として0を使用します。たとえば、画像の幅を150ピクセルにして、同じ比率で高さを変更するには resize(150, 0) を使用します。

• copy()
  ピクセルの領域をある画像から別の画像にコピーします。パラメタ srcImage が指定されていない場合、p5.image をコピー元として使用されます。コピー元領域と宛先領域が同じサイズでない場合、指定された宛先領域に合わせてコピー元ピクセルのサイズが自動的に変更されます。

• mask()
  別の画像をロードしてその画像のアルファチャネルを使用して、p5.image の画像の一部を表示からマスクします。

• filter()
  画像フィルターを p5.Image に適用します。

• blend()
  指定されたブレンドモードを使用して、ある画像から別の画像にピクセルの領域をコピーして操作を実行します。

• save()
  画像をファイルに保存し、ブラウザに強制的にダウンロードさせます。ファイル名とファイル拡張子の2つの文字列を受け入れます。サポートする拡張子はpng(デフォルト)、jpg、gifです。
  p5.Image が GIFファイル からロードされた場合、ファイルはアニメーションGIFとしてのみダウンロードされることに注意してください。

• reset()
  アニメーションGIFを最初の状態から開始します。

• getCurrentFrame()
  アニメーションGIFで現在表示されているフレームのインデックスを取得します。

• setFrame()
  アニメーションGIFで現在表示されているフレームのインデックスを設定します。

• numFrames()
  アニメーションGIFのフレーム数を返します。

• play()
  pause() で一時停止されたアニメーションGIFを再生します。

• pause()
  アニメーションGIFを一時停止します。

• delay()
  アニメーションGIFのフレーム間の遅延を変更します。遅延を変更する必要がある特定のフレームのインデックスを示すオプションの2番目のパラメータがあります。インデックスが指定されていない場合、すべてのフレームに新しい遅延が発生します。

例1

function setup() {
  createCanvas(200, 200);
  background(0);

  let img = createImage(200, 200); // new p5.Image(200, 200);と同じ
  img.loadPixels() ;
 
  //配列に色を書き込むためのヘルパー
  function writeColor(image, x, y, red, green, blue, alpha){
    let index =(x + y * width)* 4;
    image.pixels [index] = red;
    image.pixels [index + 1] = green;
    image.pixels [index + 2] =blue;
    image.pixels [index + 3] = alpha;
  }

  let x, y;
  //ランダムな色で塗りつぶします
  for(y = 0; y <img.height; y ++){
    for(x = 0; x <img.width; x ++){
      let red = random(255);
      let green = random(255);
      let blue = random(255);
      let alpha = 255;
      writeColor(img, x, y, red, green,blue, alpha);
    }
  }

  //赤い横線を描きます
  y = 150;
  for(x = 0; x <img.width; x ++){
    writeColor(img, x, y, 255, 0, 0, 255);
  }

  img.updatePixels() ;
  image(img, 0, 0);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。