Find tangent of path in d3.js - javascript

I'd like to position svg elements (say, ellipses) along a path, for instance a curve generated with a d3.js line generator with B-spline interpolation. While finding the coordinates of points along the path is easy using path.getPointAtLength(), I can't figure out how to find the tangent of any point on the line. If I could get the tangent (or the derivative), I would be able to rotate the elements accordingly to make them look as if they are positioned along the line.

Call path.getPointAtLength() at two points close together. Calculus tells us the difference is the slope/tangent at that point.

Related

Is there a way to configure Cesium entities to be displayed as ICRF?

My question is very similar to another one already solved.
I have to display a moving entity along with its path in ICRF. I previously had it working using CZML. But now I am replacing the CZML objects to entities. To configurate the entity's position I am using SampledPositionProperty and setting the reference frame in the constructor. The displayed result seems to be Earth fixed because the path looks like a spiral instead of an ellipse.
new SampledPositionProperty(ReferenceFrame.INERTIAL);
The shape of the path comes from the coordinates passed into the SampledPositionProperty.
You need to make sure the coordinates you're passing in have already been transformed into ICRF coordinates, forming an ellipse, not the Earth-fixed coordinates in the shape of a spiral.
Cesium will simply draw whatever shape you give it. The choice of reference frame on the SampledPositionProperty constructor there only controls whether your shape will be fixed to the Earth, or aligned to the ICRF frame over time, but it doesn't change the actual shape. So if you give it a spiral path, it will show you a spiral path. The conversion between coordinate systems is up to you (but can be done using Cesium helper functions, if needed).

How can picture of page be straightened out to look as if it was scanned?

I have seen apps, and wondered how can I programmatically take a picture of image. Define how it needs to be transformed so that it looks parallel to camera and not skewed perspective wise.
Then combine multiple photos to create a pdf file. For example this app does it: https://play.google.com/store/apps/details?id=com.appxy.tinyscan&hl=en
I do not use books for such trivial things so sorry I can not recommend any (especially in English). What you need to do is this:
input image
find main contours
ideally whole grid but even outer contour will suffice (in case no grid is present). You need to divide the contour into horizontal (Red) and vertical (Green) curves (or set of points).
sample contour curves by 4 "equidistant" points
as the image is distorted (not just rotated) then we need to use at least bi-cubic interpolation. For that we need 16 points (Aqua) per patch.
add mirror points to cover whole grid
on the image are mirrored (Yellow) points only for horizontal contours you should do this also for vertical contours (did not fit me in the image and did not want to enlarge resolution just for that) and also for the corner points so you got 6x6 control points. The mirror can be done linearly (like I did).
Now the transformation is done like this:
Process all pixels dst(x0,y0) of target image
Handle x,y as parameter for cubic interpolation
if xs,ys is target image resolution then:
u=(3.0*x)/xs
v=(3.0*y)/ys
Now cubic interpolation is usually done on parameter t=<0.0,1.0) so
if u=<0.0,1.0> use t=u and control points 0,1,2,3.
if u=<1.0,2.0) use t=u-1.0 and control points 1,2,3,4
if u=<2.0,3.0> use t=u-2.0 and control points 2,3,4,5
The same goes for vertical contours and v. Compute xi,yi as bi cubic interpolation of (u,v). And copy pixel:
dst(x,y)=src(xi,yi);
This is just nearest neighbor but you can also use bilinear for this ... As cubic curve I would use this polynomial.
The idea behind bi-cubic interpolation is easy. compute point corresponding to parameter u on 4 horizontal contours. That will give you 4 control points for the final cubic interpolation in vertical direction and v as parameter. Resulting coordinate is your source pixel position.
For more info see:
How can i produce multi point linear interpolation?
Bicubic interpolation
OpenCV Birdseye view without loss of data
In case you do not have a grid use any info that can be used as one. For example lines of text can be considered a contour for this ...

Random enclosing path with dots on path

I would like to generate a SVG/canvas using JavaScript that contains an enclosing path (a line that starts and ends at the same place) with random number of points that should be equidistant from each other (on the path, not in terms of space).
What library can be used to achieve this effect and if possible, can an example be provided?
Angela
For SVG you can use the Snap library and in particular use the getPointAtLength method to get equidistant points along a path.
http://snapsvg.io/docs/#Snap.path.getPointAtLength
In html Canvas a path can be any combination of line segments and curves (quadratic & cubic Bezier curves). Therefore to plot equidistant points on a path you must mathematically interpolate along each line segment and curve using the appropriate formulae.
For line segments this usually involves calculating the length of the line segment and then "lerping" (Google!) using your specified distance.
For curves this usually involves using the equations for the curve and plotting numerous points along that line. Then connect those points with line segments and again "lerping" along those segments at your specified distance.

Is there a coordinate algebra library for Javascript?

I am trying to do things like:
Given two line segments, find if they intersect.
Find the area of an arbitrary Polygon
For everything I have a point in rectangular co-ordinate system.
for finding the area: http://alienryderflex.com/polygon_area/
intersection of two lines: possible duplicate

How to compute the intersection points of a line and an arbitrary shape?

Is there a way to geometrically compute the intersection points of a line and an arbitrary graphics path? I know where all of the lines and curves are in the path, and I am using the HTML5 canvas element if that helps any. Basically, I have access to all of the canvas drawing commands and their arguments. For instance, if the API was called with a lineTo, then a moveTo, then an arc I have all of that information. Each call to the API is stored in an array. I have the path definition, I just want to figure out where the line intersects the path. Below is an image showing an example of the points I would need to find.
Thanks for any help! Again, I would rather do this geometrically rather than pixel based if possible.
You might want to have a look at Kevin Lindsey's Javascript geometry library - it contains probably all the interesection algorithms you are looking for: http://www.kevlindev.com/geometry/index.htm
Without knowing how your graphics path is defined, it's impossible to answer your question with a concrete algorithm. There is a solution in this book on algorithms for straight line segments.
If you have the equations for everything, then you can do it (in theory). In practice, it's not so easy (especially not in the general case). This discussion has some good advice on intersecting lines and bezier curves.
You want to intersect a line and a "spline" x(t), y(t) which should be at most 4-th degree polynomial for both x(t) and y(t). You ed up solving equations, but yo do need to know all of the parameters. If solution is out of either range (line segment and spline segment have start and end) - discard it. Related q:
The intersection point between a spline and a line

Categories

Resources