Dmitry Baranovskiy

Representing the Sine Curve as Cubic Bézier 18·MAR·23

Sine function is this particular curve that you clearly remember since high school. It has plethora of interesting properties.

The Problem

The sine curve has a close connection to reality and yet it is very hard to draw in any type of the graphics software. Did I say “hard”? It is close to impossible. Most of the time you have to use some plotting software and export the curve from there. The worst part is that even for a coder it is not completely clear how to draw a sine function accurately without turning to polyline approximation.

So, first question: can sine (or cosine) curve be represented as a cubic Bézier. The answer is “yes”. At least, it can be very well approximated. In fact there are (at least) three different ways to represent segments of a sine function.

Segments

I assume there are many different ways to split the sine curve into segments, but for drawing purposes, it seems, there are three ways to draw a curve with cubic Bézier.

01

Max to Min

The curve is going from the top of the wave to the bottom of the next wave.

TLDR

The points will be:

$$p_1(0,1), p_2(\pi-2,1), p_3(2,-1), p_4(\pi,-1).$$

Four points that define the curve should have following coordinates: \(p_1(0,1), p_2(x,1), p_3(\pi-x,-1), p_4(\pi,-1)\). To find \(x\) we will try to find that first derivative of the cubic curve and cosine in the middle of the segment should be the same, namely \(-1\). First derivative of the curve looks like this:

$$3(3p_2-3p_3-p_1+p_4)t^2+6(p_1-2p_2+p_3)t+3(p_2-p_1) $$

Substitute our values for x component and we will get:

$$\begin{align*} x'\left(\frac{1}{2}\right)=&\frac{3}{4}(3x-3(\pi-x)+\pi)+3(-2x+\pi-x)+3x\\ x'\left(\frac{1}{2}\right)=&\frac{3}{4}(3x-3\pi+3x+\pi)+3\pi-9x+3x\\ x'\left(\frac{1}{2}\right)=&4.5x+1.5\pi-6x\\ x'\left(\frac{1}{2}\right)=&\frac{3}{2}(\pi-x) \end{align*}$$

For y component things are easier:

\[ y'\left(\frac{1}{2}\right)=\frac{3}{4}(3+3-1-1)+3(1-2-1)+3(1-1)=-3 \]

Putting it all together:

$$\begin{align*} \frac{y'\left(\frac{1}{2}\right)}{x'\left(\frac{1}{2}\right)}&=\cos'\left(\frac{\pi}{2}\right)\\ \frac{-3}{\frac{3}{2}(\pi-x)}&=-1\\ \pi-x&=2\\ x&=\pi-2 \end{align*}$$

Therefore, final points coordinates are:

$$p_1(0,1),\,p_2(\pi-2,1),\,p_3(2,-1),\,p_4(\pi,-1).$$
02

Max to Zero

This is the half of the previous curve, meaning it is going from top to the x axis.

TLDR

The final points are:

$$p_1(0,1),\,p_2\left(\frac{\pi-2}{2},1\right),\, p_3\left(\frac{3\pi^{2}+4}{8}-\pi,\frac{12\pi-3\pi^2-4}{8}\right),\, p_4\left(\frac{\pi}{2},0\right).$$

If we want to figure out cubic curve that represents quarter of the wave, we could lean on second derivative. At the \(x=0\) second derivative of the \(\cos x\) is equal to \(-1\). Second derivative of the cubic curve would be:

$$\left(\frac{y'(t)}{x'(t)}\right)'=\frac{y''(t)x'(t)-x''(t)y'(t)}{(x'(t))^3}$$

Lets define \(z=\frac{\pi-2}{2}\). Our points then, have following coordinates:

$$p_1(0,1),\,p_2(z,1),\,p_3\left(\frac{\pi}{2}-x,x\right),\, p_4\left(\frac{\pi}{2},0\right).$$

When \(t=0\) formula gets simpler:

$$\begin{align*} x'(0)=&3z\\ y'(0)=&0\\ y''(0)=&6(x-1)\\ \frac{6(x-1)}{9z^2}=&-1\\ x=&1-\frac{3}{2}z^2 \end{align*}$$

Therefore, final points’ coordinates are:

$$p_1(0,1),\,p_2\left(z,1\right),\, p_3\left(\frac{\pi}{2}-1+\frac{3}{2}z^2,1-\frac{3}{2}z^2\right),\, p_4\left(\frac{\pi}{2},0\right)$$

or

$$p_1(0,1), \,p_2\left(\frac{\pi-2}{2},1\right),\, p_3\left(\frac{\pi}{2}-1+\frac{3}{2}\left(\frac{\pi-2}{2}\right)^2,1-\frac{3}{2}\left(\frac{\pi-2}{2}\right)^2\right),\, p_4\left(\frac{\pi}{2},0\right)$$

or

$$p_1(0,1),\,p_2\left(\frac{\pi-2}{2},1\right),\, p_3\left(\frac{3\pi^{2}+4}{8}-\pi,\frac{12\pi-3\pi^2-4}{8}\right),\, p_4\left(\frac{\pi}{2},0\right).$$
03

Zero to Zero

This variation was not very useful for my cases, but may be it will be for others. All the credit goes to StackExchange user Paul, who did a great explanatory post of the way to finding this curve. Read it on Math.StackExchange.

Approximation of the whole wavelength.

For this case we need to define two help variables:

$$ \begin{align*} v=&\,2\sqrt{3}\approx3.464\\ u=&\,\pi\left(\frac{3}{8}-\sqrt{3}\right)\approx-4.2633 \end{align*} $$

Then final points will look like this:

$$p_1(0,0),\;p_2(u,-v),\;p_3(2\pi-u,v),\;p_4(2\pi,0).$$

That is All

I hope that now you can draw a wave with cubic Bézier if you need to. May be one day anyone would be able to draw any curve without knowledge of Calculus. :)