Chart.js is very cool! I have inherited some code that is using it and I find it very easy to work with.
My problem, though, is that I would like to use Bezier curves in my line graph but my data is 'sparse'. It seems that if the line starts after the 0th dataset then the bezier curve points to infinity:
bezierCurve: true
I don't see any way to fix this. If I turn off the bezier curves the graph is correct but not nearly as cool:
bezierCurve: false
Does anyone have a clever solution to this problem?
It looks like this is a bug that is actively being worked on in this GitHub pull request "Resolve issues with sparse datasets". One of the remaining issues is "Fix problems with bezier curve splining between points with no value". The PR was last updated a couple weeks ago (July 2014) so hopefully this issue will be resolved soon.
Related
I am currently working on a soft body system using numeric spring physics and I have finally got that working. My issue is that everything is currently in straight lines.
I am aiming to replicate something similar to the game "The floor is Jelly" and everything work except the smooth corners and deformation which currently are straight and angular.
I have tried using Cubic Bezier equations but that just means every 3 nodes I have a new curve. Is there an equation for Bezier splines that take in n number of control points that will work with loop of vec2's (so node[0] is the first and last control point).
Sorry I don't any code to show for this but i'm completely stumped and googling is bringing up nothing.
Simply google "B-spline library" will give you many references. Having said this, B-spline is not your only choice. You can use cubic Hermite spline (which is defined by a series of points and derivatives) (see link for details) as well.
On the other hand, you can also continue using straight lines in your system and create a curve interpolating the straight line vertices just for display purpose. To create an interpolating curve thru a series of data points, Catmull-Rom spline is a good choice for easy implementation. This approach is likely to have a better performance than really using a B-spline curve in your system.
I would use B-splines for this problem since they can represent smooth curves with minimal number of control points. In addition finding the approximate smooth surface for a given data set is a simple linear algebra problem.
I have written a simple B-spline C++ library (includes Bezier curves as well) that I am using for scientific computations, here:
https://github.com/feevos/bsplines
it can accept arbitrary number of control points / multiplicities and give you back a basis. However, creating the B-spline curve that fits your data is something you have to do.
A great implementation of B-splines (but no Bezier curves) exists also in GNU GSL (
https://www.gnu.org/software/gsl/manual/html_node/Basis-Splines.html). Again here you have to implement the control points to be 2/3D for the given basis, and fix the boundary conditions to fit your data.
More information on open/closed curves and B-splines here:
https://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/index.html
I'm looking for a simple algorithm for line curving (much like fireworks freeform tool).
In my C++ program, a line is a set of ordered points, each point is of (x,y) form.
Assume I have straight line of 5 (just for simplicity) ordered points (the line isn't necessarily parallel to any axis). I pinch the 3rd point and drag it up. I'm expecting to have a new, gaussian-like, curved line. It doesn't really matter how I implement the "Points" and "Lines", but keep in mind I should add more points to the new expected line so it'll be curved, refined and flowing (and not with line breaks).
I thought of using a gaussian function but I need the ability of moving the curved part (see picture below).
Thanks in advance!
You need a B-spline or a Bezier curve to approximate your shape.
There is a nice interactive demo of Bezier splines so you can play with to see the effect. A sample screenshot below:
Depending on your OS and development environment, there are probably already a number of tools or APIs available.
There are a lot of curve fitting questions on SO but I can't seem to find one that addresses what I'm looking for.
The scenario is simple: I capture X/Y points on a tablet screen. I'd like to draw the resulting line segments as a smooth curve instead of a series of line segments. Many apps do this, for example: Penultimate (sketching demo at 0:36) or Autodesk Sketchbook.
Bezier curve algorithms take a fixed number of points to draw a curve and don't seem to work well with numerous multiple points. Can anyone point to an algorithm which does this well?
Fit-Curve is a Spline and not a Bezier Curve in fact. However, you can make a Bezier Curve to look like your Spline (Splines have no control points). I've searched a lot on this problem and introduced/implemented a lot of too-complex algorithms to myself, and finally I found that the task is much easier than I supposed (I do felt it must to, I swear :) )
Here is the best description on that, I'll take an excerpt from this article:
In most implementations, Bezier Curve drawing function takes two control points and a point itself (for a segment) as an arguments, so everything you need is just iteratively finding the control points for new segments (I think it is best to update last segment and draw a new one in the end of curve for every new point):
Here comes the JavaScript code (t for a simplest case is a constant smoothness of your curve):
function getControlPoints(x0,y0,x1,y1,x2,y2,t){
var d01=Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2));
var d12=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
var fa=t*d01/(d01+d12);
var fb=t*d12/(d01+d12);
var p1x=x1-fa*(x2-x0);
var p1y=y1-fa*(y2-y0);
var p2x=x1+fb*(x2-x0);
var p2y=y1+fb*(y2-y0);
return [p1x,p1y,p2x,p2y];
}
Please be sure to read and understand the article, I think it is a best, shortest and clearest one.
Check out splines. They basically take a set of control points as input and output a set of cubic curve where each curve is tangent to the previous one giving a smooth outline.
See this: http://en.wikipedia.org/wiki/Cubic_Hermite_spline
I have N points in 3-dimensional space. I need to join them using a line. However, if I do that using a simple line, it is not smooth and looks ugly.
My current approach is to use a Bezier curve, using the DeCasteljau algorithm for 4 points, and running that for each group of 4 points in my data set. However, the problem with this is that since I run it on say points 1-4, 5-8, 9-12, etc., separately, the line is not smooth between 4-5, 8-9, etc.
I also looked for other approaches; specifically I found this article about Catmull-Rom splines, which seem even better suited for my purpose, because the curve passes through all control points, unlike the Bezier curve. So I almost started implementing that, but then, I saw on that site that the formula works "assuming uniform spacing of control points". That is not the case for my problem.
So, my question is, what approach should I use -- Bezier, Catmull-Rom, or something completely different? If Bezier, then how to fix the non-smoothness between 4-5, 8-9, etc.? If Catmull-Rom, why won't the formula work if points are not evenly spaced, and what do I need instead?
EDIT: I am now pretty sure I want the Catmull-Rom spline, as it passes every control point which is an advantage for my application. Therefore, the main question I would like answered is why won't the formula on the link I provided work for non-uniformly spaced control points?
Thanks.
A couple of solutions:
Use a B-spline. This is a generalization of Bezier curves (a Bezier curve is a B-spline with no internal knot points.)
Use a cubic spline. Cubic splines are particularly easy to calculate. A cubic spline is continuous in the zero, first, and second derivatives across the control points. The third derivative, the cubic term, suffers a discontinuity at the control points, but it is very hard to see those discontinuities.
One key difference between a B-spline and a cubic spline is that the cubic spline will pass through all of the control points, while a B-spline does not. One way to think about it: Those internal control points are just suggestions for a B-spline but are mandatory for a cubic spline.
A meaningful line (although not the simplest to evaluate) can be found via Gaussian Processes. You set (or infer) the lengthscale over which you wish the line to vary (i.e. the smoothness of the line) and then the GP line is the most probable line through the data given the lengthscale. You can add noise to the model if you don't mind the line not passing through the data points.
Its a nice interpolation method because you can also obtain the standard deviation of your line. The line becomes more uncertain when you don't have much data in the vacinity.
You can read about them in chapter 45 of David MacKay's Information Theory, Inference, and Learning Algorithms - which you can download from the author's website here.
one solution is the following page in wikipedia: http://en.wikipedia.org/wiki/Bézier_curve, check the generalized approach for N control points.
I am currently working on a data visualization project.My aim is to produce contour lines ,in other words iso-lines, from gridded data.Data can be temperature, weather data or any kind of other environmental parameters but only condition is it must be regularly spaced.
I searched in internet , however i could not find a good algorithm, pseudo-code or source code for producing contour lines from grids.
Does anybody knows a library, source code or an algorithm for producing contour lines from gridded data?
it will be good if your suggestion has a good run time performance, i don't want to wait my users so much :)
Edit: thanks for response but isolines have some constrains like they should not intersects
so just generating bezier curves does not accomplish my goal.
See this question: How to approximate a vector contour from an elevation raster?
It's a near duplicate, but uses quite different terminology. You'll find that cartography and computer graphics solve many of the same problems, but use different terminology for them.
there's some reasonably good contouring available in GNUplot - if you're able to use GPL code that may help.
If your data is placed at regular intervals, this can be done fairly easily (assuming I understand your problem correctly). First you need to determine at what interval you want your contours. Next create the grid you are going to use to store the contour information (i'm assuming just a simple on/off or elevation at this contour level type of data), which should be one interval smaller than the source data.
Now the trick here is to offset the 2 grids by 1/2 an interval (won't actually show up in code like this, but its the concept I'm dealing with here) and compare the 4 coordinates surrounding the current point in the contour data grid you are calculating. If any of the 4 points are in a different interval range, then that 'pixel' in the contour grid should be set to true (or the value of the contour range being crossed).
With this method, there will be a problem when the interval is too fine which will cause several contours to overlap onto each other.
As the link from Paul Tomblin suggests, Bezier curves (which are a subset of B-splines) are a ripe solution for your problem. If runtime performance is an issue, Bezier curves have the added benefit of being constructable via the very fast de Casteljau algorithm, instead of drawing them according to the parametric equations. On the off chance you're working with DirectX, it has a library function for the de Casteljau, but it should not be challenging to brew one yourself using the 1001 web pages that describe it.