(p5image).pixels

def setup
  background(220)

  pink = color(255, 102, 204)
  img = createImage(66, 66)
  img.loadPixels
  size = 4 * (img.width * img.height).to_i
  0.step(size, 4) do |i|
    img.pixels[i]     = red(pink)
    img.pixels[i + 1] = green(pink)
    img.pixels[i + 2] = blue(pink)
    img.pixels[i + 3] = alpha(pink)
  end
  img.updatePixels
  image(img, 17, 17)
end

p5.jsリファレンス(参考情報)

[p5.js] (p5.Image.obj).pixels

概要

イメージ内のすべてのピクセルの値を含む型付き配列(8ビット符号なし整数)です。

書式

obj.pixels

備考

・この配列には、イメージ内のすべてのピクセルについて R, G, B, Aの値が収録されています。

・配列要素 pixels[0]~[3]の値はイメージ上の座標(0, 0)の R, G, B, Aを示し、
 配列要素 pixels[4]~[7]の値はイメージ上の座標(1, 0)の R, G, B, Aを示します。
 このように、イメージの左から右、上から下の順で各ピクセルの R, G, B, Aの値が収録されています。

・1ピクセルにつき R, G, B, Aの 4つの値が配列内の各要素として収録されているので、
 配列のサイズはイメージのサイズの 4倍になります。

・この配列にアクセスする前には、(p5image).loadPixelsメソッドを使用して
 イメージ上のデータをロードする必要があります。

・配列内のデータを操作したあと、変更内容をキャンバスに反映させるためには
 (p5image).updatePixelsメソッドを実行する必要があります。

関連

(p5image).loadPixels
(p5image).updatePixels
pixels