Easy Smooth Lines with Bezier Curves
A while ago I wrote a vector class and a bezier curve class for my 2D graphics University ACW (Assessed CourseWork). After packaging them up and posting them here, I thought it a good idea to take a step further and write a smooth line class too, to start building up a library of implementations of various different algorithms.
While I was searching for a good alternative to jsbin (it doesn't let me use tabs instead of spaces), I came across Codepen again, and finally decided to take a look. Apparently you can do quite a bit with a free account, so I signed up and posted about new my account on this blog.
Since the quality of the content on Codepen is considerably high, and you can see who has done what, I've decided to put more time into the visual effects of the things that I put up on there.
Anyway, here's a demo of my
SmoothLine class in action:
Click to add a point. A line will show up when you have 3 points. Here's the class itself:
Note that it depends on my earlier
BezierCurve classes (links above).
The code is actually really simple. You create a new instance of the
SmoothLine class, add some
Vector points with the
add() method (it takes both a single vector and an array of vectors), and then call the
line() method when you are reading to add the
SmoothLine to your drawing context path.
Here's some example code:
// Creation code var smoothLine = new SmoothLine(); smoothline.add(new Vector(138, 330)); this.smoothLine.add([ new Vector(161, 10), new Vector(561, 111), new Vector(890, 254), new Vector(1088, 254), new Vector(1152, 130), new Vector(1186, 55), new Vector(1230, 21) ]); // Rendering code context.beginPath(); // Do stuff here smoothline.line(context, 16); // Do stuff here context.stroke();
Over the next few months if I can possibly manage it I want to implement a bunch of other useful algorithms in order to build up a library of code that I can just drop into a project and use. Suggestions for the next algorithm are welcome!