Using the image below, I was able to understand the behavior of a spline curve for 4 points:
With this image I've manage to produce a 3rd degree equation and code it in javascript.
Now I'm trying to understand how to use more than 4 points.
I couldn't find an image showing a curve of 5 (or more) points. Does anyone know how to do it?
What you're looking for is the De Boor Algorithm. The following link (taken from this course website) gives a good explanation (with figures, examples and pseudo-code) of how it works. The following figure was taken from there.
This interactive demo can also give you an idea on what it looks like (note you're interested in the "Spline" demo not the "Bezier").
Related
I am trying to find a sample solution for how to create a simple square/ rectangle tile, with a count or sum value in the center - a KPI tile. THis kind of tile is common in PowerBI or other tools and it's probably so simple that HighCharts themselves don't even have an example on their demo site. If anyone has a jsfiddle of how to create one that would wonderful. thanks
Here's a link to the equivilent in powerBI
https://learn.microsoft.com/en-us/power-bi/visuals/power-bi-visualization-card?tabs=powerbi-desktop
I haven't tried anything as I couldn't find a sample to work from, which is my approach generally with Highcharts.
I am implementing draw/modify features using OpenLayer in ReactJS and came across a very interesting question.
How can I draw a line and at the same time see how long it is in the real world (considering zoom and scale of the map).
So for instance when I draw a line I would like to have an info like "real world length: x meters" where x is dynamically changing while extending the line.
Is it possible to achieve such a functionality using OpenLayers and ReactJS (or just pure JS)? Is there maybe a better solution? Maybe anyone saw something that works this way?
Thanks for help in advance.
The ol-ext/Overlay/Tooltips can do it for you.
See example online: https://viglino.github.io/ol-ext/examples/popup/map.tooltip.measure.html
When I try to use .interpolate('basis') an incorrect path is showing in my graph. When it changes to .interpolate('linear') it fixes the issue. How can I fix this issue even if I use .interpolate('basis'). Here is the plunker http://plnkr.co/edit/dGjaHXZ186JYzX8IUahw?p=preview Please help me.
I assume that by "incorrect" you mean "doesn't go through all of my points". The basis interpolation uses a b-spline which does not have this property -- there's no way to "fix" it, this is simply how it behaves.
You may consider the cardinal interpolation instead, which also gives you a smooth curve, but goes through all the points as well. Example here.
Interpolation in D3 represent some mathematical equation to join the different points with a line. Even you can customize the behavior of the interpolations if you feel the default types provided by D3 are not satisfying your needs. These resources can be helpful.
D3 Documentation Link
Example to visualize different interpolations
I have a B-Spline curve. I have all the knots, and the x,y coordinates of the Control Points.
I need to convert the B-Spline curve into Bezier curves.
My end goal is to be able to draw the shape on an html5 canvas element. The B-Spline is coming from a dxf file which doesn't support Beziers, while a canvas only supports Beziers.
I've found several articles which attempt to explain the process, however they are quite a bit over my head and really seem to be very theory intensive. I really need an example or step by step help.
Here's what I've found:
(Explains B-Splines),(Converting to Beziers),(Javascript Example)
The last link is nice because it contains actual code, however it doesn't seem to take into account the weight assigned by the nodes. I think this is kind of important as it seems to influence whether the curve passes through a control point.
I can share my Nodes or Control Points if that would be useful. If someone would point me to a step-by-step procedure or help me with some psuedo(or actual)code, I would be so grateful.
I wrote a simple Javascript implementation of Boehm's algorithm for cubic B-Splines a while back. It's a fairly straightforward implementation involving polar values, described here in section 6.3: Computer Aided Geometric Design- Sederberg
If you're just interested in the implementation, I've linked the classes I wrote here: bsplines.js
This could be helpful - https://github.com/Tagussan/BSpline
My project has moved on and I no longer need it, but this seems to be a pretty useful way to feed control points and have a curve drawn.
I want to code a little Game, dealing with fonts and letters. I want to make them move arround in 2d space and i am using box2dweb as physics engine, what is actually doing a very great job. At the moment all I am struggling with, is the problem of building the b2Body for a Letter. Box2d can only handle primitive, convex shapes and to build an more complex hitbox I have to combine some of them. In the image I tried to figure out what i would like to reach, an algorithm, that takes an svg-path of a letter and generates a series of b2shapes which represent the hitbox.
All in all i have no Idea where i could find some Information about this, if there is a library that is capable of doing this. Even if this Library is not available in Javascript, i could do the job on Server.
I know that there is paper.js and raphalel, some clever vector libraries, but i have not found any hint how to solve this yet.
I would be happy for any kind of help, links to ressources, or the correct name of the problem in mathematical sense.
Greetings and thanks in advance...
Philipp
I just want to leave the result of investigation here, maybe someone will help it. The initial idea is based on »ear cutting«, »ear culling«, or »ear cropping«. A demo here will describe this. But the algorithm, which produces less, but box2d suitable polygons is shown in a demo here. The idea is to merge as much triangles as possible, as long as they are convex and this case, do not have more than eight edges. A triangle is suitable to be added to a polygon, if one can find two points in the triangle and two adjective points in the polygon, with the same x and y coordinates.