<p>Instead of using cubic Bezier spline, you should use <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline" rel="nofollow">cubic Hermite spline</a>. For cubic Hermite curve you specify the segment end points and tangents, which is what you then control in the tool. Hermite spline is almost the same as Bezier spline but with different $B$ matrix, so if you already understand Bezier, then understanding Hermite is a trivial step.</p>

<p>So in the Adobe Illustrator pen tool (which based on the video I take is the same as Adobe Photoshop pen tool that I have used) you keep adding more Hermite cubic spline segments to your spline. By default the Hermite start tangent matches (with opposite sign) the end tangent of the previous segment and in GUI they are linked together (changing one changes the other). So in that configuration the curve appears smooth. However, you can unlink the tangents to cause C1 discontinuity in the spline and control them separately. This is purely GUI work though and how you control the Hermite spline tangents &amp; positions.</p>

CC BY-SA 3.0
2016-10-14T14:02:15.427Z
So to clarify I create the Hermite spline and then the next spline will use the previous splines tangent as the start tangent + it will also use the previous point as the start point.
Arjan Singh
CC BY-SA 3.0
2016-10-14T14:10:55.183Z
Yes, exactly. Just the opposite sign (direction) for the start tangent just like in the AI pen tool
JarkkoL
CC BY-SA 3.0
2016-10-14T13:39:08.980Z
2016-10-14T13:39:08.980Z
JarkkoL
<p>So I have recently learned about Bezier Curves (quadratic &amp; cubic) and have a thorough knowledge of how they work. In my graphics engine in DirectX I wanted to implement a Bezier Curve Tool exactly like the Pen Tool in Adobe Illustrator. I understand the basic computation of the curve but I am puzzled as to how I can get mouse interaction involved.</p>

<p><strong>Basically I'd like to draw Bezier Curves with a Mouse.</strong></p>

<p><a href="https://i.sstatic.net/96HLA.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/96HLA.gif" alt="enter image description here"></a> </p>

CC BY-SA 3.0
2016-10-14T08:19:50.713Z
I suspect that, like myself, many of us don't have Illustrator, so you'll have to be more specific in your description. Are you just clicking to define the end points of the each curve segment and then moving the end point(s) of the tangent associated with an end point?
Simon F
CC BY-SA 3.0
2016-10-14T09:53:53.187Z
It's really hard to explain what I mean but I think if you watch this video from **2:11** to **3:00** you'll understand exactly what I'm trying to say. https://youtu.be/0B_IQK7hMo0?t=2m8s
Arjan Singh
CC BY-SA 3.0
2016-10-14T10:16:32.163Z
How your program interacts with your software depends on your GUI framework. Surely your windowing library has some tools for implementing mouse clicks. That in essesnce is not a graphics problem altough drawing pick buffers might be.
joojaa
CC BY-SA 3.0
2016-10-14T10:23:40.980Z
Detecting Mouse Clicks isn't an issue but if you watch this video you'll understand what I'm trying to say  youtu.be/0B_IQK7hMo0?t=2m8s watch from **2:11** to around **3:00**. If you notice the technique in which he draws, when he still holds his mouse down after the click he can tune the curve just by moving the mouse. That is basically what I am trying to implement...
Arjan Singh
CC BY-SA 3.0
2016-10-14T10:32:23.877Z
I might be wrong, but I think you basically just add a control point at each extremity of your "pen tool"
cmourglia
CC BY-SA 3.0
2016-10-14T13:16:54.640Z
Could you explain this with some code or pseudo code? I'm struggling to understand.
Arjan Singh
CC BY-SA 3.0
2016-10-14T14:50:38.847Z
Its just drawing out the tangent of the next spline segment the previous segment just inherits the inverse vector magnitude tangent. A bit like jarkkoL's answer but no need to do hermite. Yes i use illustrator all the time.
joojaa
<opengl><glsl><line-drawing><vector-graphics><bezier-curve>
Bezier Curve Tool Controlled by Mouse
Arjan Singh
# Bezier Curve Tool Controlled by Mouse

(Asked by: username_0 on 2016-10-14)

So I have recently learned about Bezier Curves (quadratic & cubic) and have a thorough knowledge of how they work. In my graphics engine in DirectX I wanted to implement a Bezier Curve Tool exactly like the Pen Tool in Adobe Illustrator. I understand the basic computation of the curve but I am puzzled as to how I can get mouse interaction involved.

**Basically I'd like to draw Bezier Curves with a Mouse.**

[![enter image description here](https://i.sstatic.net/96HLA.gif)](https://i.sstatic.net/96HLA.gif)

**Tags:** opengl, glsl, line-drawing, vector-graphics, bezier-curve

> **Comments:**
> **username_1**: I suspect that, like myself, many of us don't have Illustrator, so you'll have to be more specific in your description. Are you just clicking to define the end points of the each curve segment and then moving the end point(s) of the tangent associated with an end point?  
> **username_0**: It's really hard to explain what I mean but I think if you watch this video from **2:11** to **3:00** you'll understand exactly what I'm trying to say. https://youtu.be/0B_IQK7hMo0?t=2m8s  
> **username_2**: How your program interacts with your software depends on your GUI framework. Surely your windowing library has some tools for implementing mouse clicks. That in essesnce is not a graphics problem altough drawing pick buffers might be.  
> **username_0**: Detecting Mouse Clicks isn't an issue but if you watch this video you'll understand what I'm trying to say  youtu.be/0B_IQK7hMo0?t=2m8s watch from **2:11** to around **3:00**. If you notice the technique in which he draws, when he still holds his mouse down after the click he can tune the curve just by moving the mouse. That is basically what I am trying to implement...  
> **username_3**: I might be wrong, but I think you basically just add a control point at each extremity of your "pen tool"  
> **username_0**: Could you explain this with some code or pseudo code? I'm struggling to understand.  
> **username_2**: Its just drawing out the tangent of the next spline segment the previous segment just inherits the inverse vector magnitude tangent. A bit like jarkkoL's answer but no need to do hermite. Yes i use illustrator all the time.  

---

## 1 answers

### Answer by username_4 on 2016-10-14. Score: 4 | Accepted answer

Instead of using cubic Bezier spline, you should use [cubic Hermite spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline). For cubic Hermite curve you specify the segment end points and tangents, which is what you then control in the tool. Hermite spline is almost the same as Bezier spline but with different $B$ matrix, so if you already understand Bezier, then understanding Hermite is a trivial step.

So in the Adobe Illustrator pen tool (which based on the video I take is the same as Adobe Photoshop pen tool that I have used) you keep adding more Hermite cubic spline segments to your spline. By default the Hermite start tangent matches (with opposite sign) the end tangent of the previous segment and in GUI they are linked together (changing one changes the other). So in that configuration the curve appears smooth. However, you can unlink the tangents to cause C1 discontinuity in the spline and control them separately. This is purely GUI work though and how you control the Hermite spline tangents & positions.

> **Comments:**
> **username_0**: So to clarify I create the Hermite spline and then the next spline will use the previous splines tangent as the start tangent + it will also use the previous point as the start point.  
> **username_4**: Yes, exactly. Just the opposite sign (direction) for the start tangent just like in the AI pen tool  

---

