florissteenkamp / mat Goto Github PK

This is the font-stroke of character "乚" (though in SVG coordinates it is y-opposite):
M 192 794 L 192 128 C 192 6 235 -23 374 -23 L 702 -23 C 843 -23 870 33 886 209 C 867 214 838 226 820 237 C 808 79 793 40 703 40 L 371 40 C 279 40 261 57 261 126 L 261 794 Z

Using this MAT tool, I can extract the SAT with a lot of SVG paths (but the order is wrong).
What I wanna do is extracting the points of SAT (not paths) by following the original order, ie. from the first point near (192, 794).

How to do that? Thanks.

I read a choi paper for this, i couldn't understand how he is finding B(x) , i know find circle bezier intersection using closed loop solution, but i could not understand how he is even finding center point, say single. Holed region defined by 2 curves one is outer and other is interior, now if assume outer is made of m bezier and inner is made of n bezier, let us assume we are traversing CW , then how do initialise a x and then find d(x,y) = d(x,z), there are mxn possibility to check for one B(x), then how is this method efficient

A documentation or source code for the MAT demo would be great. It is exacly what I am looking for but with the given documentation, I am a bit clueless as to how to get a medial axis transform

I want to run the code on VS or other C++ based IDEs， how could I do?

Hi, I am facing a strange issue with calling findMats.

Works
I have a polygon with a hole, which represents the letter "B" (see 'B.svg' in gist).

If I call findMats with the svg-data of "B" everything works fine and I get the expected result.

Does not work
Two polygons, both are representing the letter "B" like above, same shape, just duplicated and moved. (see 'BB.svg' in gist)

I have a problem with calling findMats on the second polygon path, which is technically the same shape as before, just on another position.

Following error occurs:

TypeError: Cannot read property 'pos' of undefined
at Object.find3ProngForDelta3s (find-3-prong-for-delta3s.js:166)
at Object.find3Prong (find-3-prong.js:44)
at findAndAdd3Prong (find-and-add-3-prongs.js:113)
at findAndAdd3Prongs (find-and-add-3-prongs.js:96)
at Object.findAndAddAll3Prongs (find-and-add-3-prongs.js:23)
at findPartialMat (find-mats.js:88)
at Object.findMats (find-mats.js:45)

I am trying to use the latest version 2.0.1 with type script in node but getting below error. Was not getting the same error with version 1.1.2 also provided in examples.
I tried using same compiler options as in the example but unable to resolve the issue.
Also tried using module: "ES6" but that is creating some other issues.
Any suggestions on what to do?

const flo_mat_1 = require("flo-mat");
                  ^
Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\flo-mat\node\index.js from service.js not supported.
Instead change the require of index.js in service.js to a dynamic import() which is available in all CommonJS modules.

My current TS config

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictBindCallApply": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "Node",
    "strictPropertyInitialization": false,
  }
}

• @param isHoleClosing If true, this [[CpNode]] belongs to a hole-closing --> what is hole closing here
  • maximal disk.
• @param isIntersection true if this cpNode is at a shape boundary --> what is shape boundary intersection point
  • intersection point, false otherwise

Trying to identify terminating point of the fonts svg

getProngCount(cpNode) == 3 && isTerminating(cpNode) && !cpNode.isHoleClosing

With above I am getting some valid result but in some cases i.e "A" is not valid since red marked should not be considered as it is hole closing terminating point.

Is there a better way to find?

Hey @FlorisSteenkamp,

I am trying to draw some bezier curves on an html canvas, using the curve-parameters contained within the cpNode's cp.pointOnShape.curve.ps, but the drawn-curves are not as expected, or representative of the original shape(?).

Referring to the image below, gray curves are the original shape, and green curves are the result of plots from control points in cp.pointOnShape.curve.ps's array of [x,y] pairs.

If possible, please advise.

For context, here's some relevant paperjs code which should construct the curve from cp.pointOnShape.curve.ps:

console.log("POS Curve:", node.cp.pointOnShape.curve.ps);                  
const curve = new Paper.Curve(new Paper.Point(node.cp.pointOnShape.curve.ps[0]), new Paper.Point(node.cp.pointOnShape.curve.ps[1]), new Paper.Point(node.cp.pointOnShape.curve.ps[2]), new Paper.Point(node.cp.pointOnShape.curve.ps[3]));
const newPath = new Paper.Path({segments: [curve.segment1, curve.segment2], strokeColor: 'green'});
Paper.project.activeLayer.addChild(newPath);

NOTE: You may notice that some of the start/end points are representative of the original curve's start/end points. Perhaps it's just an issue with the handles?

Thank you.

Best,
MM

I am new to typescript.
When I tried to use tsc index.ts to compile your code, I got errors like this:

node_modules/flo-bezier3/node/implicit-form/exact/get-implicit-form1-.d.ts:7:5 - error TS1131: Property or signature expected.

7 vₓ: number;
~

Maybe it is caused by non-ascii character in your code?
How can I fix it?

how the boundary curve are represented, you have referred a paper where the boundary is represented in the format of analytic curves , but in vector graphics which converts the boundaries to quadratic bezier curves

Floris, how can I access the curve's cornerAtEnd? I see the function on the Curve's class definition, but I am unable to access it.

Trying something like this:

export const paintCorners = (scaledSvgPathString: string) => {
  const paths = getPathsFromStr(scaledSvgPathString);

  paths.forEach((loop) => {
    loopFromBeziers(loop).curves.forEach((curve) => {
      console.log(getCornerAtEnd(curve));
      // Or.. ??
      // console.log(curve.getCornerAtEnd();
    });
  });
};

Please advise? I would prefer to use your getCornerAtEnd() implementation instead of writing a duplicate.

Hi Floris,

Sorry for opening an issue, but I can't find your email address or other contact info in any of your repos. I was wondering if you'd be interested in making some modifications to your MAT/SAT library for us. We're open to both hourly and project based work. I think it would be relatively short/easy (at least for you, not me 🤣) , but I'd love to also get your feedback on what we're doing with it and the modifications could increase in scope if that was something you'd be interested in. It's obviously very niche and highly specialized.

If you could shoot me an email, that'd be fantastic, even if you aren't interested so I know to stop pursuing it.

I've ROT13 encoded my email to make it less likely I get spam: wba.ibatvyyrea(ng)zbabglcr.pbz, my personal email address is wibatvyyrea(ng)tznvy.pbz in case there are any delivery issues.

The library is fantastic, and has been incredibly helpful, thank you for making it open source!

Sir I am try to imlement with my svg script which has Z,V,H in it will it work that way?
is your script is based on cuibic or quadratic bezier?

I am getting invalid sat structure for following svg path.
M130.26 0C130.26 0 142.26 0 142.26 0C142.26 0 145.69-3.43 145.69-3.43C145.69-3.43 145.69-12 145.69-12C145.69-12 144.83-12.86 144.83-12.86C144.83-12.86 145.68-13.71 145.68-13.71C145.68-13.71 145.69-13.71 145.69-13.71C145.69-13.71 145.69-20.57 145.69-20.57C145.69-20.57 142.26-24 142.26-24C142.26-24 130.26-24 130.26-24C130.26-24 128.55-22.28 128.55-22.28C128.55-22.28 128.55-17.14 128.55-17.14C128.55-17.14 133.69-17.14 133.69-17.14C133.69-17.14 133.69-18 133.69-18C133.69-18 134.55-18.86 134.55-18.86C134.55-18.86 138.83-18.86 138.83-18.86C138.83-18.86 140.55-17.14 140.55-17.14C140.55-17.14 138.83-15.43 138.83-15.43C138.83-15.43 135.40-15.43 135.40-15.43C135.40-15.43 135.40-10.28 135.40-10.28C135.40-10.28 138.83-10.28 138.83-10.28C138.83-10.28 140.55-8.57 140.55-8.57C140.55-8.57 140.55-6.86 140.55-6.86C140.55-6.86 138.83-5.14 138.83-5.14C138.83-5.14 134.55-5.14 134.55-5.14C134.55-5.14 133.69-6 133.69-6C133.69-6 133.69-6.86 133.69-6.86C133.69-6.86 128.55-6.86 128.55-6.86C128.55-6.86 128.55-1.71 128.55-1.71C128.55-1.71 130.26 0 130.26 0Z
The path seems to be valid shape.

reason behind the issue seems unusually large disk that was in the mat structure.

The lib works great in most scenarios. But I find it fails to detect mats in some polygons with holes. Pls check following two samples.

The first one with 5 holes CANNOT be detected correctly. Actually the number of mats is zero.

M 2568 -576 L 2568 -1083 L 2881 -1083 L 2881 -1216 L 2568 -1216 L 2568 -1661 L 1923 -1661 L 1923 -1984 L 2832 -1984 L 2832 -2116 L 2122 -2116 C 2218 -2232 2325 -2377 2411 -2513 L 2261 -2574 C 2184 -2439 2052 -2245 1947 -2116 L 1038 -2116 L 1145 -2180 C 1078 -2290 930 -2458 801 -2574 L 678 -2510 C 798 -2390 940 -2229 1007 -2116 L 242 -2116 L 242 -1984 L 1127 -1984 L 1127 -1661 L 439 -1661 L 439 -1536 L 1127 -1536 L 1127 -1216 L 193 -1216 L 193 -1083 L 1127 -1083 L 1127 -701 L 414 -701 L 414 -576 L 1044 -576 C 820 -298 451 -37 135 92 C 168 120 211 171 236 209 C 540 73 894 -188 1127 -472 L 1127 272 L 1268 272 L 1268 -576 L 1781 -576 L 1781 272 L 1923 272 L 1923 -494 C 2175 -217 2546 51 2847 190 C 2872 152 2915 102 2946 73 C 2636 -50 2255 -311 2012 -576 L 2568 -576
M 1268 -701 L 1268 -1083 L 1781 -1083 L 1781 -701 L 1268 -701
M 1268 -1536 L 1781 -1536 L 1781 -1216 L 1268 -1216 L 1268 -1536
M 1268 -1984 L 1781 -1984 L 1781 -1661 L 1268 -1661 L 1268 -1984
M 2427 -1536 L 2427 -1216 L 1923 -1216 L 1923 -1536 L 2427 -1536
M 2427 -701 L 1923 -701 L 1923 -1083 L 2427 -1083 L 2427 -701

The second one also with 5 holes CAN be detected without problem.

M 2718 -1090 L 2912 -1090 L 2912 -1216 L 2718 -1216 L 2718 -1661 L 2230 -1661 L 2230 -1920 L 2860 -1920 L 2860 -2049 L 2239 -2049 C 2334 -2179 2442 -2347 2528 -2491 L 2390 -2557 C 2316 -2408 2187 -2192 2086 -2049 L 1136 -2049 L 1136 -1920 L 1585 -1920 L 1585 -1661 L 1182 -1661 L 1182 -1536 L 1585 -1536 L 1585 -1216 L 1093 -1216 L 1093 -1090 L 1585 -1090 L 1585 -768 L 1167 -768 L 1167 -642 L 1529 -642 C 1391 -352 1164 -66 949 80 C 980 105 1026 155 1050 189 C 1241 43 1443 -215 1585 -489 L 1585 270 L 1720 270 L 1720 -642 L 2095 -642 L 2095 267 L 2230 267 L 2230 -505 C 2390 -237 2614 27 2808 174 C 2832 136 2875 90 2909 62 C 2691 -78 2442 -365 2285 -642 L 2718 -642 L 2718 -1090
M 2230 -768 L 2230 -1090 L 2589 -1090 L 2589 -768 L 2230 -768
M 1720 -768 L 1720 -1090 L 2095 -1090 L 2095 -768 L 1720 -768
M 1720 -1536 L 2095 -1536 L 2095 -1216 L 1720 -1216 L 1720 -1536
M 1720 -1920 L 2095 -1920 L 2095 -1661 L 1720 -1661 L 1720 -1920
M 2589 -1536 L 2589 -1216 L 2230 -1216 L 2230 -1536 L 2589 -1536

I did some investigation and found there is something wrong in findAndAdd2ProngsOnAllPaths.
find_and_add_2_prongs_1.findAndAdd2Prongs is failed to return a valid cpNode on last loop.

Getting following error while creating MAT for English characters with font type as Bookman Bold.

calc-initial-3-prong-center.js:21

   Uncaught TypeError: Cannot read properties of undefined (reading 'pos')
at Object.calcInitial3ProngCenter (calc-initial-3-prong-center.js:21:17)
at Object.find3ProngForDelta3s (find-3-prong-for-delta3s.js:53:43)
at Object.find3Prong (find-3-prong.js:44:61)
at findAndAdd3Prong (find-and-add-3-prongs.js:130:37)
at findAndAdd3Prongs (find-and-add-3-prongs.js:106:13)
at Object.findAndAddAll3Prongs (find-and-add-3-prongs.js:25:21)
at findMat (find-mats.js:121:29)
at Object.findMats (find-mats.js:49:19)
at main (index.ts:352:26)

SVG path created using Opentype js. One of the example svg path:-
M103.04 91.04L103.04 91.04L114.08 119.68L108.96 121.76L102.56 121.76Q97.60 115.84 92.48 111.36Q87.36 106.88 81.92 104L81.92 104Q77.12 101.44 71.52 100Q65.92 98.56 59.36 98.24L59.36 98.24Q59.20 98.24 58.88 98.24Q58.56 98.24 58.24 98.24L58.24 98.24Q57.76 98.24 57.28 98.24Q56.80 98.24 56.32 98.24L56.32 98.24Q55.84 98.40 55.36 98.40Q54.88 98.40 54.40 98.40L54.40 98.40Q53.28 98.56 52.08 98.80Q50.88 99.04 49.76 99.36L49.76 99.36Q48.64 99.52 47.68 100Q46.72 100.48 45.92 101.12L45.92 101.12Q44.32 102.24 43.44 103.60Q42.56 104.96 42.24 106.72L42.24 106.72Q42.08 108.32 41.92 110Q41.76 111.68 41.76 113.44L41.76 113.44L41.76 137.76L46.08 137.76Q52.16 138.08 56.08 137.12Q60 136.16 61.92 134.24L61.92 134.24Q63.84 132.32 65.20 128.32Q66.56 124.32 67.20 118.40L67.20 118.40L72.64 118.08L79.04 118.08L79.04 165.92L72.64 165.92L67.20 165.92Q67.04 164.32 66.72 162.56Q66.40 160.80 66.08 159.04L66.08 159.04Q65.60 157.28 64.88 155.60Q64.16 153.92 63.04 152.32L63.04 152.32Q61.44 149.92 59.60 148.48Q57.76 147.04 55.52 146.56L55.52 146.56Q53.28 146.08 50.88 145.84Q48.48 145.60 45.76 145.60L45.76 145.60L41.76 145.44L41.76 177.12Q41.76 177.92 41.76 178.56Q41.76 179.20 41.76 179.84L41.76 179.84Q41.76 180.16 41.76 180.48Q41.76 180.80 41.92 181.12L41.92 181.12Q41.92 181.60 42 181.92Q42.08 182.24 42.08 182.56L42.08 182.56Q42.24 183.52 42.48 184.32Q42.72 185.12 42.88 185.92L42.88 185.92Q43.20 186.72 43.44 187.44Q43.68 188.16 44.16 188.64L44.16 188.64Q44.96 189.76 46 190.56Q47.04 191.36 48.32 191.84L48.32 191.84Q49.60 192.32 51.04 192.64Q52.48 192.96 53.92 193.12L53.92 193.12Q54.24 193.12 54.56 193.20Q54.88 193.28 55.20 193.28L55.20 193.28Q55.52 193.28 55.84 193.36Q56.16 193.44 56.48 193.44L56.48 193.44Q64.96 193.12 72 191.36Q79.04 189.60 84.80 186.08L84.80 186.08Q90.88 182.40 96.56 176.88Q102.24 171.36 107.68 164L107.68 164L114.08 163.84L119.20 165.92L104.64 200L98.24 200L4.96 200L4.96 195.20L6.56 195.04L12.96 195.04L13.28 195.20L6.88 195.20L7.52 195.04L7.84 195.04L8.16 195.04Q9.60 195.04 10.96 194.80Q12.32 194.56 13.60 194.08L13.60 194.08Q14.88 193.76 16 192.80Q17.12 191.84 17.76 190.24L17.76 190.24Q18.08 189.44 18.40 188.64Q18.72 187.84 18.88 186.72L18.88 186.72Q19.04 185.76 19.12 184.64Q19.20 183.52 19.36 182.40L19.36 182.40Q19.36 182.08 19.36 181.76Q19.36 181.44 19.36 180.96L19.36 180.96Q19.36 180.64 19.36 180.32Q19.36 180 19.36 179.68L19.36 179.68Q19.36 178.88 19.36 178.32Q19.36 177.76 19.36 177.12L19.36 177.12L19.36 176L19.36 175.20L19.36 116L19.36 115.04Q19.36 115.04 19.36 114.88Q19.36 114.72 19.36 114.56L19.36 114.56Q19.36 114.56 19.36 114.40Q19.36 114.24 19.36 114.08L19.36 114.08Q19.36 110.40 19.04 107.44Q18.72 104.48 17.92 101.92L17.92 101.92Q17.28 99.52 14.64 98.08Q12 96.64 7.36 96.32L7.36 96.32L4.96 95.84L4.96 91.04L11.36 91.04L103.04 91.04L103.04 91.04Z

Hi Floris - I am attempting to calculate the MAT of a path with holes...

More specifically, I am trying to calculate the MAT of a path representing the number zero ('0').

However, the MAT calculation doesn't seem to accommodate the hole, and the output-results are not as expected.

NOTE: Other paths with holes, DO, work (see comments in code).

--- CODE ---

import './style.css'; // Import stylesheets

import {
  findMats,
  getPathsFromStr,
  Mat,
  traverseEdges,
  toScaleAxis,
} from 'flo-mat';

const NS = 'http://www.w3.org/2000/svg'; // Svg namespace

/**
 * Creates and returns an SVG DOM element.
 * @param id The dom id to assign to the SVG element, e.g. 1 -> 'svg-1'
 */
function createSvg(id: number) {
  let $e = document.createElementNS(NS, 'svg');
  $e.setAttributeNS(null, 'id', 'svg' + id);
  $e.setAttributeNS(null, 'style', 'width: 100%; display: inline-block');
  $e.setAttributeNS(null, 'viewBox', '-1000 -5000 10000 20000');

  return $e;
}

/**
 * Returns an SVG path string of a line.
 * @param ps The line endpoints.
 */
function getLinePathStr(ps: number[][]) {
  let [[x0, y0], [x1, y1]] = ps;
  return `M${x0} ${y0} L${x1} ${y1}`;
}

/**
 * Returns an SVG path string of a quadratic bezier curve.
 * @param ps The quadratic bezier control points.
 */
function getQuadBezierPathStr(ps: number[][]) {
  let [[x0, y0], [x1, y1], [x2, y2]] = ps;
  return `M${x0} ${y0} Q${x1} ${y1} ${x2} ${y2}`;
}

/**
 * Returns an SVG path string of a cubic bezier curve.
 * @param ps The cubic bezier control points.
 */
function getCubicBezierPathStr(ps: number[][]) {
  let [[x0, y0], [x1, y1], [x2, y2], [x3, y3]] = ps;
  return `M${x0} ${y0} C${x1} ${y1} ${x2} ${y2} ${x3} ${y3}`;
}

/**
 * The SVG path string representing our shape.
 */

// THIS PATH DOES NOT APPEAR TO WORK WITH HOLES
const svgPathStr = `m 156.22344,294.17732 c 56.74809,0 73.7782,111.27897 73.7782,620.21251 0,508.93497 -17.03011,620.21347 -73.7782,620.21347 -56.747396,0 -79.464337,-111.2785 -78.278899,-620.21347 C 79.129384,405.45629 99.476044,294.17732 156.22344,294.17732 Z M 152.42498,0.56763972 c 126.66868,0 151.8074,163.95935028 151.8074,913.83244028 0,749.87302 -41.69863,913.83232 -151.8074,913.83232 C 42.316897,1828.2324 -1.128782,1664.2731 0.6181635,914.40008 2.3652082,164.52699 25.756989,0.56763972 152.42498,0.56763972 Z`;

// THIS PATH APPEARS TO WORK WITH HOLES
// const svgPathStr = 'M 2718 -1090 L 2912 -1090 L 2912 -1216 L 2718 -1216 L 2718 -1661 L 2230 -1661 L 2230 -1920 L 2860 -1920 L 2860 -2049 L 2239 -2049 C 2334 -2179 2442 -2347 2528 -2491 L 2390 -2557 C 2316 -2408 2187 -2192 2086 -2049 L 1136 -2049 L 1136 -1920 L 1585 -1920 L 1585 -1661 L 1182 -1661 L 1182 -1536 L 1585 -1536 L 1585 -1216 L 1093 -1216 L 1093 -1090 L 1585 -1090 L 1585 -768 L 1167 -768 L 1167 -642 L 1529 -642 C 1391 -352 1164 -66 949 80 C 980 105 1026 155 1050 189 C 1241 43 1443 -215 1585 -489 L 1585 270 L 1720 270 L 1720 -642 L 2095 -642 L 2095 267 L 2230 267 L 2230 -505 C 2390 -237 2614 27 2808 174 C 2832 136 2875 90 2909 62 C 2691 -78 2442 -365 2285 -642 L 2718 -642 L 2718 -1090 M 2230 -768 L 2230 -1090 L 2589 -1090 L 2589 -768 L 2230 -768 M 1720 -768 L 1720 -1090 L 2095 -1090 L 2095 -768 L 1720 -768 M 1720 -1536 L 2095 -1536 L 2095 -1216 L 1720 -1216 L 1720 -1536 M 1720 -1920 L 2095 -1920 L 2095 -1661 L 1720 -1661 L 1720 -1920 M 2589 -1536 L 2589 -1216 L 2230 -1216 L 2230 -1536 L 2589 -1536'

/**
 * Adds a path to the given SVG element and give it a shape-path class.
 */
function setSvgShapePath($svg: SVGSVGElement, pathStr: string) {
  let $path = document.createElementNS(NS, 'path'); // Create SVG path elem.
  $path.setAttribute('class', 'shape-path');
  $svg.appendChild($path); // Add the path element to the SVG.
  document.body.appendChild($svg); // Add the SVG to the document body.
  $path.setAttribute('d', svgPathStr);
}

function main() {
  // Create and add and SVG element to our HTML page.
  let $svg = createSvg(1); // Create SVG element.

  setSvgShapePath($svg, svgPathStr);

  // Get loops (representing the shape) from some SVG path.
  let bezierLoops = getPathsFromStr(svgPathStr);

  // We could also just give an array of linear, quadratic or cubic beziers as
  // below (all lines in this case). Note that in the below case there is only
  // one array of beziers (forming a single loop shape).
  /*
    bezierLoops = [
        [
            [[50.000, 95.000],[92.797, 63.905]], 
            [[92.797, 63.905],[76.450, 13.594]],
            [[76.450, 13.594],[23.549, 13.594]],
            [[23.549, 13.594],[7.202,  63.90]],
            [[7.202,  63.900],[50.000, 95.000]]
        ]
    ];
    */

  // Get MATs from the loops.
  let mats = findMats(bezierLoops, 5);

  // Draw the MATs.
  drawMats(mats, $svg, 'mat');

  // Get the SAT (at scale 1.5) of the MATs (of which there is only 1)
  let sats = mats.map((mat) => toScaleAxis(mat, 1.5));

  drawMats(sats, $svg, 'sat');
}

/**
 * Returns a function that draws an array of MAT curves on an SVG element.
 * @param mats An array of MATs to draw.
 * @param svg The SVG element on which to draw.
 * @param type The type of MAT to draw. This simply affects the class on the
 * path element.
 */
function drawMats(mats: Mat[], svg: SVGSVGElement, type: 'mat' | 'sat') {
  mats.forEach(f);

  /**
   * Draws a MAT curve on an SVG element.
   */
  function f(mat: Mat) {
    let cpNode = mat.cpNode;

    if (!cpNode) {
      return;
    }

    let fs = [, , getLinePathStr, getQuadBezierPathStr, getCubicBezierPathStr];

    traverseEdges(cpNode, function (cpNode) {
      if (cpNode.isTerminating()) {
        return;
      }
      let bezier = cpNode.matCurveToNextVertex;
      if (!bezier) {
        return;
      }

      let $path = document.createElementNS(NS, 'path');
      $path.setAttributeNS(null, 'd', fs[bezier.length](bezier));
      $path.setAttributeNS(null, 'class', type);

      svg.appendChild($path);
    });
  }
}

main();

--- CODE END ---

Thank you for spending the time to create this library.

Any advisement would be appreciated.

Version: floMat 2.0.3

I am trying to findMats on complicated path with different results. I know I can try to split paths, but still would be nice to have robust tool. Code is simple:

        let bezierLoops = getPathsFromStr(path);
        let mats = findMats(bezierLoops, maxCurviness, maxLength);

1. findMats(bezierLoops, 3, 100) - This one pass, but there is one issue in calculated MAT (bezier go out of polygon). Interesting is that when I calculate just on that polygon result looks ok with same (3, 100).

2. findMats(bezierLoops) or findMats(bezierLoops, 0.5, 100) - Error

file:///C:/workspace/matcli/node_modules/flo-mat/node/mat/find-mat/find-and-add-3-prongs.js:131
        calcPosOrder(threeProng.circle, threeProng.ps[i]));
                                ^
TypeError: Cannot read properties of undefined (reading 'circle')
    at findAndAdd3Prong (file:///C:/workspace/matcli/node_modules/flo-mat/node/mat/find-mat/find-and-add-3-prongs.js:131:33)
    at findAndAdd3Prongs (file:///C:/workspace/matcli/node_modules/flo-mat/node/mat/find-mat/find-and-add-3-prongs.js:102:13)
    at findAndAddAll3Prongs (file:///C:/workspace/matcli/node_modules/flo-mat/node/mat/find-mat/find-and-add-3-prongs.js:23:21)
    at findMat (file:///C:/workspace/matcli/node_modules/flo-mat/node/find-mats.js:112:5)
    at findMats (file:///C:/workspace/matcli/node_modules/flo-mat/node/find-mats.js:43:21)

It happens because of this:

        const vectorToZeroV = calcVectorToZeroV_StraightToIt(x, circumCenter_);
        if (!Number.isFinite(vectorToZeroV[0]) || !Number.isFinite(vectorToZeroV[1])) {
            // TODO - the code can be cleaned up and sped up a lot if we don't
            // use this function as is but instead use δs[0] and δs[2] as is
            // and make δs[1] include all the rest of the beziers around the 
            // loop. This check, for instance, would be eliminated completely.
            return undefined; <-- HERE it go
        }

3. findMats(bezierLoops, 1, 50) - This takes very long time and ends JavaScript heap out of memory (I tried even 6GB)

Hi are you treating lines in svg as parametric form or bezier form .in addition to that for 2 prong circle intersection algorithm,take a case of closed loop we are starting at some point,loops are made from bezier segments, we are starting from the (x1,y1) , it intersects at (x_a,y_a) now we will store in the main_array starting point,radius and intersecting point ,after that we will move to next point and repeat the process ,but when travelling along the loop how are you sure that we will meet at the intersection point at the end to indicate the stop the algorithm in loop we may end up at(x_a+dx,y_b+dy) which is not stored the main_array , how would you find that we have reached endpoint ,if it is not there in main_array,

If can't understand my question,you can reply ,so that I will use annotations and drawing to make you to understand mam

I