Processing 本机和联机草图的不同处理渲染

当直接使用Processing和在浏览器中使用Processing.js运行此示例时，我会得到不同的结果。为什么?

我对我的结果感到高兴，并想在开放处理上分享它，但渲染完全不同，我不明白为什么。下面是一个简单的工作示例

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

/*当第三个顶点位于屏幕顶部时旋转三角形并绘制椭圆的程序*/
浮动y=3*高度/2；
浮动x=3*宽度/2；
浮动上一个_1=0.0；
浮动上一个_2=0.0；
浮充电流；
浮动角度=0.0；
无效设置（）{
规模（1100500）；
}
作废提款（）{
填充（0,30）；
//旋转三角形
角度=角度-0.02；
翻译（x，y）；
旋转（角度）；
//显示三角形
三角形（-50，-50，-30,30，-90，-60）；
//通过比较第三个顶点的3个连续位置来检测其是否位于顶部
当前=屏幕（-90，-60）；//第三个顶点的当前位置
如果（上一个\u 1<上一个\u 2&&上一个\u 1<当前）{
//在极值位置绘制椭圆
填充（128,9,9）；
椭圆（-90，-60,7,10）；
}
//更新第三个顶点的前两个位置
先前的_2=先前的_1；
先前的_1=当前；
}

• 在处理过程中，当三角形顶点位于顶部时绘制椭圆，这是我的目标
• 在在线绘制中，椭圆在整个绘制过程中绘制：/

---

问题在于

屏幕显示功能。本地和在线打印处理草图中的
当前
变量。在OpenProcessing中，变量
current
在数千以上快速增长，而在本地保持在0到260之间

似乎OpenProcessing在这个函数中有一个bug

但是，为了解决这个问题，我建议您在圆的顶部绘制三角形时进行不同的注册，例如使用角度变量：

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

您可能需要对角度偏移进行更多的实验，以便在圆的顶部完美地绘制椭圆。
为了在线获得与在本地运行处理相同的结果，您需要在调用时将渲染模式指定为3d

例如：

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

您还需要在调用
screenY（）

通过这两个更改，您应该可以在线获得与本地运行相同的结果

在线：


本地：

很高兴为您提供帮助，欢迎来到stackoverflow。确保并投票选出所有有用的答案，并将最能回答问题的答案标记为已接受。投票和接受将帮助其他人找到好的问题和答案。请注意processing.js已于2018年12月退役。不要用它来写代码。还要注意的是，它与p5js不是同一个项目，p5js仍在维护中。
void setup() {
  size(1100, 500, P3D);
}

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