How can I draw continuous curves in flot charts? - flot

I'm trying to make a line chart in flot and I was wondering if it's possible to represent continuous lines. I mean curves such as y=ax^2+bx+c, or sin(x).
I already know that I can make a "for" sentence and draw the curve as a composure of short segments, but I would like to avoid this way.
Is it possible? How could I make it? Thnx guys!

Related

Make gif spinning concentric circles in different directions

I have the following image saved as SVG:
Concentric circles
As you can see, the image contains 3 concentric circles, and I was wondering how can I create a gif with the 3 circles spinning. The complicated part is that I need the middle circle to spin in a different direction than the inner and outter circles. I usually work with GIMP and Inkscape, and I'm not sure if it's possible to use any of them to do that. Searched a lot but withou success.
Do you know how can I achieve this? Thanks in advance
In Gimp you can use the ofn-path-marquee script;
You just create circle path(s) and let it do the rest, it is basically a dash pattern with a varying offset. The script does the necessary tweaks to make sure there is an integer number of dashes, all the same length.
See here for some other examples.

Spotfire curve fitting

I have an scatter plot, and want to see the line only fitting for marked points. Is there any way to do that in Spotfire? I know how to make a line fitting for all points but I don’t know how to fit the line base on the markings. Thanks in advance for your help.
MS
I don't think there is a setting to have a best fit line only on the marked data. However, you could create a details visualization based on the marked data and then perform your best fit on that.

Contour detection on sketched lines

I have a set of curves as input, represented as a list op point coordinates.
I want to merge them into one, more or less beautiful, curve.
Any idea how to do that?
UPDATE:
It should work on a single curve like that:
The most important aspect, to make the result curve nice, and supress the draw errors.
You have zero noise in your image, that is there is no salt-and-pepper artefacts just a somewhat curvy lines. The easiest way to merge them if there are not that many gaps is to use blur or morphological expansion to connect parts together (both may distort a shape just a bit) and then use findContour().
If there are larger gaps you have to use convex Hull on convex parts and then on concave residuals. Snake or active contour algorithm is probably an overkill in this situation.

Draw a line in Directx from given coordinates

How can we draw a line between 2 points which are derived at run time? These are two 3 dimensional points in the 3D space.
Thanks.
Well.. Pretty easy.
use D3DPT_LINELIST as the first paramerter in the call to
IDirect3DDevice9::DrawPrimitive();
and the geometry will be rendered as lines.
Best of Luck!

How to get the outline of a stroke? [duplicate]

This question already has answers here:
svg: generate 'outline path'
(2 answers)
Closed 5 years ago.
I want to convert a stroked path to a filled object. (Programmatically, in JavaScript.)
The line is just a simple curved line, a sequence of coordinates. I can render this line as a path, and give it a stroke of a certain thickness... but I'm trying to get a filled shape rather than a stroked line, so that I can do further modifications on it, such as warping it, so the resulting 'stroke' might vary in thickness or have custom bits cut out of it (neither of these things are possible with a real SVG stroke, as far as I can tell).
So I'm trying to manually 'thicken' a line into a solid shape. I can't find any function that does this – I've looked through the docs of D3.js and Raphaël, but no luck. Does anyone know of a library/function that would do this?
Or, even better: if someone could explain to me the geometry theory about how I would do this task manually, by taking the list of line coordinates I have and working out a new path that effectively 'strokes' it, that would be amazing. To put it another way, what does the browser do when you tell it to stroke a path – how does it work out what shape the stroke should be?
There has been a similar question recently:
svg: generate 'outline path'
All in all, this is a non-trivial task. As mentioned in my answer to the linked question, PostScript has a command for generating paths that produce basically the same output as a stroke, called strokepath. If you look at what Ghostscript spits out when you run the code I posted at the linked question, it's pretty ugly. And even Inkscape doesn't really do a good job. I just tried Path => Outline stroke in Inkscape (I think that's what the English captions should say), and what came out didn't really look the same as the stroked path.
The "simplest" case would be if you only have non-self-intersecting polylines, polygons or paths that don't contain curves because in general, you can't draw exact "parallel" Bézier curves to the right and the left of a non-trivial Bézier curve that would delimit the stroked area - it's mathematically non-existent. So you would have to approximate it one way or the other. For straight line segments, the exact solution can be found comparatively easily.
The classic way of rendering vector paths with curves/arcs in them is to approximate everything with a polyline that is sufficiently smooth. De Casteljau's Algorithm is typically used for turning Bézier curves into line segments. (That's also basically what comes out when you use the strokepath command in Ghostscript.) You can then find delimiting parallel line segments, but have to join them correctly, using the appropriate linejoin and miterlimit rules. Of course, don't forget the linecaps.
I thought that self-intersecting paths might be tricky because you might get hollow areas inside the path, i.e. the "crossing area" of a black path might become white. This might not be an issue for open paths when using nonzero winding rule, but I'd be cautious about this. For closed paths, you probably need the two "delimiting" paths to run in opposite orientation. But I'm not sure right now whether this really covers all the potential pitfalls.
Sorry if I cause a lot of confusion with this and maybe am not of much help.
This page has a fairly good tutorial on bezier curves in general with a nice section on offset curves.
http://pomax.github.io/bezierinfo/
A less precise but possibly faster method can be found here.
http://seant23.wordpress.com/2010/11/12/offset-bezier-curves/
There is no mathematical answer, because the curve parallel to a bezier curve is not generally a bezier curve. Most methods have degenerate cases, especially when dealing with a series of curves.
Think of a simple curve as one with no trouble spots. No cusps, no loops, no inflections, and ideally a strictly increasing curvature. Chop up all the starting curves into these simple curves. Find all the offset curves of these simple curves. Put all the offset curves back together dealing with gaps and intersections. Quadratic curves are much more tractable if you have the option to work with them.
I think most browsers do something similar to processingjs, as they have degenerate cases even with quadratic curves. For example, look at the curve 200,300 719,301 500,300 with a thickness of 100 or more.
The standard method is the Tiller-Hanson algorithm (Offsets of Two-Dimensional Profiles, 1984, which irritatingly is not on line for free) which creates a good approximation. The idea is that because the control points of each Bezier curve lie on lines tangent to the start and end of the curve, a parallel curve will have the same property. So we offset the start and the end of the curve, then find new control points using these intersections. However, that gives very bad results for sharp curves, so the first step is to bisect the original curve, which is very easy to do to Bezier curves, until it turns through a sufficiently small angle.
Other refinements are needed to deal with (i) intersections between the parallels, on the inside of each vertex; (ii) inserting an arc of a circle to fill the gap on the outside of each vertex; and (iii) adding end-caps - square, butt or circular.
Tiller-Hanson is difficult to implement, but there's a good open-source implementation in the FreeType library, in ftstroke.c (http://git.savannah.gnu.org/cgit/freetype/freetype2.git/tree/src/base/ftstroke.c).
I'm sorry to say that it can be quite difficult to integrate this code, but I have used it successfully, and it works well.

Resources