September 19^th 2015

photo credit: Polyhedron models via photopin (license)

Drawing a smooth bezier line through several points

Tags: Math, svg

So as some of you might already know, I’m experimenting a bit with SVG lately. Especially the part of procedural generated SVG I find very interesting.
One aspect of drawing in SVG is generating smooth lines through several points. You can simply draw bezier curves to get smooth lines, but how do you know where to put the anchor points? In this article I’ll show you how I manage to draw a smooth bezier line to several points with basic math.

The setup

The first thing to do of course, is plot some random points on your canvas. Something like this:

lines-1442694467
Placing some random points is fairly simple, I simply used a for -loop to get the job done:

$steps = 10;
$points = array();
for ($i = 0; $i <= $steps; $i += 1) {
    $points[] = array('x' => $i * 60, 'y' => rand(0, 200));
}

$steps = 10;

$points = array();

for ($i = 0; $i <= $steps; $i += 1) {

$points[] = array('x' => $i * 60, 'y' => rand(0, 200));

}

To visualise the line we want to smooth, I also drawn some lines from point to point:

lines-1442694485

Calculate the angle of your curves

To smoothen my lines, I want to know what angle I need to set my bezier curves to. To do this, I need to calculate an imaginary line from point $X_{0},Y_{0}$ to $X_{2},Y_{2}$ and calculate it’s angle. Let’s visualise this imaginary line:

lines-1442694511
To calculate it’s angle we can simply calculate it’s normals:

// Get the direction of the line
$dirX = $points[$i + 2]['x'] - $points[$i]['x'];
$dirY = $points[$i + 2]['y'] - $points[$i]['y'];
// Get the distance of the line:
$distance = sqrt(pow($dirX, 2) + pow($dirY, 2));
// Get it's unit vector:
$unitX = $dirX / $distance;
$unitY = $dirY / $distance;
// Get it's normals:
$normal1 = array('x' => -$unitY, 'y' => $unitX);
$normal2 = array('x' => $unitY, 'y' => -$unitX);
// Finally, get the angle for the anchor points:
$angle1 = atan2($normal1['y'], $normal1['x']) + pi() / 2;
$angle2 = atan2($normal2['y'], $normal2['x']) + pi() / 2;

// Get the direction of the line

$dirX = $points[$i + 2]['x'] - $points[$i]['x'];

$dirY = $points[$i + 2]['y'] - $points[$i]['y'];

// Get the distance of the line:

$distance = sqrt(pow($dirX, 2) + pow($dirY, 2));

// Get it's unit vector:

$unitX = $dirX / $distance;

$unitY = $dirY / $distance;

// Get it's normals:

$normal1 = array('x' => -$unitY, 'y' => $unitX);

$normal2 = array('x' => $unitY, 'y' => -$unitX);

// Finally, get the angle for the anchor points:

$angle1 = atan2($normal1['y'], $normal1['x']) + pi() / 2;

$angle2 = atan2($normal2['y'], $normal2['x']) + pi() / 2;

Now we’ve got the angles we can create the anchor points. There is just one question left: Just how long should these anchor points be? To tackle this problem, I set the distance of the anchor points to a portion of the length of the imaginary line. I found that a rough estimate of 20% looks quite smooth:

$anchor1 = array(
    'x' => $points[$i + 1]['x'] + cos($angle1) * ($distance / 5),
    'y' => $points[$i + 1]['y'] + sin($angle1) * ($distance / 5)
);
$anchor2 = array(
    'x' => $points[$i + 1]['x'] + cos($angle2) * ($distance / 5),
    'y' => $points[$i + 1]['y'] + sin($angle2) * ($distance / 5)
);

$anchor1 = array(

'x' => $points[$i + 1]['x'] + cos($angle1) * ($distance / 5),

'y' => $points[$i + 1]['y'] + sin($angle1) * ($distance / 5)

);

$anchor2 = array(

'x' => $points[$i + 1]['x'] + cos($angle2) * ($distance / 5),

'y' => $points[$i + 1]['y'] + sin($angle2) * ($distance / 5)

);

So let’s have a look at our anchor points:

lines-1442694620

The result

Now we have all this precious data, the steps towards creating a smooth line that runs through all the points are simple. And to put proof by the word, here is the resulting image if I add it all up:

lines-1442694653
Needless to say: although this example is written in PHP, the Math of course applies to any other given language out there.

Visitors give this article an average rating of 4.4 out of 5.

How would you rate this article?

★ ★ ★ ★ ★

2 thoughts on “Drawing a smooth bezier line through several points”

johnny says:

April 17, 2016 at 13:53

Hi Giel

I’m trying out this example, but i don’t get it to work correctly. Would it be possible to add the whole script, that I can have a look at it and maybe debug my problem. I tried to do it in JavaScript. https://jsfiddle.net/Lg965kqc/3/

Thanks

Reply
1. fr says:
  
  July 26, 2017 at 18:48
  
  Thanks for this article, which put me on the path. I did it in javascript here: https://codepen.io/francoisromain/pen/XabdZm
  
  Reply