Problems with filter()

edited June 2015 in JavaScript Mode

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....

Answers

  • edited June 2015
  • 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.

  • edited June 2015

    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?

  • edited June 2015

    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);
    }
    
    • 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.
  • edited June 2015

    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..

  • edited June 2015 Answer ✓

    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);
    }
    
  • 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!

Sign In or Register to comment.