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

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

pixels

説明文

Uint8ClampedArrayは表示ウィンドウのすべてのピクセルの値を含む配列でこの配列の値は8ビット符号なし整数です。この配列は、表示ウィンドウ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;
  }
}

上記の方法は複雑ですが、どんな画素密度でも機能するのに十分な柔軟性があります。 set() は、任意の画素密度で指定された(x, y)のすべての適切な値をpixel配列に自動的に設定することに注意してください。ただし、ピクセル配列に多くの変更が加えられるとパフォーマンスが低下する場合があります。

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

これは標準のJavaScript配列ではないことに注意してください。つまり, slice() やarrayCopy() などの標準のJavaScript関数は機能しません。

構文

pixels

例1

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) に従います。