Add visual tests for textToPoints, addTextToContours

src/type/p5.Font.js

@@ -133,10 +133,23 @@ function font(p5, fn) {
       ({ width, height, options } = this._parseArgs(width, height, options));
 
       // lineate and get the glyphs for each line
-      let glyphs = this.textToPaths(str, x, y, width, height, options);
+      let commands = this.textToPaths(str, x, y, width, height, options);
 
       // convert glyphs to points array with {sampleFactor, simplifyThreshold}
-      return pathToPoints(glyphs, options);
+      return pathToPoints(commands, options);
+    }
+
+    textToContours(str, x, y, width, height, options) {
+      const cmds = this.textToPaths(str, x, y, width, height, options);
+      const cmdContours = [];
+      for (const cmd of cmds) {
+        if (cmd[0] === 'M') {
+          cmdContours.push([]);
+        }
+        cmdContours[cmdContours.length - 1].push(cmd);
+      }
+
+      return cmdContours.map((commands) => pathToPoints(commands, options));
     }
 
     static async list(log = false) { // tmp
@@ -1122,7 +1135,7 @@ function font(p5, fn) {
     }
 
     let opts = parseOpts(options, {
-      sampleFactor: 0.05,
+      sampleFactor: 0.25,
       simplifyThreshold: 0
     });
 

test/unit/visual/cases/typography.js

@@ -409,4 +409,91 @@ visualSuite("Typography", function () {
       screenshot();
     });
   });
+
+  visualSuite('textToPoints', function() {
+    visualTest('Fonts can be converted to points', async function(p5, screenshot) {
+      p5.createCanvas(100, 100);
+      const font = await p5.loadFont(
+        '/unit/assets/Inconsolata-Bold.ttf'
+      );
+      p5.background(255);
+      p5.strokeWeight(2);
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.textSize(50);
+      const pts = font.textToPoints('p5*js', 0, 0);
+      p5.beginShape(p5.POINTS);
+      for (const { x, y } of pts) p5.vertex(x, y);
+      p5.endShape();
+      screenshot();
+    });
+
+    visualTest('Sampling density can be changed', async function(p5, screenshot) {
+      p5.createCanvas(100, 100);
+      const font = await p5.loadFont(
+        '/unit/assets/Inconsolata-Bold.ttf'
+      );
+      p5.background(255);
+      p5.strokeWeight(2);
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.textSize(50);
+      const pts = font.textToPoints('p5*js', 0, 0, { sampleFactor: 0.5 });
+      p5.beginShape(p5.POINTS);
+      for (const { x, y } of pts) p5.vertex(x, y);
+      p5.endShape();
+      screenshot();
+    });
+  });
+
+  visualSuite('textToContours', function() {
+    visualTest('Fonts can be converted to points grouped by contour', async function(p5, screenshot) {
+      p5.createCanvas(100, 100);
+      const font = await p5.loadFont(
+        '/unit/assets/Inconsolata-Bold.ttf'
+      );
+      p5.background(200);
+      p5.strokeWeight(2);
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.textSize(50);
+      const contours = font.textToContours('p5*js', 0, 0, { samplingDensity: 0.5 })
+      p5.beginShape();
+      for (const pts of contours) {
+        p5.beginContour();
+        for (const { x, y } of pts) p5.vertex(x, y);
+        p5.endContour(p5.CLOSE);
+      }
+      p5.endShape();
+      screenshot();
+    });
+  });
+
+  visualSuite('textToPaths', function() {
+    visualTest('Fonts can be converted to drawing context commands', async function(p5, screenshot) {
+      p5.createCanvas(100, 100);
+      const font = await p5.loadFont(
+        '/unit/assets/Inconsolata-Bold.ttf'
+      );
+      p5.background(200);
+      p5.strokeWeight(2);
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.textSize(50);
+      const cmds = font.textToPaths('p5*js', 0, 0)
+      p5.drawingContext.beginPath();
+      for (const [type, ...args] of cmds) {
+        if (type === 'M') {
+          p5.drawingContext.moveTo(...args);
+        } else if (type === 'L') {
+          p5.drawingContext.lineTo(...args);
+        } else if (type === 'C') {
+          p5.drawingContext.bezierCurveTo(...args);
+        } else if (type === 'Q') {
+          p5.drawingContext.quadraticCurveTo(...args);
+        } else if (type === 'Z') {
+          p5.drawingContext.closePath();
+        }
+      }
+      p5.drawingContext.fill();
+      p5.drawingContext.stroke();
+      screenshot();
+    });
+  });
 });

test/unit/visual/screenshots/Typography/textToContours/Fonts can be converted to points grouped by contour/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/textToPaths/Fonts can be converted to drawing context commands/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/textToPoints/Fonts can be converted to points/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Typography/textToPoints/Sampling density can be changed/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}