Bezier, it's french

posted in 2d Game Creation
Published October 17, 2014
Advertisement
So I got bezier curves kickin', along with variable width of the start, middle, and end. If you have not used bezier ([be.zje]) is actually not a hard concept, but very effective. They use control points to modify a line interpolation from straight line into a curve.
Coding Math 19 was very helpful.


I used cubic bezier, so I have a start point, end point, and two control points.


This is the code, to which I got directly from the video, but it is apparently just the code for quadratic bezier (1 control point) and Cubic bezier (2 control point). t is what percent along the line you are at (between 0.0f and 1.0f). You input the start, 1 or 2 control points depending, and the end point. You give the t and it will change pFinal to the correct point along the curve. The smaller the increments you give for t, the smoother the curve will look. All the curves in the picture are 20 segments.
void QuadraticBezier(Vector2f p0, Vector2f p1, Vector2f p2, float t, Vector2f& pFinal){pFinal.x = powf(1.0f - t, 2.0f) * p0.x + (1 - t) * 2.0f * t * p1.x + t * t * p2.x;pFinal.y = powf(1.0f - t, 2.0f) * p0.y + (1 - t) * 2.0f * t * p1.y + t * t * p2.y; }void CubicBezier(Vector2f p0, Vector2f p1, Vector2f p2, Vector2f p3, float t, Vector2f& pFinal){pFinal.x = powf(1.0f - t, 3.0f) * p0.x +powf(1 - t, 2) * 3.0f * t * p1.x +(1 - t) * 3 * t * t * p2.x + t * t * t * p3.x;pFinal.y = powf(1.0f - t, 3.0f) * p0.y +powf(1 - t, 2) * 3.0f * t * p1.y +(1 - t) * 3 * t * t * p2.y + t * t * t * p3.y;}
I also used a function I wrote called Wide. It uses the start, middle, and ending widths are parameters. t is the same as the curve. It calculates how wide the line will be. Before halfway through, it ignores the ending width. After halfway through, it ignores the beginning width. It was cleaner than having all this in the loop creating the curve.Vector2f Wide(Vector2f a, Vector2f b, Vector2f c, float t){float x, y;if (t == 0.0f){x = a.x;y = a.y;}else if (t < .5f){float d = t * 2.0f;x = a.x * (1.0f - d) + b.x * d;y = a.y * (1.0f - d) + b.y * d;}else if (t == .5f){x = b.x;y = b.y;}else{t = t - .5f;float d = t * 2.0f;x = b.x * (1.0f - d) + c.x * d;y = b.y * (1.0f - d) + c.y * d;}return Vector2f (x, y);}
[sharedmedia=gallery:images:5779]
3 likes 2 comments

Comments

sunandshadow

Bezier curves are awesome. I wish there was a 3D art program built around their 3D equivalent, NURBs, the way there are nice 2D vector art programs like Inkscape and Illustrator built around bezier curves.

October 17, 2014 11:54 PM
JD_Rushing

It shouldn't be too hard to implement. You would just interpolate the z as well. You would probably use 4 control points over a grid. I believe I have seen examples of it.

October 18, 2014 12:26 AM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement
Advertisement