<p>I realized this would be better phrased as &quot;how to split a bezier curve&quot;, answered well <a href="https://stackoverflow.com/a/36434774/362702">here</a> (De Casteljau's Algorithm).</p>
<p>And I had somehow missed that it's implemented in paper.js as <a href="http://paperjs.org/reference/path/#divideat-location" rel="nofollow noreferrer">Path.divideAt</a></p>

CC BY-SA 4.0
2022-12-10T15:47:41.057Z
2022-12-10T15:47:41.057Z
Rick Mohr
<p>I'm using <a href="http://paperjs.org/reference/path/" rel="nofollow noreferrer">paper.js</a> and need to add a point to a curved path without affecting the path's shape. Inkscape's &quot;Edit paths by nodes&quot; tool has this feature by default -- double-clicking on a path adds a node, adjusting the handles of the new node and adjacent nodes to preserve the path shape. What appears to be <a href="https://gitlab.com/inkscape/inkscape/-/blob/master/src/ui/tool/node.cpp#L940" rel="nofollow noreferrer">the code</a> says &quot;Handle lengths are equal to 1/3 of the distance from the adjacent node.&quot; I haven't managed to find the code which updates the handles of the adjacent nodes, but observing the behavior in Inkscape they appear to shrink to an amount proportional to the (along-path) distance to the new node.</p>
<p>Coding this up, it works well on <a href="http://sketch.paperjs.org/#V/0.12.17/S/pVNNb9swDP0rhC92CkdJW+ySIAOGYocBwxaguzU9qDIdC1GoQKKTFkH++yR/pUk3YMB8I/ne46NFHhOSW0xmyeMGWVVJnihbxHiv8SDYSfJGMmZNqJAY3Wi+ohWVNSnWlkAWxePWWq6WVhNnxioZ8yM4rgjCpyx5Bpa0DmxYgBJr5F9t+IWz2+k0Cp6Rmgp8DbheSKja7VF4XG8D40409QtGV2q0NXl0nDWgfNDoO7xnFQHfMQXhK4uhoS1LjwzjobxzuNe29teQCxfFMqDeaf6v3I/g6d8tfpRqxfp6Jakw+I2CYv8UNzBuPU/gfv4n9M+aL+CtpTP6kjNMdSbfLKDvUFx1aMYZTEVgJ94DHXLtqMeH5CmO1P4bFWwRHmApuRIP2imDWbdtTha69jO4m07zriM7u8EHa6ybQfpipNqkoXSKOzGZDBtzm8PT+D6wYBxW8nkkfLPU2RH4bYeBuUa7RXZapTmUUnGUE5/g1J6DEspYwmwkSm1M0y2YTN/QGHtI5xHQjeJFad1XqarMw+Iz+JA3qBjjPrKrsdNrBu1ftT+b7118vpvrC/jbNV53CdRw6y8O5WYXkT6ZPT2ffgM=" rel="nofollow noreferrer">a circle</a> but isn't quite right for <a href="http://sketch.paperjs.org/#V/0.12.17/S/pVNLa+MwEP4rgy92iqNNW/aSksJSeiiUbqB7a3pQ5XEsooyCNE5aQv77yvIjTXYXFuqbNN9rrJl9QnKNyTR5XiGrKskTZYvmvNW4E+wkeSMZs3hUSIxudLOgBZU1KdaWQBbF89paruZWE2fGKtncj2C/IAifsuQZWNIysGEGSiyRf7XHH5xdTiaN4BGpqcD3gOuFhKrdFoXH5TowrkSsnzC6UtTW5NFxFkH5oNE7fGYVAd8xBeE7i8HQlqVHhvFQ3jjcalv7c8hJimIeUJ80vyr3FDL9f8Q/pVqxvl5JKgw+UFDsn+ICxm3mb3B98zf0z5pP4G2kI/qUM3R1JF/MoHcozhxiO0OoBtiJ90CHXDvq8eHy0LTU/hsVYhHuYC65EnfaKYNZN21OFrr2U7iaTPLOkZ1d4Z011k0hfTNSrdJQOjQzMczLZQ4v4+vAgXEYyNeR8HGksz3wxwYDb4l2jey0SnMopeJGTHyHQ7sMSihjCbORKLUx0StETD/QGLtLo1HXiBeldfdSVZmH2S34cG9QMTbTyK7GTi+22b9pvzSP3fm4Nefz/69dPHcJ1LDpbw7latMgfTJ9eT38Bg==" rel="nofollow noreferrer">a less regular shape</a>.</p>
<p>Any suggestions for making it work as reliably as Inkscape?</p>

<bezier-curve>
Algorithm to add a path point, preserving path shape?
Rick Mohr
# Algorithm to add a path point, preserving path shape?

(Asked by: username_0 on 2022-12-09)

I'm using [paper.js](http://paperjs.org/reference/path/) and need to add a point to a curved path without affecting the path's shape. Inkscape's "Edit paths by nodes" tool has this feature by default -- double-clicking on a path adds a node, adjusting the handles of the new node and adjacent nodes to preserve the path shape. What appears to be [the code](https://gitlab.com/inkscape/inkscape/-/blob/master/src/ui/tool/node.cpp#L940) says "Handle lengths are equal to 1/3 of the distance from the adjacent node." I haven't managed to find the code which updates the handles of the adjacent nodes, but observing the behavior in Inkscape they appear to shrink to an amount proportional to the (along-path) distance to the new node.

Coding this up, it works well on [a circle](http://sketch.paperjs.org/#V/0.12.17/S/pVNNb9swDP0rhC92CkdJW+ySIAOGYocBwxaguzU9qDIdC1GoQKKTFkH++yR/pUk3YMB8I/ne46NFHhOSW0xmyeMGWVVJnihbxHiv8SDYSfJGMmZNqJAY3Wi+ohWVNSnWlkAWxePWWq6WVhNnxioZ8yM4rgjCpyx5Bpa0DmxYgBJr5F9t+IWz2+k0Cp6Rmgp8DbheSKja7VF4XG8D40409QtGV2q0NXl0nDWgfNDoO7xnFQHfMQXhK4uhoS1LjwzjobxzuNe29teQCxfFMqDeaf6v3I/g6d8tfpRqxfp6Jakw+I2CYv8UNzBuPU/gfv4n9M+aL+CtpTP6kjNMdSbfLKDvUFx1aMYZTEVgJ94DHXLtqMeH5CmO1P4bFWwRHmApuRIP2imDWbdtTha69jO4m07zriM7u8EHa6ybQfpipNqkoXSKOzGZDBtzm8PT+D6wYBxW8nkkfLPU2RH4bYeBuUa7RXZapTmUUnGUE5/g1J6DEspYwmwkSm1M0y2YTN/QGHtI5xHQjeJFad1XqarMw+Iz+JA3qBjjPrKrsdNrBu1ftT+b7118vpvrC/jbNV53CdRw6y8O5WYXkT6ZPT2ffgM=) but isn't quite right for [a less regular shape](http://sketch.paperjs.org/#V/0.12.17/S/pVNLa+MwEP4rgy92iqNNW/aSksJSeiiUbqB7a3pQ5XEsooyCNE5aQv77yvIjTXYXFuqbNN9rrJl9QnKNyTR5XiGrKskTZYvmvNW4E+wkeSMZs3hUSIxudLOgBZU1KdaWQBbF89paruZWE2fGKtncj2C/IAifsuQZWNIysGEGSiyRf7XHH5xdTiaN4BGpqcD3gOuFhKrdFoXH5TowrkSsnzC6UtTW5NFxFkH5oNE7fGYVAd8xBeE7i8HQlqVHhvFQ3jjcalv7c8hJimIeUJ80vyr3FDL9f8Q/pVqxvl5JKgw+UFDsn+ICxm3mb3B98zf0z5pP4G2kI/qUM3R1JF/MoHcozhxiO0OoBtiJ90CHXDvq8eHy0LTU/hsVYhHuYC65EnfaKYNZN21OFrr2U7iaTPLOkZ1d4Z011k0hfTNSrdJQOjQzMczLZQ4v4+vAgXEYyNeR8HGksz3wxwYDb4l2jey0SnMopeJGTHyHQ7sMSihjCbORKLUx0StETD/QGLtLo1HXiBeldfdSVZmH2S34cG9QMTbTyK7GTi+22b9pvzSP3fm4Nefz/69dPHcJ1LDpbw7latMgfTJ9eT38Bg==).

Any suggestions for making it work as reliably as Inkscape?

**Tags:** bezier-curve


---

## 1 answers

### Answer by username_0 on 2022-12-10. Score: 2

I realized this would be better phrased as "how to split a bezier curve", answered well [here](https://stackoverflow.com/a/36434774/362702) (De Casteljau's Algorithm).

And I had somehow missed that it's implemented in paper.js as [Path.divideAt](http://paperjs.org/reference/path/#divideat-location)


---

