Why are ellipses ruining my rectangles?

carykh

I created this really short piece of code to test a weird bug I found with Processing.js. I'm using Google Chrome.

void setup(){

size(257,257);

frameRate(5);

}

void draw() {

background(255);

fill(random(0,255),random(0,255),random(0,255));

ellipse(random(0,100),random(0,100),random(0,100),random(0,100));

fill(random(0,255),random(0,255),random(0,255));

rect(random(0,100),random(0,100),random(0,100),random(0,100));

}

When I run this code, the rectangles are split into four triangles each, and only the rightmost triangle is filled in. It's almost as if it's being drawn in 3D, but some z-fighting is going on.

This is what it looks like.

Normally, you'd expect the whole rectangle to be filled in. Now, if I either make the size 256x256 or smaller, OR I get rid of the ellipse-drawing, it works fine - the rectangles are completely filled in as they should be. But I want to have a large screen AND draw ellipses. Is there a reason why this is happening?

blindfish

Could be that the browser is invoking hardware acceleration independently... Try explicitly setting a rendering mode or disable hardware acceleration in the browser to see if that fixes it.

carykh

I tried disabling hardware acceleration, and that fixed it! Thanks. By the way, here's the larger project where I originally noticed the bug:

http://www.openprocessing.org/sketch/205702

blindfish

I tried disabling hardware acceleration, and that fixed it!

Well it fixed it for you; but it may not fix it for others running it in Chrome. At least we established that the problem is the browser invoking hardware acceleration; which will mean webGL which is intended for 3d; hence:

It's almost as if it's being drawn in 3D, but some z-fighting is going on.

Next step is to see whether setting a 2d rendering mode overrides the browser invoking hardware acceleration (which will mean re-enabling it). If a rendering mode doesn't work then that would suggest a bug in PJS to me...