does offscreen graphics buffer has a pixels array?

luhai

function setup() {
  var g = createGraphics(200, 200);
  var img = createImage(200, 200, RGB);
  g.loadPixels();
  println(g.pixels.length);
  img.loadPixels();
  println(img.pixels.length);
}

print out:

0
160000

_vk

Hmm it should have... Perhaps it is only created after beginDraw()/endDraw() ?

GoToLoop

PGraphics extends PImage.
Therefore PGraphics got everything a PImage does.

https://Processing.org/reference/extends.html

GoToLoop

• Oops my bad! This question is about p5.js! b-(
• Due to some inexplicable & gross oversight, p5.Renderer doesn't inherit from p5.Image! 8-}
• And p5.Image doesn't inherit from p5.Element as p5.Renderer does either!
• I've already ranted about it a couple of times here. But no signs it had been heard at all! [-(

_vk

Oooopps, my bad also. I missed the var and the tag. The code you posted just works fine in java mode...

Ria

Can we make a request for this feature in P5?

discoman

@GotoLoop https://github.com/processing/p5.js/issues/995 I guess you were heard. <:-P I was trying to fix it.

GoToLoop

• I'm afraid not! Those kinda bugs keeps popping out and they always act surprised.
• A clear sign they haven't read 1 word I kept on saying here in this forum for years!
• They'll just keep using band-aids to "fix" those bugs along the way.
• But w/o cutting off the root of the problem which making p5.Renderer be a subclass of p5.Image.
• And also getting rid of that useless hackish p5.Graphics wrapper for p5.Renderer.

kirkjerk

I was just wondering about that... I was hoping this would work:

var pg;
function setup() {
  var canvas = createCanvas(100, 100);
}
function draw() {
  background(200);
  pg = createGraphics(100, 100);  
  var pink = color(255, 102, 204);
  pg.loadPixels();
  var d = pg.pixelDensity();
  var halfImage = 4 * (width * d) * (height/2 * d);
  for (var i = 0; i < halfImage; i+=4) {
    pg.pixels[i] = red(pink);
    pg.pixels[i+1] = green(pink);
    pg.pixels[i+2] = blue(pink);
    pg.pixels[i+3] = alpha(pink);
}
  pg.updatePixels();
  image(pg, 0, 0);
}

But I don't think it does. (PS how do I do a fancy code block?)

GoToLoop

I was trying to code an example to test p5.Image & p5.Graphics together and stumbled in a puzzling nasty halting bug after issuing updatePixels(), which I've got no idea why! ~X(

<script src=http://p5js.org/js/p5.min.js defer></script>

<script>

/**
 * Image & Graphics Test (v1.2)
 * GoToLoop (2016-Feb-20)
 *
 * https://forum.Processing.org/two/discussion/13857/
 * does-offscreen-graphics-buffer-has-a-pixels-array
*/

function setup() {
  createCanvas(600, 400)
  noLoop()
}

function draw() {
  "use strict"

  background(0)

  const im = createImage(width, height>>1),
        pg = createGraphics(width, height>>1),
        red  = [0xff, 0, 0, 0xff],
        blue = [0, 0, 0xff, 0xff]

  makeImage(im, red)  // p5.Image halts whole sketch!
  //makeImage(pg, blue) // p5.Graphics doesn't halt, but doesn't work either!

  //loadPixels()
  //set(0, 0, im)
  //set(0, height>>1, pg)
  //updatePixels()
  
  image(im, 0, 0)
  image(pg, 0, height>>1)
}

function makeImage(img, c) {
  "use strict"

  img.loadPixels()
  const p = img.pixels

  for (let i = 0; i < p.length; i += 4)
    for (let j = 0; j < 4; p[i+j] = c[j++]);

  img.updatePixels() // halt bug?!
  return img
}

</script>

GoToLoop

Found the halting bug. 2nd for loop needed an ending semi-colon ;
in order not to pick up img.updatePixels()! X_X

But it turns out that p5.Renderer objects don't have property pixels[] at all!
But surprisingly, main p5.Renderer canvas is the exception and it got 1!!! 8-}