p5.js rect () detailX и detailY использование? - PullRequest
Новая
       37

p5.js rect () detailX и detailY использование?

0 голосов
/ 30 ноября 2018

Официальная документация на веб-сайте P5.js не содержит описательного использования двух упомянутых параметров - detailX и detailY (для функции rect() в разделе "Примитивы фигур 2D").).

Единственные операторы, написанные для этих двух параметров: «Integer: количество сегментов в направлении x» и «Integer: количество сегментов в направлении y» соответственно.

Но они не объясняют использование, и я попытался использовать их и увидеть результат, но нет видимой разницы, которая может отличить их.У меня было сомнение, что они как-то связаны с радиусом угла, но это не так.Для этого используются tl, tr, br, bl.И, если какой-либо из этих четырех параметров пропущен, то предыдущее значение используется для отсутствующего значения в списке параметров.Это должно означать, что если мы предоставим только два параметра углового радиуса, то также все четыре прямоугольных угла будут соответственно округлены, и что detailX и detailY здесь не для этой цели.

Итак, какова цель этихдва параметра?

Я пробовал очень много комбинаций ключевых слов в поиске Google, чтобы получить ответ, но ничего не нашел по этому вопросу.Возможно, я что-то пропустил.Пожалуйста, проясните это сомнение.

1 Ответ

0 голосов
/ 30 ноября 2018

Параметры detailX и detailY используются только при рендеринге WebGL.

Обратите внимание, что P5.js является открытым исходным кодом, и вы можете просмотреть его источник здесь .В частности, функция rect() запускается здесь и реализуется для 2D здесь .Из того, что я могу сказать, ничто в 2D-рендерере на самом деле не использует параметры detailX или detailY.

Однако функция rect() для рендерера WebGL здесь , и этоиспользует параметры detailX и detailY(). 

p5.RendererGL.prototype.rect = function(args) {
  var perPixelLighting = this.attributes.perPixelLighting;
  var x = args[0];
  var y = args[1];
  var width = args[2];
  var height = args[3];
  var detailX = args[4] || (perPixelLighting ? 1 : 24);
  var detailY = args[5] || (perPixelLighting ? 1 : 16);
  var gId = 'rect|' + detailX + '|' + detailY;
  if (!this.geometryInHash(gId)) {
    var _rect = function() {
      for (var i = 0; i <= this.detailY; i++) {
        var v = i / this.detailY;
        for (var j = 0; j <= this.detailX; j++) {
          var u = j / this.detailX;
          var p = new p5.Vector(u, v, 0);
          this.vertices.push(p);
          this.uvs.push(u, v);
        }
      }
      // using stroke indices to avoid stroke over face(s) of rectangle
      if (detailX > 0 && detailY > 0) {
        this.strokeIndices = [
          [0, detailX],
          [detailX, (detailX + 1) * (detailY + 1) - 1],
          [(detailX + 1) * (detailY + 1) - 1, (detailX + 1) * detailY],
          [(detailX + 1) * detailY, 0]
        ];
      }
    };
    var rectGeom = new p5.Geometry(detailX, detailY, _rect);
    rectGeom
      .computeFaces()
      .computeNormals()
      ._makeTriangleEdges()
      ._edgesToVertices();
    this.createBuffers(gId, rectGeom);
  }

Параметры detailX и detailY затем передаются в p5.Geometry, которую вы можете просмотреть здесь .

Похоже, что WebGL использует эти параметры для установки уровня детализации фигур, которые он рисует.Я думаю, что это полезно для таких вещей, как текстуры или шейдеры.

...