I've been beginning to work with different kinds of splines (e.g. Bezier, Hermite, B-splines) in some of my work with computer graphics and I am trying to get a grasp of how they work (mathematically and programmatically). I know that generally (at least for cubic splines), you will have 4 control points that influence the position of points along an interpolated line. For example, with Bezier curves (as far as I understand), there can be two end points where the line will begin and terminate and two control points that influence the direction of the line.

I've been programming Bezier, Hermite, and B-Splines (in javascript on an html5 canvas) and what I don't understand is how to choose these 4 points in order to see a specific curve rendered on the screen. So far, I have only been able to render at least part of a curve by randomly playing around with different numbers for each point.

This is one of the many questions I have about the inner workings of splines so could someone provide an overview on how they work and how they can be programmed (most of the examples online are more theoretical and rather unspecific)?

  • 1
    \$\begingroup\$ The Wikipedia article on Bézier curves has great animated diagrams illustrating how they're formed (check the section "Constructing Bézier Curves"). In general for splines, the first and last points are the endpoints of the spline, and the line from each endpoint to the control point before/after it defines the tangent at that endpoint (ie. Which way the spline is sloping when it reaches that point) \$\endgroup\$
    – DMGregory
    Commented Nov 11, 2015 at 14:17

1 Answer 1


A coder's guide to spline-based procedural geometry is a video from Unity event Unite 2015.

In the video, the presenter gives visual explanation of how splines can be created and modified. Then, he goes on to give code examples for the same. Very informative.

The video is for Unity3D, but the algorithms presented can be adapted to any platform.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .