#processing #open-source #p5.js #processing.js
#обработка #открытый исходный код #p5.js #processing.js
Вопрос:
Я получаю разные результаты при запуске этого примера с обработкой напрямую и с 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;
}
- При обработке эллипс рисуется, когда вершина треугольника находится сверху, что и является моей целью.
- При онлайн-рисовании эллипс рисуется в течение всего времени :/
Комментарии:
1. Пожалуйста, имейте в виду, что processing.js был удален в декабре 2018 года. Не пишите код с его помощью. Также обратите внимание, что это не тот же проект, что и p5js, который в значительной степени все еще поддерживается.
Ответ №1:
Чтобы получить те же результаты онлайн, что и при локальном запуске Processing, вам нужно будет указать режим рендеринга как 3d при вызове size
Например:
void setup() {
size(1100, 500, P3D);
}
Вам также нужно будет указать координату z при вызове screenY()
current = screenY(-90, -60, 0);
С этими двумя изменениями вы должны получить те же результаты онлайн, что и при локальном запуске.
В сети:
Пример треугольно-эллиптического изображения
Местные новости:
Комментарии:
1. Рад помочь и добро пожаловать в stackoverflow. Обязательно проголосуйте за все полезные ответы и отметьте ответ, который наилучшим образом отвечает на вопрос, как принятый. Голосование и принятие помогут другим найти правильные вопросы и ответы.
Ответ №2:
Проблема заключается в 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);
Возможно, вам придется еще немного поэкспериментировать со смещением угла, чтобы идеально нарисовать эллипс в верхней части окружности.