p5.js rect() detailX and detailY usage?

Question

The official documentation on the P5.js website does not include any descriptive usage of the two mentioned parameters - detailX and detailY (for the rect() function under "Shapes 2D primitives").

The only statements written for these two parameters are "Integer: number of segments in the x-direction" and "Integer: number of segments in the y-direction" respectively.

But these do not explain the usage and I tried to use these and see the result but there is no visible difference that can tell them apart. I had a doubt that they have something to do with the corner radius but that's not it. For that, tl, tr, br, bl are used. And, if any of these four is skipped then the previous value is used for the missing value in the parameter list. This must mean that if we provide just two corner-radius parameters then also all four rectangle corners will be rounded accordingly, and that detailX and detailY are not here for this purpose.

So, what is the purpose of these two parameters?

I have tried so many keyword combinations on google search to get an answer but didn't find anything on this. It is possible that I missed something. Please clarify this doubt.

Answer 1

The detailX and detailY parameters are only used in WebGL rendering.

Note that P5.js is open source, and you can view its source here. Specifically, the rect() function starts here and is implemented for 2D here. From what I can tell, nothing in the 2D renderer actually uses the detailX or detailY parameters.

However, the rect() function for the WebGL renderer is here and it does use the detailX and detailY() parameters.

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);
  }

The detailX and detailY parameters are then passed into p5.Geometry, which you can view here.

So it looks like WebGL is using these parameters to set the detail level of the shapes it's drawing. My guess is that this is useful for things like textures or shaders.