Edges showing in triangle strip

edited December 2017 in JavaScript Mode

I have an issue when drawing a triangle strip with no stroke - the edges of the polygons are slightly visible.

By changing to P2D render it works fine in Processing, but I need it to work in Processing.js, where the problem persists.

Here's a link to a sketch to show the problem http://studio.sketchpad.cc/sp/pad/view/P0CunpgdMc/rev.7

I know this is a processing.js issue but the processing.js google forum seems inactive.

Thanks for any help on this..

Answers

  • edited December 2017

    As an ancient JS library, Pjs got 2 renderers only for its size()'s 3rd parameter:
    https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

    1. CanvasRenderingContext2D: Constants: JAVA2D or P2D.
    2. WebGLRenderingContext: Constants: OPENGL or P3D.
  • Setting to P2D fixes it inside Processing, but not in Pjs. I know it's ancient, maybe that's the problem. Hoping it will work in P5js.

  • edited December 2017

    Setting to P2D fixes it inside Processing, but not in Pjs.

  • sorry for sounding dumb, I've no experience in js at all :( Is there a way to set the canvas rendering context from within Processing?

  • edited December 2017

    Is there a way to set the canvas rendering context from within Processing?

    • Well, when invoking size(), pass 1 of the following 5 renderer constants:
      JAVA2D, FX2D, P2D, P3D or OPENGL, as its 3rd argument. :-B
    • If none is passed, the default JAVA2D constant renderer is set instead. :\">
    1. JAVA2D is the default renderer and has always existed for Processing. \m/
    2. FX2D is new to P3. And it isn't available for the ancient Pjs nor any older Processing versions. :(
    3. P2D was an old P1 2D renderer. And since P2, it is now emulated as an OpenGL-based renderer instead. @-)
    4. P3D was an old P1 3D software-based renderer. And since P2, P3D is the same as OPENGL constant. :-j
    5. OPENGL was and still is an OpenGL-based renderer. And since P2, it is a deprecated alias for constant P3D. $-)
  • Thanks again for a full response! However, like I mentioned in the original post and in the code example link, when I pass P2D - it makes no difference. P2D fixes the problem inside processing, but when I run the js version telling it to render with P2D, it seems to be reverting to the default renderer rather than P2D.

  • edited December 2017

    ... when I pass P2D - it makes no difference.

    Re-read my very 1st reply. Pay attention to which rendering context constant P2D belongs to! :-t
    Pick the constant which corresponds to the browser's rendering context you wish to activate. ;)

  • yes it's the CanvasRenderingContext2D I need (P2D) - but I don't know where to go from there.

  • edited December 2017

    Yes, it's the CanvasRenderingContext2D I need (P2D)...

    However, like I've stated before: >-)

    3) P2D was an old P1 2D renderer. And since P2, it is now emulated as an OpenGL-based renderer instead.

    Constant P2D is an OpenGL-based renderer since Processing 2.x.x! #-o

  • edited December 2017

    Run this little code under Processing (not Pjs) in order to know whether current renderer is OpenGL-based: :ar!

    size(300, 200, P2D);
    println(g.isGL());
    exit();
    
  • edited December 2017

    So, if Processing's renderer P2D is OpenGL-based since P2, which browser's rendering context should you pick for Pjs: '2d' or 'webgl'? :>

  • Can you just tell me how to get it working, or if it will work at all, many thanks.

  • edited December 2017
    • According to your online sketch link, that glitch shows up when using size() w/o passing a 3rd argument.
    • size() w/o a 3rd parameter is the same as passing constant JAVA2D as its 3rd argument.
    • Now, you've stated you've fixed that glitch under P3 by passing constant P2D as size()'s 3rd argument.
    • As I've already revealed, P2D is an OpenGL-based renderer since P2, confirmed by invoking PGraphics::isGL() method.
    • If you wanna have any hopes about fixing that glitch under Pjs as well, it'd be a smart move to pick a constant there which activates a corresponding OpenGL-based browser canvas rendering context, right?
    • According to my very 1st reply, the "webgl" rendering context can be activated under Pjs by passing either constants OPENGL or P3D.
    • Have you already tried out any of those constants under Pjs as well, and checked out its result? =P~
  • That looks like anti-aliasing. It's drawing the edges blended with the background in order to make them look smoother. Try noSmooth() or smooth(0) or whatever.

  • Well it seems to be working better with OPENGL :) http://studio.sketchpad.cc/sp/pad/view/P0CunpgdMc/rev.46

    Sorry for wasting your time - but we got there in the end..

  • yeah I need the anti aliasing though - which brings me to my next problem - anti aliasing isn't working under OPENGL with the smooth() function. Also the depth sorting is screwed up from what it should look like (based on the project I'm currently working on).

  • edited December 2017

    A Cross-Mode Java-Pjs sketch: O:-)

    static final boolean JAVA = 1/2 != 1/2.;
    
    void setup() {
      size(100, 100, JAVA? P2D : P3D);
      smooth();
      noLoop();
    
      colorMode(RGB);
      noStroke();
      fill(#FFFF00);
    }
    
    void draw() {
      background(0);
    
      beginShape(TRIANGLE_STRIP);
      vertex(30, 75);
      vertex(40, 20);
      vertex(50, 75);
      vertex(60, 20);
      vertex(70, 75);
      vertex(80, 20);
      vertex(90, 75);
      endShape();
    }
    
  • thanks for that.. But I think I'm gonna transfer to P5 - having to many problems with processing.js

Sign In or Register to comment.