Javascript 如何将此SVG三角形转换为“三角形”；“流浪”；路径表示法？

请原谅我对几何/数学术语不熟悉。图片可以更好地描述我想要实现的目标：

我想取一个三角形，比如左边的那个，然后从它生成一条路径，比如右边的那个。每个三角形都会附带一个亮度值，该值可用于确定着色线的频率

路径上的前两个点应代表三角形的一侧，但最后一个点不一定要落在三角形的第三个点上（尽可能靠近）

我正试图用javascript实现这一点，但特定于框架或库的解决方案并不重要。我希望有人能给我指点一些想法/概念，帮助我摸索几何和设计算法

---

谢谢，这是一个有趣的练习。下面是我使用纯Javascript的解决方案

基本上我们计算两条直线方程（A->C和B->C）。然后将它们分成适当数量的步骤。然后，沿着这两条线来回画一条多段线

// 'pts' is a 3x2 array ([3][2]) for the three triangle points
// 'step' is the approximate step distance between lines
function makeTriangle(pts, step)
{
    var  ax = pts[0][0];
    var  ay = pts[0][1];
    var  bx = pts[1][0];
    var  by = pts[1][1];
    var  cx = pts[2][0];
    var  cy = pts[2][1];

    // Get AC line length
    var  a_dx = cx - ax,
         a_dy = cy - ay;
    var  ac_len = Math.sqrt(a_dx * a_dx + a_dy * a_dy);
    // Get BC line length
    var  b_dx = cx - bx,
         b_dy = cy - by;
    bc_len = Math.sqrt(b_dx * b_dx + b_dy * b_dy);

    // Whichever line is shortest will determine the number of steps
    var  len = (ac_len < bc_len) ? ac_len : bc_len;

    // ac step amounts
    a_dx = step * a_dx / len;
    a_dy = step * a_dy / len;

    // bc step amounts
    b_dx = step * b_dx / len;
    b_dy = step * b_dy / len;

    var  poly = [];
     // first two points
    poly.push(ax);
    poly.push(ay);
    poly.push(bx);
    poly.push(by);
    while (len > step) {
        // step along the ac and bc lines
        ax += a_dx;
        ay += a_dy;
        bx += b_dx;
        by += b_dy;
        // add the line going from the bc line to the ac line
        poly.push(bx);
        poly.push(by);
        poly.push(ax);
        poly.push(ay);
        len -= step;
        if (len < step) break;
        // step again
        ax += a_dx;
        ay += a_dy;
        bx += b_dx;
        by += b_dy;
        // add line going back again
        poly.push(ax);
        poly.push(ay);
        poly.push(bx);
        poly.push(by);
        len -= step;
    }
    poly.push(cx);
    poly.push(cy);

    // Now we have all our points, build the SVG element
    var  svg = document.getElementById("mysvg");

    var  tri = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    tri.setAttribute("fill", "none");
    tri.setAttribute("stroke", "black");
    tri.setAttribute("stroke-width", 4);
    tri.setAttribute("points", poly.join(","));
    svg.appendChild(tri);
}


makeTriangle([[117,0],[255,159],[2,279]], 15);

/“pts”是三个三角形点的3x2数组（[3][2]）
//“步长”是线之间的近似步长距离
函数makeTriangle（pts，step）
{
var ax=pts[0][0]；
var ay=pts[0][1]；
var bx=pts[1][0]；
var by=pts[1][1]；
var cx=pts[2][0]；
var-cy=pts[2][1]；
//获取交流线路长度
变量a_dx=cx-ax，
a_dy=cy-ay；
var ac_len=Math.sqrt（a_dx*a_dx+a_dy*a_dy）；
//获取BC行长度
var b_dx=cx-bx，
b_dy=cy-by；
bc_len=Math.sqrt（b_dx*b_dx+b_dy*b_dy）；
//哪一行最短将决定步数
变量len=（ac_lenstep）{
//沿着ac和bc线走
ax+=a_dx；
ay+=a_-dy；
bx+=b_-dx；
by+=b_-dy；
//添加从bc线到ac线的线路
聚推（bx）；
聚推；
聚推力（ax）；
聚推（ay）；
len-=阶跃；
如果（透镜<步进）断裂；
//再走一步
ax+=a_dx；
ay+=a_-dy；
bx+=b_-dx；
by+=b_-dy；
//再加一行往回走
聚推力（ax）；
聚推（ay）；
聚推（bx）；
聚推；
len-=阶跃；
}
聚推力（cx）；
聚推力；
//现在我们有了所有要点，构建SVG元素
var svg=document.getElementById（“mysvg”）；
var tri=document.createElements（“http://www.w3.org/2000/svg“，“多段线”）；
三、设置属性（“填充”、“无”）；
三、设置属性（“笔划”、“黑色”）；
设置属性（“笔划宽度”，4）；
设置属性（“点”，多边形连接（“，”）；
svg.appendChild（tri）；
}
makeTriangle（[117,0]，[255159]，[2279]，[15]；

---

真是太棒了。多谢各位