A closed polygon of cutmull-splines

[TimT77]

Hi everybody,

is it possible to create a closed polygon/path of cutmull spline (points)?

Simply adding again the first point (to close the polygon) does not work.
This will create a "sharp corner" (point: -5, 0, 5) which i didn't want.

See here: https://www.babylonjs-playground.com/#1AU0M4#17

Regards,
Tim

[JohnK]

Hi @TimT77 and welcome to the forum. Sorry for the slow reply but it took some thinking about. Strictly speaking given a set of points p0, p1, p2, ......., pn catmullrom uses 4 points p(i), p(i+1), p(i+2), p(i+3) to draw the spline through points p(i+1), p(i+2), with p(i) and p(i+3) as only control points, and so since p0 and pn have no points in front of and after them respectively  they are not usually drawn. However the `CreateCatmullRomSpline` method of Curve3 compensates for this and draws through all the given points.

A slightly different method is needed if you want the given points to be in a loop. In the following playground I produce a function 'CreateCatmullRomSplineLoop'  (returns a Curve3 object) which will draw a loop through the given points. Note usage as it is not a BABYLON method.

https://www.babylonjs-playground.com/#K49ARR

[Wingnut]

Hi guys, sorry for butting-in.  I dunno much about mulling cats, but I think you guys should see this...

https://www.babylonjs-playground.com/#14VFYX

Whenever I hear Catmull-Rom... I think of rounding the edges of mesh.  I know that's not its only purpose, but what the heck... you guys need to see some mesh rounding.

I don't know who did this PG, but I love it.  I think these shapes are quite high-vert-count mesh, but they look SO COOL, huh?  Ok, Wingnut over and out. 

[TimT77]

Hi JohnK and Wingnut,

many thanks for your help and answers!
JohnK solution is exactly what i was looking for! Perfect! ?

And thx to Wingnut for this great playground. Perhaps i can use something of this ?

Regards
Tim

[TimT77]

One small change in addition to JohnKs solution:
i've added:

catmullRom.push(catmullRom[0]);

to "CreateCatmullRomSplineLoop":

CreateCatmullRomSplineLoop = function (points, nbPoints) {
    var catmullRom = new Array();
    var step = 1.0 / nbPoints;
    var amount = 0.0;
    var pointsCount = points.length;
    for (var i = 0; i < pointsCount; i++) {
        amount = 0;
        for (var c = 0; c < nbPoints; c++) {
            catmullRom.push(BABYLON.Vector3.CatmullRom(points[i % pointsCount], points[(i + 1) % pointsCount], points[(i + 2) % pointsCount], points[(i + 3) % pointsCount], amount));
            amount += step;
        }
    }
    catmullRom.push(catmullRom[0]);
    return new BABYLON.Curve3(catmullRom);
};

and now i have a closed polygon! ??

 

https://www.babylonjs-playground.com/#K49ARR#1

[JohnK]

@TimT77 thank you for spotting that, my old eyes had not noticed the gap. From V3.3  you can add a true parameter at the end of `BABYLON.Curve3.CreateCatmullRomSpline` to close the curve. However I had made the same mistake when doing the PR so the gap will still appear until the next time V3.3 is updated https://www.babylonjs-playground.com/#1AU0M4#19