Different Processing rendering between native and online sketch

Question

I get different results when running this sample with Processing directly, and with Processing.js in a browser. Why?

I was happy about my result and wanted to share it on open Processing, but the rendering was totally different and I don't see why. Below is a minimal working example.

/* Program that rotates a triange and draws an ellipse when the third vertex is on top of the screen*/

float y = 3*height/2;
float x = 3*width/2;

float previous_1 = 0.0;
float previous_2 = 0.0;
float current;
float angle = 0.0;


void setup() {
  size(1100, 500);
}

void draw() {

  fill(0, 30);

  // rotate triangle
  angle = angle - 0.02;
  translate(x, y); 
  rotate(angle); 

  // display triangle
  triangle(-50, -50, -30, 30, -90, -60);

  // detect whether third vertex is on top by comparing its 3 successive positions
  current = screenY(-90, -60); // current position of the third vertex

  if (previous_1 < previous_2 && previous_1 < current) {
    // draw ellipse at the extrema position
    fill(128, 9, 9);
    ellipse(-90, -60, 7, 10); 
  }

  // update the 2 previous positions of the third vertex
  previous_2 = previous_1;
  previous_1 = current;
}

• In processing, the ellipse is drawn when a triangle vertex is on top, which is my goal.
• In online sketching, the ellipse is drawn during the whole time :/

Answer 1

In order to get the same results online as you get by running Processing locally you will need to specify the rendering mode as 3d when calling size

For example:

void setup() {
  size(1100, 500, P3D);
}

You will also need to specify the z coordinate in the call to screenY()

current = screenY(-90, -60, 0);

With these two changes you should get the same results online as you get running locally.

Online:

Triangle Ellipse Example

Local: