[p5.js 2.0 Bug Report]: textToContours is broken under textAlign(CENTER,CENTER) and use linebreak

[inaridarkfox4231]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.5

Web browser and version

Chrome

Operating system

Windows

Steps to reproduce this

Steps:

1. Use textToContours with 4 arguments, and use linebreak for texts.
2. It works fine when alignment is LEFT and TOP.
3. However, if alignment is CENTER,CENTER, it will not work properly.

Snippet:

DEMO

let font;

async function setup() {
  createCanvas(400, 400);
  font = await loadFont('https://inaridarkfox4231.github.io/assets/fonts/SourceSerif4.ttf');
  
  background(200);
  textAlign(LEFT,TOP); // no error
  //textAlign(CENTER, CENTER); // error
  textSize(120);
  
  // Get the point array.
  let contours = font.textToContours("H\nY", width/2, height/2, { sampleFactor: 0.5 });
  
  beginShape();
  for (const pts of contours) {
    beginContour();
    for (const pt of pts) {
      vertex(pt.x, pt.y);
    }
    endContour(CLOSE);
  }
  endShape();
}

case: LEFT,TOP

case: CENTER,CENTER

Additional Information

It seems to work fine with 6 arguments.

It's clear that no errors occur. However, I don't understand the specifications, so I don't know anything more. It's a wierd function. I can’t help.

Probably here is the cause for this:
_parseArgs

However, this is just a guess, and even if this was the cause, I don't know how to fix it.

That's all.

[inaridarkfox4231]

Also, this is unrelated to this bug, but I thought I'd bring it up.

Judging from the name, textToContours seems to be a function for obtaining contour lines.
However, there are fonts like this one that are made up of multiple paths. Can these really be called contour? That's what I was wondering about.

[inaridarkfox4231]

It's probably the same bug.
#7984

ver: 2.0.5

let font;

async function setup() {
  createCanvas(windowWidth, windowHeight);
  font = await loadFont("https://inaridarkfox4231.github.io/assets/fonts/KosugiMaru-Regular.ttf");
  const myText = "La Garita Stock Driveway Road";
  const name = myText.split(" ").join("\n");
  textFont(font);
  textSize(12);
  textAlign(LEFT,TOP); // no error
  // textAlign(CENTER,CENTER); // error
  const bounds = font.textBounds(name, 200, 200);

  rect(bounds.x, bounds.y, bounds.w, bounds.h);
  text(name, 200, 200);
}

All functions that use _parseArgs() may cause similar bug because of this.
Of course, if we don't use line breaks, there's no problem. #7984 handles the case where line breaks are used, so a bug occurs.

fontBounds

This is the first time I've heard that p5.Font also has textBounds()... I didn't notice it because it wasn't mentioned in the reference.

[davepagurek]

It looks like the NaN is coming from dividing width, which is undefined in this case, by 2 here in Renderer.prototype._xAlignOffset:

p5.js/src/type/textCore.js

Line 2244 in be953ca

return width / 2;

Normally we pass the width from measureText in there:

p5.js/src/type/textCore.js

Line 2343 in be953ca

x -= this._xAlignOffset(this.states.textAlign, metrics.width);

...but in this case the code is going through this path, which is passing the optional width argument instead:

p5.js/src/type/textCore.js

Lines 1910 to 1912 in be953ca

	boxes.forEach(bb =>
	bb.x += p5.Renderer2D.prototype._xAlignOffset
	.call(this, textAlign, width)

So I think we likely need to update the line above to use width ?? maxWidth, and define maxWidth as, I think, the maximum measured width of each line.

---

For your other questions:

This is the first time I've heard that p5.Font also has textBounds()... I didn't notice it because it wasn't mentioned in the reference.

Currently we keep those private as just an implementation detail, as the global textBounds/fontBounds use them. Potentially these could be made public if there's use for that without confusing users too much?

However, there are fonts like this one that are made up of multiple paths. Can these really be called contour? That's what I was wondering about.

The "contour" here refers to the contours of the different shapes that the font defines in the path. E.g. if the character being drawn is :, we'd get back two distinct contour path for the two circles because the font defines two shapes. Some fonts similarly define multiple shapes, but uses them in an overlapping manner. If we wanted to boolean the contours together, that would probably be useful but would come with performance and code size implications, so we'd want to consider that when deciding whether that should be a core feature or an addon. Starting it as an addon could be good, I've had a good experience using https://www.npmjs.com/package/polybooljs on paths in the past.

[inaridarkfox4231]

I see, if it's undefined, just use a different value! I never thought of that.

After all, this kind of thing is best handled by someone who is familiar with the specifications.

[inaridarkfox4231]

I added the missing part in the previous picture. x is also NaN.

function setup() {
  createCanvas(300, 200);
  background(240);

  textSize(32);
  textAlign(CENTER,CENTER);
  textFont('Georgia');

  let txt = "Hello, \nWorld!";
  // Compute the bounding box based on the font's intrinsic metrics
  let bounds = fontBounds(txt, 50, 50);

  fill(0);
  text(txt, 50, 50);

  noFill();
  stroke('green');
  rect(bounds.x, bounds.y, bounds.w, bounds.h);

  noStroke();
  fill(50);
  textSize(15);
  text("Font Bounds: x=" + bounds.x.toFixed(1) + ", y=" + bounds.y.toFixed(1) +
       ", w=" + bounds.w.toFixed(1) + ", h=" + bounds.h.toFixed(1), 78, 100);
}