Problems with filter()

marzinp

Hi, whenever I try to use filter(ANYFILTER) on JS mode, P3D renderer, I get a "Uncaught TypeError: drawing.$ensureContext(...).getImageData is not a function" error...

Also, I'm trying to set some transparency to a texture using tint(255,100). I doesnt trigger any error, but no transparency either... Both work perfectly on Java mode....

GoToLoop

• I bet it's more probable that you loaded some remote image than being related to P3D (WebGL).
• All remote images are "tainted" and taint every canvas (PGraphics) it touches forever!
• See my comments from here: https://github.com/processing-js/processing-js/issues/177

marzinp

Hi GoToLoop, and thanks for your help.

No remote image in my case. Its a procedural image. I generate it in a PGraphics, I filter it and want to diplay it as a background. My code is rather messy, so I'll simplify it to track the problem... and may come back to you then.

marzinp

I think my problems come from P3D that cant display a PGraphics the way I'm used to.

PGraphics pg;
void setup() {
  size(512, 512,P3D);
  pg=createGraphics(width,height,P2D);
  pg.beginDraw();
  pg.background(255,0,0);
  pg.endDraw();
}
void draw() {
  image(pg,0,0);  
}

That's working with java mode, not with JS (throws Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'error)

If I turn the canvas to size(512, 512). It's working. I got confused by "P3D", forgetting that JS uses WebGL. Even if PGraphics subclasses PImage, it looks like its handled very differently by WebGL and P3D ProcessingJava's P3D renderer. This is where I'm a bit lost.

For instance, what if I need to create an image in a PGraphics (as a buffer) and get it displayed or used as a texture later?

GoToLoop

Indeed it's very buggy and should be reported here:
https://github.com/processing-js/processing-js/issues

Don't forget to mention this forum thread there! :D

As a workaround, get() a PImage outta the PGraphics once finished:

PImage bg;

void setup() {
  size(512, 512, P3D);
  noLoop();

  PGraphics pg = createGraphics(width, height, JAVA2D);
  pg.beginDraw();
  pg.background(#FF0000);
  pg.endDraw();

  bg = pg.get();
}

void draw() {
  set(0, 0, bg);
}

GoToLoop

• PJS only got 2 renderers: 2D & WebGL.
• For 2D we can use JAVA2D or P2D. Or leave it empty.
• For WebGL, use P3D or OPENGL constants.
• And AFAIK, PJS doesn't have a separation between PImage & PGraphics internally.

marzinp

As a workaround, get() a PImage outta the PGraphics once finished:

I've tried that, but...

PImage bg;         
    void setup() {
      size(512, 512, P3D);
      noLoop();         
      PGraphics pg = createGraphics(width, height, JAVA2D);
      pg.beginDraw();
      pg.background(#FF0000);
      pg.endDraw();
      bg = pg.get();
    }

    void draw() {
      filter(INVERT);
      set(0,0,bg);
    }

doesn't work ...`throws Uncaught TypeError: drawing.$ensureContext(...).getImageData is not a function ... The image you get from the PGraphics, appears to be not "tintable" as well. I'll have to dig into PJS sources to try and understand..

GoToLoop

Function filter() is a post-processing effect which affects the whole canvas.
That is, we use it after we're done:

1. http://ProcessingJS.org/reference/filter_/
2. https://Processing.org/reference/filter_.html

Therefore instead of:

void draw() {
  filter(INVERT);
  set(0,0,bg);
}

We place it after the image is stamped on the canvas

void draw() {
  set(0, 0, bg);
  filter(INVERT);
}

However, it seems filter() isn't working w/ WebGL renderer (P3D, OPENGL). :(
A workaround (and faster performance) is applying filter() directly on the PGraphics! *-:)

Just paste this re-tweaked code @ http://ProcessingJS.org/tools/processing-helper.html: :bz

PImage bg;

void setup() {
  size(512, 512, P3D);
  noLoop();

  PGraphics pg = createGraphics(width, height, JAVA2D);
  pg.beginDraw();
  pg.background(#FF0000);
  pg.filter(INVERT);
  pg.endDraw();

  bg = pg.get();
}

void draw() {
  set(0, 0, bg);
  //filter(INVERT);
}

marzinp

Fab! I had managed to get it to work, rewriting the filters I needed. Your solution is much simpler and faster, thanks a lot! Tint is working, I was wrong!