原生草图和在线草图之间的不同处理渲染答案

【问题标题】：Different Processing rendering between native and online sketch原生草图和在线草图之间的不同处理渲染
【发布时间】：2023-04-03 05:37:01
【问题描述】：

在直接使用 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;
}

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

【问题讨论】：

请注意 processing.js 已于 2018 年 12 月停用。请勿使用它编写代码。另请注意，它与 p5js 不是同一个项目，仍然维护着很多。

标签： processing open-source p5.js processing.js

【解决方案1】：

为了在线获得与本地运行处理相同的结果，您需要在调用 size 时将渲染模式指定为 3d

例如：

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

您还需要在调用screenY()时指定z坐标

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

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

在线：

Triangle Ellipse Example

本地：

【讨论】：

很高兴帮助并欢迎使用 stackoverflow。确保并支持所有有用的答案，并将最能回答问题的答案标记为已接受。投票和接受将帮助其他人找到好的问题和答案。

【解决方案2】：

问题在于screenY 函数。在本地和在线的处理草图中打印出current 变量。在 OpenProcessing 中，变量 current 快速增长到数千以上，而在本地保持在 0 到 ~260 之间。

OpenProcessing 似乎在这个函数中有一个错误。

但是，要解决此问题，我建议您在圆的顶部绘制三角形时以不同的方式注册，例如使用您的角度变量：

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

但是，由于您绘制三角形的方式，椭圆的角度约为 PI / 3。要解决此问题，一种选择是将屏幕旋转angle + PI / 3，如下所示：

rotate(angle + PI / 3);

您可能需要更多地尝试角度偏移，才能在圆的顶部完美地绘制椭圆。

【讨论】：