{"id":26,"date":"2014-10-13T08:47:13","date_gmt":"2014-10-13T12:47:13","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics\/?p=26"},"modified":"2014-10-13T08:57:08","modified_gmt":"2014-10-13T12:57:08","slug":"bezier-curves","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics\/2014\/10\/13\/bezier-curves\/","title":{"rendered":"B\u00e9zier Curves"},"content":{"rendered":"

Bézier Curves and Kronecker's Tensor Product<\/h3>

Last time we talked about Martin Newell's famous teapot. Today we're going to talk about the curves which the teapot is made of. These are known as Bézier curves<\/a>. These are extremely useful curves, and you'll encounter them in lots of different places in computer graphics.<\/p>

Let's look at how to draw a Bézier curve. We'll start by drawing a line the hard way. We'll start with these two points.<\/p>

pt1 = [ 5;-10];\r\npt2 = [45; 15];\r\n<\/pre>
We'll use this simple function to label the points.<\/p>
type placelabel<\/span>\r\n<\/pre>
\r\nfunction placelabel(pt,str)\r\n    x = pt(1);\r\n    y = pt(2);\r\n    h = line(x,y);\r\n    h.Marker = '.';\r\n    h = text(x,y,str);\r\n    h.HorizontalAlignment = 'center';\r\n    h.VerticalAlignment = 'bottom';\r\n    \r\n<\/pre>
And we'll use 'axis equal' to make the scaling uniform in the X & Y directions.<\/p>
placelabel(pt1,'pt_1'<\/span>);\r\nplacelabel(pt2,'pt_2'<\/span>);\r\nxlim([0 50])\r\naxis equal<\/span>\r\n<\/pre>\"\" 
Now we want to draw the line segment between them. We can think of this line as being a linear combination of the two points.<\/p>
$$0<=t<=1$$<\/p>
$$pt(t) = (1-t)*pt_1 + t*pt_2$$<\/p>
When $t$ is equal to 0, we get:<\/p>
$$pt(0) = (1-0)*pt_1 + 0*pt_2$$<\/p>
which is equal to $pt1$. When $t$ is equal to 1, we get:<\/p>
$$pt(1) = (1-1)*pt_1 + 1*pt_2$$<\/p>
which is equal to $pt2$. When $t$ is equal to 1\/2, we get:<\/p>
$$pt(1\/2) = (1-1\/2)*pt_1 + 1\/2*pt_2$$<\/p>
which is the midpoint of the line segment. And indeed, for any value of $t$ between 0 and 1, we get a point on the line.<\/p>
There are a couple of ways to implement this in MATLAB, but we'll do it the following way. The kron<\/a> function will give us the Kronecker tensor product<\/a> of two arrays. This means that it will give us all of the possible products of the elements in those two arrays. So, for example, if we create an array of t values like this:<\/p>
t = linspace(0,1,101);\r\n<\/pre>
We can use kron to multiply all of them by the two coordinate values in each point like this:<\/p>
pts = kron((1-t),pt1) + kron(t,pt2);\r\n<\/pre>
And then we can plot them.<\/p>
hold on<\/span>\r\nplot(pts(1,:),pts(2,:))\r\nhold off<\/span>\r\n<\/pre>\"\" 
and voila! We have drawn the line between the points.<\/p>
So why do we want to do this? Wouldn't it be easier to just use the line command?<\/p>
cla\r\nline([pt1(1), pt2(1)],[pt1(2), pt2(2)])\r\n<\/pre>\"\" 
The reason is that we're going to expand this to more points and higher-order functions of $t$.  Instead of linear combinations of two points, we're going to create higher-order combinations of three or four points.<\/p>
We'll start with the quadratic Bézier curve. This curve takes three points.<\/p>
pt1 = [ 5;-10];\r\npt2 = [18; 18];\r\npt3 = [45; 15];\r\n\r\ncla\r\nplacelabel(pt1,'pt_1'<\/span>);\r\nplacelabel(pt2,'pt_2'<\/span>);\r\nplacelabel(pt3,'pt_3'<\/span>);\r\nxlim([0 50])\r\naxis equal<\/span>\r\n<\/pre>\"\" 
And we've still got $t$ going from 0 to 1, but we'll use second-order polynomials like this:<\/p>
$$pt(t) = (1-t)^2*pt_1 + 2 (1-t) t*pt_2 + t^2*pt_3$$<\/p>
These are known as the Bernstein basis polynomials<\/a>.<\/p>
We can use the kron function to evaluate them, just as we did in the linear case.<\/p>
pts = kron((1-t).^2,pt1) + kron(2*(1-t).*t,pt2) + kron(t.^2,pt3);\r\n\r\nhold on<\/span>\r\nplot(pts(1,:),pts(2,:))\r\nhold off<\/span>\r\n<\/pre>\"\" 
Notice that the resulting curve starts at $pt1$ and ends at $pt3$. In between, it moves towards, but doesn't reach, $pt2$.<\/p>
Next we can go up to the cubic Bézier. This is the one which the teapot uses. We'll need 4 points ...<\/p>
pt1 = [ 5;-10];\r\npt2 = [18; 18];\r\npt3 = [38; -5];\r\npt4 = [45; 15];\r\n\r\ncla\r\nplacelabel(pt1,'pt_1'<\/span>);\r\nplacelabel(pt2,'pt_2'<\/span>);\r\nplacelabel(pt3,'pt_3'<\/span>);\r\nplacelabel(pt4,'pt_4'<\/span>);\r\nxlim([0 50])\r\naxis equal<\/span>\r\n<\/pre>\"\" 
... and the following third-order equation:<\/p>
$$pt(t) = (1-t)^3*pt_1 + 3 (1-t)^2 t*pt_2 + 3 (1-t) t^2*pt_3 + t^3*pt_4$$<\/p>
pts = kron((1-t).^3,pt1) + kron(3*(1-t).^2.*t,pt2) + kron(3*(1-t).*t.^2,pt3) + kron(t.^3,pt4);\r\n\r\nhold on<\/span>\r\nplot(pts(1,:),pts(2,:))\r\nhold off<\/span>\r\n<\/pre>\"\" 
Again we can see that the curve starts at the first point and ends at the last point, while moving towards each intermediate point in turn.<\/p>
Also, notice the pattern of the coefficients of the polynomials in these three examples.<\/p>