1

I am struggling to convert an SVG curve, C into a set of straight lines in Python

Syntax is C x1 y1, x2 y2, x y

Here is an example of what line should I get instead of the curve https://svg-path-visualizer.netlify.app/#M%2010%2010%20C%2020%2020%2C%2040%2020%2C%2050%2010%20M%2010%2010%20L%2020%2017%20L%2040%2017%20L%2050%2010

How to approximate the svg curve with a given set of lines?

fotole4473
  • 33
  • 5
  • 1
    Does this answer your question? [Deconstruct Bezier Curve into Line Segments with Equally Spaced Slopes](https://stackoverflow.com/questions/32162841/deconstruct-bezier-curve-into-line-segments-with-equally-spaced-slopes) – Peter O. Jun 10 '21 at 12:02
  • 1
    Also see https://pomax.github.io/bezierinfo/#flattening for the simple version, and https://pomax.github.io/bezierinfo/#tracing for the much harder "all segments are the same length" version. (note each graphic having a "view source" links, which you can easily port to whatever programming language you're working with) – Mike 'Pomax' Kamermans Jun 10 '21 at 16:42

2 Answers2

2

get_cubic_bezier_point returns a point on a Cubic Bezier curve, where t is a curve parameter (0 to 1) and p is a list of 4 curve points:

import numpy as np

def get_cubic_bezier_point(t, p):
  multipliers = [
    t * t * t,
    3 * t * t * (1 - t),
    3 * t * (1 - t) * (1 - t),
    (1 - t) * (1 - t) * (1 - t)
  ]
  x = 0
  y = 0
  for index in range(4):
    x += p[index][0] * multipliers[index]
    y += p[index][1] * multipliers[index]
  return [x,y]

points = [
    [10, 10],
    [100, 250],
    [150, -100],
    [220, 140],
]  

for t in np.arange(0, 1, 0.1):
  point = get_cubic_bezier_point(t, points)
  print(point)

Here is a JS snippet to illustrate a CB:

const points = [
    {x: 10, y: 10},
    {x: 100, y: 250},
    {x: 150, y: -100},
    {x: 220, y: 140}
];

const fp = i => `${points[i].x},${points[i].y}`;

d3.select('path').attr('d', `M ${fp(0)} C ${fp(1)} ${fp(2)} ${fp(3)}`);

const findCBPoint = t => {
    const multipliers = [
    t * t * t,
    3 * t * t * (1 - t),
    3 * t * (1 - t) * (1 - t),
    (1 - t) * (1 - t) * (1 - t)
  ]
  return multipliers.reduce((s, m, i) => ({
    x: s.x + points[i].x * m, 
    y: s.y + points[i].y * m
    }), {x: 0, y: 0});
}

for (let t = 0; t <= 1; t += 0.1) {
  const p = findCBPoint(t);
  console.log(p);
  d3.select('svg').append('circle')
    .attr('cx', p.x).attr('cy', p.y).attr('r', 3);
}
path {
  stroke: red;
  fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <path/>
</svg>
Michael Rovinsky
  • 6,807
  • 7
  • 15
  • 30
  • 1
    remember that if you want to start at the first point, instead of the last point, your function needs to go from (1-t)³ to t³, not the other way around. – Mike 'Pomax' Kamermans Jun 10 '21 at 16:45
0

I think that this should do:

function differ(no1, no2, no3,amount) {
    return no1 + ((no2 - no1) * no3 / amount);
}
function linePointOnBezier(p1,p2,p3,p4,noOfLines) {
    var t = 0;
    var points = [];
    for(var t = 0; t <= noOfLines; t++) {
        var l2 = { //layer 2
            p1: {
                x: differ(p1.x, p2.x, t, noOfLines),
                y: differ(p1.y, p2.y, t, noOfLines),
            },
            p2: {
                x: differ(p2.x, p3.x, t, noOfLines),
                y: differ(p2.y, p3.y, t, noOfLines),
            },
            p3: {
                x: differ(p3.x, p4.x, t, noOfLines),
                y: differ(p3.y, p4.y, t, noOfLines),
            },
        };
        var l3 = { //layer 3
            p1: {
                x: differ(l2.p1.x, l2.p2.x, t, noOfLines),
                y: differ(l2.p1.y, l2.p2.y, t, noOfLines),
            },
            p2: {
                x: differ(l2.p2.x, l2.p3.x, t, noOfLines),
                y: differ(l2.p2.y, l2.p3.y, t, noOfLines),
            },
        };
        var point = [
            differ(l3.p1.x, l3.p2.x, t, noOfLines), 
            differ(l3.p1.y, l3.p2.y, t, noOfLines),
        ];
        points.push(point);
    }
    return points;
}

example