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

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

createImage()

説明文

新しい p5.Image (画像を格納するためのデータ型)を作成します。これは、操作するピクセルの新しいバッファを提供します。幅と高さのパラメータでバッファのサイズを設定します。

.pixels は、表示ウィンドウ内のすべてのピクセルの値を含む配列へのアクセスを提供します。これらの値は数値です。この配列は、表示ウィンドウx4 のサイズ(pixelDensityの適切な係数を含む)であり、各ピクセルのR、G、B、Aの値を順番に表し、各行を左から右に移動し次に各列を下に移動します。詳細については .pixels を参照してください。 set() または get() を使用する方が簡単な場合もあります。

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

構文

createImage(width, height)

パラメタ

• width
  Integer：ピクセル単位の幅

• height
  Integer：ピクセル単位の高さ

戻り値

p5.Image：p5.Imageオブジェクト

例1

function setup(){
  
  // 66 x 66 サイズの p5.image を用意します
  let img = createImage(66, 66);
  img.loadPixels() ;

  // 全てのピクセル (i, j) に対して、color(180, 10, 10)を割り当てる
  // アルファ値はx座標値を正規化した値の3倍を割り当てる
  for(let x = 0; x <img.width; x++){
    for(let y = 0; y <img.height; y++){
      img.set(x, y, color(180, 10, 10, (x % img.width) * 3));
    }
  }

  // p5.image の更新
  img.updatePixels() ;

  // ずらして p5.image の表示
  image(img, 17, 17);
  image(img, 34, 34);
}

実行結果

例2

function setup(){
  let pink = color(255, 102, 204, 100);

  // 66 x 66 サイズの p5.image を用意します
  let img = createImage(66, 66);
  img.loadPixels() ;
  
  // 画像のピクセルにアクセスするためのサイズを求めます
  // (1画素 R、G、B、Aの4バイトあるため4倍します) 
  let fullImage = img.width * img.height * 4;

  for(let i = 0; i < fullImage; i += 4){
    img.pixels [i] = red(pink);        // 255
    img.pixels [i + 1] = green(pink);  // 102
    img.pixels [i + 2] = blue(pink);   // 204
    img.pixels [i + 3] = alpha(pink);  // 100
  }
  
  // p5.image の更新
  img.updatePixels() ;

  // p5.image の表示
  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) に従います。