CODEWITHSUNDEEP
processingopen-sourcep5.jsprocessing.js
Alchemille
Alchemille

Reputation: 51

Different Processing rendering between native and online sketch

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

Upvotes: 3

Views: 105

Answers (2)

Charlie Wallace
Charlie Wallace

Reputation: 1830

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:

Triangle Ellipse Exampl

Upvotes: 2

CWuest
CWuest

Reputation: 627

The problem lies in the screenY function. Print out the current variable in your processing sketch locally and online. In OpenProcessing, the variable current grows quickly above multiple thousands, while it stays between 0 and ~260 locally.

It seems like OpenProcessing has a bug inside this function.

To fix this however, I would recommend you to register differently when you drew a triangle at the top of the circle, for example by using your angle variable:

// Calculate angle and modulo it by 2 * PI
angle = (angle - 0.02) % (2 * PI);

// If the sketch has made a full revolution
if (previous_1 < previous_2 && previous_1 < angle) {
    // draw ellipse at the extrema position
    fill(128, 9, 9);
    ellipse(-90, -60, 7, 10); 
}

// update the 2 previous angles of the third vertex
previous_2 = previous_1;
previous_1 = angle;

However, because of how you draw the triangles, the ellipse is at an angle of about PI / 3. To fix this, one option would be to rotate the screen by angle + PI / 3 like so:

rotate(angle + PI / 3);

You might have to experiment with the angle offset a bit more to draw the ellipse perfectly at the top of the circle.

Upvotes: 2

Related Questions