Блог

Я получаю разные результаты при запуске этого примера с обработкой напрямую и с Processing.js в браузере. Почему?

Я был доволен своим результатом и хотел поделиться им в open Processing, но рендеринг был совершенно другим, и я не понимаю почему. Ниже приведен минимальный рабочий пример.

 /* 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 amp;amp; 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, вам нужно будет указать режим рендеринга как 3d при вызове size

Например:

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

Вам также нужно будет указать координату z при вызове screenY()

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

С этими двумя изменениями вы должны получить те же результаты онлайн, что и при локальном запуске.

В сети:

Пример треугольно-эллиптического изображения

Местные новости:

Проблема заключается в screenY функции. Распечатайте current переменную в вашем эскизе для обработки локально и онлайн. В OpenProcessing переменная current быстро увеличивается до нескольких тысяч, в то время как локально она остается в диапазоне от 0 до ~ 260.

Похоже, что в OpenProcessing есть ошибка внутри этой функции.

Однако, чтобы исправить это, я бы рекомендовал вам регистрироваться по-другому, когда вы рисуете треугольник в верхней части круга, например, используя вашу переменную angle:

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

Возможно, вам придется еще немного поэкспериментировать со смещением угла, чтобы идеально нарисовать эллипс в верхней части окружности.