CODEWITHSUNDEEP
javascriptprocessingp5.js
George Profenza
George Profenza

Reputation: 51837

How to access PGraphics pixels in p5.js

I'm trying to access pixels from a PGraphics instance in p5.js but even after calling loadPixels() the array is empty.

Here's what I've tried:

var buffer;

function setup() {
  createCanvas(100,100);
  pixelDensity(1);

  buffer = createGraphics(100,100);
  buffer.background(128);
}

function draw() {
  image(buffer,0,0);
}

function mouseDragged(){
  buffer.ellipse(mouseX,mouseY,3,3);
  buffer.loadPixels();
  console.log(buffer.pixels);//expecint pixels array, getting empty array
}

Is it possible to access pixels in PGraphics with p5.js ? If so, how ?

Upvotes: 2

Views: 1122

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

This appears to have been a bug: https://github.com/processing/p5.js/issues/1403

Other related bugs here and here.

It is fixed with the latest version (Version 0.5.3 from August 17, 2016).

If you're using the p5.js editor like me, then apparently that uses an old version of the library. You can download the latest version and copy it into your sketch folder. That seems to be persisting between runs of the editor, which is slightly scary, but maybe some magic is going on behind the scenes.

Anyway, your code works as expected after updating to the latest version.

Upvotes: 3

Related Questions