Develop Reference

Algorithm to decompose Polygons into lineStrings (Headlands from Plots)

Consider the following polygon (an agricultural plot)
From this polygon, I would like to extract the "headlands" of the plot, being the consecutive lines (sides) of the polygon (Wikipedia) used for turning on the field. While often only the rows running perpendicular to the lay of the field are considered, I need all sides of the polygon.
Here, a consecutive line means any set of coordinates, where the angle between any two coordinates of the set is not larger than a value X (e.g 30 degrees).
For the given example, the resulting headlands should look like the following:
I wrote a small algorithm trying to accomplish this, basically checking the angle between two coordinates and either pushing the given coordinate to the existing lineString if the angle is below X degrees or creating a new lineString (headland) if not.
Check out the following Gist
However, in some cases corners of a field are rounded, therefore may consist of many coordinates within small distances of each other. The relative angles then may be less than the value X, even though the corner is too sharp to actually be cultivated without turning.
In order to overcome that issue, I added an index that increases whenever a coordinate is too close for comparison, so that the next coordinate will be checked against the initial coordinate. Check out the following Gist.
This works for simple plots like the one in the example, however I am struggling with more complex ones as the following.
Here, the bottom headland is recognised as one lineString together with the headland on the right, even though optically a sharp corner is given. Also, two coordinates in the upper right corner were found to be a separate headland even though they should be connected to the right headland. The result should therefore yield in the following:
What I would like to know is if there is an approach that efficiently decomposes any polygon into it's headlands, given a specific turning angle. I set up a repo for the code here, and an online testing page with many examples here if that helps.

How to determine if two concave/convex shapes are at particular distance?

I have to determine whether two concave/convex shapes are at distance d from each other . I know Separating Axis theorem might come handy in determining the distance , but that runs in O(n2) time , and I am looking for O(n) or O(nlogn) algorithm for any shape . I want to implement that for any two SVGs in javascript

This is a broad and arduous problem.
To handle the most difficult cases (like ellipse/Bezier distance), you will need to somehow flatten the outlines so I recommend to flatten in all cases, and solve the problem for two polygons only.
Amazingly, you find little resources on the Web for the distance between two polygons.
Assuming that you are dealing with the inside of the shapes (and not just the outline), you will first have to check the polygons for void intersection (otherwise the distance is 0). I guess that this can be done in time O(N.Log(N)).
Then, if I am right, the closest distance between two polygons is the shortest of the closest distances of all vertices to the other polygon. If you construct the Voronoi diagram of both polygons (which is doable in time O(N.Log(N))), you get two planar subdivision, in which you can solve the point-location problem in time Log(N) per point.
All put together should lead to an O(N.Log(N)) solution. You will need a specialized Computational Geometry library to achieve this.

Find tangent of path in d3.js

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.

Draw outline of combined rectangles in canvas

Is there a good algorithmic way to combine multiple squares (each has four x/y points) to draw an outline of the joined figured in canvas?
The figures I would want to make sure work are as follows:
two squares joined to make a rectangle
four squares joined to make a larger square
two squares that are diagonal like a rectangle with triangles at each end at 45 degrees - this is probably the most irregular/special case...
three or four squares joined to make a concave shape like a Tetris(TM) piece 'L' piece
Is there an easy way to calculate the outer points to use to draw a line path (and maybe a filled figure) from all of the squares points?
Thanks!
Update: the reason we want to do this is because we want to show squares that are of the same group that are next to each other in a 2xn array specifically (but could also be 1xn in some cases). Maybe there is an easier answer if I just iterate through the different squares and form groupings some other way?

You're looking at it from the perspective of "I've got squares".
But you need to look at it from the perspective of "I've got points" (each square is just 4 points).
What you're actually looking for is called the "Convex Hull" - and the question has already been answered on SO here:
Polygon enclosing a set of points
I actually started diagramming your solution to go about solving it - and that's when this occurred to me.
I realized when I was making my diagrams that the outline of these shapes has several interesting properties - which is when I thought "yeah right - someone has already done this - this must be around already".
So I googled "construct smallest polygon enclosing other polygons"
And found the other S.O. question.
Although you do have two seemingly dis-similar requirements:
two squares that are diagonal like a rectangle with triangles at each
end at 45 degrees - this is probably the most irregular/special
case... three or four squares joined to make a convex shape like a
Tetris(TM) piece 'L' piece
In the first example above, you say you want the "Convex Hull".
But in the second example above (the tetris pieces), you'd need the "Concave Hull".
Good luck.
Here are my diagrams:

I'm curious as to why you'd want to do that.
In any case, my intuition is that you want to find is called "concave hull", but I'm no expert.
Check out this question and see if that's what you want.
Edit: also this question on gis.stackexchange.com

how to "sort" polygons 3d?

I am still working on my "javascript 3d engine" (link inside stackoverflow).
at First, all my polygons were faces of cubes, so sorting them by average Z was working fine.
but now I've "evolved" and I want to draw my polygons (which may contain more than 4 vertices)
in the right order, namely, those who are close to the camera will be drawn last.
basically,
I know how to rotate them and "perspective"-ize them into 2D,
but don't know how to draw them in the right order.
just to clarify:
//my 3d shape = array of polygons
//polygon = array of vertices
//vertex = point with x,y,z
//rotation is around (0,0,0) and my view point is (0,0,something) I guess.
can anyone help?
p.s: some "catch phrases" I came up with, looking for the solution: z-buffering, ray casting (?!), plane equations, view vector, and so on - guess I need a simple to understand answer so that's why I asked this one. thanks.
p.s2: i don't mind too much about overlapping or intersecting polygons... so maybe the painter's algorthm indeed might be good. but: what is it exactly? how do I decide the distance of a polygon?? a polygon has many points.

The approach of sorting polygons and then drawing them bottom-to-top is called the "Painter's algorithm". Unfortunately the sorting step is in general an unsolvable problem, because it's possible for 3 polygons to overlap each other:
Thus there is not necessarily any polygon that is "on top". Alternate approaches such as using a Z buffer or BSP tree (which involves splitting polygons) don't suffer from this problem.

how do I decide the distance of a polygon?? a polygon has many points.
Painter's algorithm is the simplest to implement, but it works only in very simple cases because it assumes that there is only a single "distance" or z-value for each polygon (which you could approximate to be the average of z-values of all points in the polygon). Of course, this will produce wrong results if two polygons intersect each other.
In reality, there isn't a single distance value for a polygon -- each point on the surface of a polygon can be at a different distance from the viewer, so each point has its own "distance" or depth.
You already mentioned Z-buffering, and that is one way of doing this. I don't think you can implement this efficiently on a HTML canvas, but here's the general idea:
You need to maintain an additional canvas, the "z-buffer", where each pixel's colour represents the z-depth of the corresponding pixel on the main canvas.
To draw a polygon, you go through each point on its surface and draw only those points which are closer to the viewer than any previous objects, as indicated by the z-buffer.

I think you will have some ideas by investigating BSP tree ( binary spaces partition tree ), even if the algo will require to split some of your polygon in two.
Some example could be find here http://www.devmaster.net/articles/bsp-trees/ or by google for BSP tree. Posting some code as a reply is, in my opinion, not serious since is a complex topic.