Interpolation with Bezier Curves
A very simple method of smoothing polygons

Initially, there was a question in comp.graphic.algorithms how to interpolate a polygon with a curve in such a way that the resulting curve would be smooth and hit all its vertices. Gernot Hoffmann suggested to use a well-known  B-Spline  interpolation. Here is his original article. B-Spline  works good and it behaves like an elastic ruler fixed in the polygon vertices.



But I had a gut feeling that there must be a simpler method. For example, approximation with cubic Bezier curves. A Bezier curve has two anchor points (begin and end) and two control ones (CP) that determine its shape. More information about Bezier curves can be found using any search engine, for example, on Paul Bourke's excellent site. Our anchor points are given, they are pair of vertices of the polygon. The question was, how to calculate the control points. I ran  Xara X and drew this picture. It was pretty easy and I decided to try to calculate their coordinates. It was obvious that the control points of two adjacent edges plus the vertex between them should form one straight line. Only in this case the two adjacent curves will be connected smoothly. So, the two CP should be the a reflection of each other, but… not quite. Reflection assumes equal distances from the central point. For our case it's not correct. First, I tried to calculate a bisectrix between two edges and then take points on the perpendicular to it. But as shown in the picture, the CP not always lie on the perpendicular to thebisectrix.


Finally, I found a very simple method that does not require any complicated math. First, we take the polygon and calculate the middle points Ai of its edges.


Here we have line segments Ci that connect two points Aiof the adjacent segments. Then, we should calculate points Bi as shown in this picture.


The third step is final. We simply move the line segments Ci in such a way that their points Bicoincide with the respective vertices. That's it, we calculated the control points for our Bezier curve and the result looks good.


One little improvement. Since we have a straight line that determines the place of our control points, we can move them as we want, changing the shape of the resulting curve. I used a simple coefficient K that moves the points along the line relatively to the initial distance between vertices and control points. The closer the control points to the vertices are the sharper figure will be obtained.


Below is the result of rendering a popular in SVG lion in its original form and with Bezier interpolation with K=1.0



And the enlarged ones.



The method works quite well with self-intersecting polygons. The examples below show that the result is pretty interesting.




This method is pure heuristic and empiric. It probably gives a wrong result from the point of view of strict mathematical modeling. But in practice the result is good enough and it requires absolute minimum of calculations. Below is the source code that has been used to generate the lions shown above. It's not optimal and just an illustration. It calculates some variables twice, while in real programs we can store and reuse them in the consecutive steps.

    // Assume we need to calculate the control
    // points between (x1,y1) and (x2,y2).
    // Then x0,y0 - the previous vertex,
    //      x3,y3 - the next one.

    double xc1 = (x0 + x1) / 2.0;
    double yc1 = (y0 + y1) / 2.0;
    double xc2 = (x1 + x2) / 2.0;
    double yc2 = (y1 + y2) / 2.0;
    double xc3 = (x2 + x3) / 2.0;
    double yc3 = (y2 + y3) / 2.0;

    double len1 = sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
    double len2 = sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
    double len3 = sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));

    double k1 = len1 / (len1 + len2);
    double k2 = len2 / (len2 + len3);

    double xm1 = xc1 + (xc2 - xc1) * k1;
    double ym1 = yc1 + (yc2 - yc1) * k1;

    double xm2 = xc2 + (xc3 - xc2) * k2;
    double ym2 = yc2 + (yc3 - yc2) * k2;

    // Resulting control points. Here smooth_value is mentioned
    // above coefficient K whose value should be in range [0...1].
    ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
    ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;

    ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
    ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;

And the source code of an approximation with a cubic Bezier curve.

// Number of intermediate points between two source ones,
// Actually, this value should be calculated in some way,
// Obviously, depending on the real length of the curve.
// But I don't know any elegant and fast solution for this
// problem.
#define NUM_STEPS 20

void curve4(Polygon* p,
            double x1, double y1,   //Anchor1
            double x2, double y2,   //Control1
            double x3, double y3,   //Control2
            double x4, double y4)   //Anchor2
    double dx1 = x2 - x1;
    double dy1 = y2 - y1;
    double dx2 = x3 - x2;
    double dy2 = y3 - y2;
    double dx3 = x4 - x3;
    double dy3 = y4 - y3;

    double subdiv_step  = 1.0 / (NUM_STEPS + 1);
    double subdiv_step2 = subdiv_step*subdiv_step;
    double subdiv_step3 = subdiv_step*subdiv_step*subdiv_step;

    double pre1 = 3.0 * subdiv_step;
    double pre2 = 3.0 * subdiv_step2;
    double pre4 = 6.0 * subdiv_step2;
    double pre5 = 6.0 * subdiv_step3;

    double tmp1x = x1 - x2 * 2.0 + x3;
    double tmp1y = y1 - y2 * 2.0 + y3;

    double tmp2x = (x2 - x3)*3.0 - x1 + x4;
    double tmp2y = (y2 - y3)*3.0 - y1 + y4;

    double fx = x1;
    double fy = y1;

    double dfx = (x2 - x1)*pre1 + tmp1x*pre2 + tmp2x*subdiv_step3;
    double dfy = (y2 - y1)*pre1 + tmp1y*pre2 + tmp2y*subdiv_step3;

    double ddfx = tmp1x*pre4 + tmp2x*pre5;
    double ddfy = tmp1y*pre4 + tmp2y*pre5;

    double dddfx = tmp2x*pre5;
    double dddfy = tmp2y*pre5;

    int step = NUM_STEPS;

    // Suppose, we have some abstract object Polygon which
    // has method AddVertex(x, y), similar to LineTo in
    // many graphical APIs.
    // Note, that the loop has only operation add!
        fx   += dfx;
        fy   += dfy;
        dfx  += ddfx;
        dfy  += ddfy;
        ddfx += dddfx;
        ddfy += dddfy;
        p->AddVertex(fx, fy);
    p->AddVertex(x4, y4); // Last step must go exactly to x4, y4

You can download a working application for Windows that renders the lion, rotates and scales it, and generates random polygons. Interpolation with Bezier curves  (bezier_interpolation.zip). Press left mouse button and drag to rotate and scale the image around the center point. Press right mouse button and drag left-right to change the coefficient of smoothing (K). Value K=1 is about 100 pixels from the left border of the window. Each left double-click generates a random polygon. You can also rotate and scale it, and change K.

Copyright © 2002-2006 Maxim Shemanarev
Web Design and Programming Maxim Shemanarev

Trent1985 CSDN认证博客专家 深度学习 人像美颜美妆算法 图像特效
本人多年来专注图像特效、人像美颜美妆算法研究、AI美颜美妆探索,著有《图像视频滤镜与人像美颜美妆算法详解》一书,欢迎 志同道合的朋友们一起学习交流!
让用户可以随时查找曲线上任意点的坐标(函数值) 附件的 .mht文件,是一个简单介绍贝塞尔三次插值的文档,可以用IE打开,更多贝塞尔插值算法,可以用搜索引擎找 附件的 .xls文件,打开以后,会看见三个工作表,分别演示了 找一个数值在曲线上的一组对应点 找一个数值在曲线上的所有对应点 和贝塞尔曲线是怎样在通过每两个节点的(每一对输入的X-Y数值代表平面坐标系的一个点,称为节点,Excel的平滑曲线通过每一个节点) 要在其他Excel文档使用 BezireInt() 函数,需要按Alt+F11,双击模块一 复制所有文字 然后打开其他Excel文档按Alt+F11,插入---模块,然后粘贴所有文字 自定义函数的使用方法是: 在空白单元格输入 =BezierInt(X坐标的范围,Y坐标的范围,待查的数值) 函数就会返回一个包含六个元素的数组,分别是三个点的X,Y坐标 如: 你根据 a1:a4的数值作为X值,b2:b4的数值作为Y值,画了一个平滑线散点图 想查找c1的数值是不是在这条曲线上 就可以输入 =Index( BezierInt(a1:a4,b1:b4,c1) ,1,1) 得到曲线上第一个 X值=C1数值的点的X坐标 =Index( BezierInt(a1:a4,b1:b4,c1) ,1,2) 得到曲线上第一个 X值=C1数值的点的Y坐标 =Index( BezierInt(a1:a4,b1:b4,c1) ,1,3) 得到第2个 X值=C1数值的点的X坐标 =Index( BezierInt(a1:a4,b1:b4,c1) ,1,4) 得到第2个 X值=C1数值的点的Y坐标 =Index( BezierInt(a1:a4,b1:b4,c1) ,1,5) 得到第3个 X值=C1数值的点的X坐标 =Index( BezierInt(a1:a4,b1:b4,c1) ,1,6) 得到第3个 X值=C1数值的点的Y坐标 如果有多段曲线上的点包含C1的数值,那么可以增加输入参数,指定从哪个节点开始查找 =Index( BezierInt(a1:a4,b1:b4,c1,3),1,1) 得到从第三组X-Y数据开始查找, 返回第一个符合C1数值的点的X坐标 =Index( BezierInt(a1:a4,b1:b4,c1,3),1,2) 得到从第三组X-Y数据开始查找,返回第一个符合C1数值的点的Y坐标 函数默认输入数值是X值,要根据Y值找点的话,还可以增加输入参数, 指定输入的是Y值 =Index( BezierInt(a1:a4,b1:b4,c1,1,"Y"),1,1) 得到返回曲线上第一个 Y值=C1数值的点的X坐标如此类推......
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 39.90元
钱包余额 0