Edges showing in triangle strip

glennmarshall

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

GoToLoop

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.

glennmarshall

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.

GoToLoop

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

• Seems like you haven't paid attention to those 2 options I've laid out above? [-(
• It's either CanvasRenderingContext2D or WebGLRenderingContext! L-)
• It's the same for any JS browser library; old or new! :-\"

glennmarshall

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?

GoToLoop

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

glennmarshall

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.

GoToLoop

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

glennmarshall

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

GoToLoop

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

GoToLoop

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();

glennmarshall

'true'

GoToLoop

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

glennmarshall

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

GoToLoop

• 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~

koogs

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.

glennmarshall

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

glennmarshall

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

GoToLoop

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();
}

glennmarshall

thanks for that.. But I think I'm gonna transfer to P5 - having to many problems with processing.js