I'm trying to work on a game mechanic in c# that involves connecting vertices and forming polygons.
There can be any number of 5 - 30 vertices. Each vertice can be connected with a straight line(The lines cannot intersect). When the line closes a polygon the inside of the polygon is colored in a specific color. (You cannot close a polygon if there would be a point inside it during the closing)
For example two pictures below cannot happen:
However, this can:
What i am having trouble with is how to discern the polygon i have just closed and remembering it (in case i close a polygon that shares an edge with it). I can have multiple closed polygons until all lines that can be drawn from each vertice without breaching the intersect rule can be drawn.
I tried remembering lines that were drawn AB, ED, CD, CA etc.. and looking for a cycle, but when i close multiple polygons i need more information to know which polygon has already been closed. But I'm having difficulty figuring out how to do so.
For example (picture below), if the line n was drawn i want to find the polygon that was just made.
Does anyone have any idea how i might achieve this?
Any idea, help, insight would be helpfull.
Possibly a bit simplistic, but you can store a Dictionary<Face,List<Vertex>> which you can interrogate with linq.
You can simplify it by adding the reverse lookup. Dictionary<Vertex, List<Faces>>
Scenario 1: Path touches edges which are part of the same face
To test a new path DC you get the 2 vertices, D and C and find any faces which contain both. Start with D in the List<Vertex> and create the path to C.
Now do the same with C -> D.
You now have 2 paths, D -> E -> C and C -> A -> B -> D both form valid faces using D -> C so now you have to enumerate all the vertices and eliminate any faces which contain an existing vertex.
Scenario 2: Path touches an edge which are not part of any face
This path is open.
Scenario 3: Path touches eges which are part of different faces
Face1: ABDEC
Face2: AGF
Testing the path FC. F is part of Face2 C is part of Face1.
Find intersections: Face1.Face2 == A it's the only point in both lists, this time you get 2 sets of 2 paths.
FA
FGA
AC
ABDEC
To go from F to A, these paths multiply
FAC
FGAC
FABDEC
FGABDEC
These faces can now be tested for validity.
It might be easier for this an more complex scenarios (3 faces touching, faces sharing edges) to also keep a graph of all connected edges, this would give you an easier way to detect possible paths between 2 vertices.
Note that ANY path containing 3 vertices forms a possible face which can be checked for validity
When a player trys to claim a new edge you can:
check that the edge does not cross any of the existing claimed edges;
perform a breadth-first search of the graph formed by the claimed edges (which are not already on the boundary of two polygons) to see if there is an existing path starting at one end of the new edge which reaches the other end of the new edge - in which case a polygon will be formed; and
if a polygon has been formed:
check to see if there are any vertices inside the polygon - in which case the player cannot claim that edge.
Each edge has two sides. The interior of the formed polygon will be on one side of each edge along its boundary - you can track this and then any subsequent polygons which are also bounded by one (or more) of those edges must be on the other side of those edge(s) to be a valid selection within your game. If an edge has claimed polygons on both sides then it cannot be on the boundary of any subsequent polygons.
You may need to generate a convex hull around the points to exclude the exterior polygon so that when players are forming polygons they are restricted to the interior of the convex hull.
Related
I need to implement connections in the form of curved lines in C# (Unity). I would like to get the result as similar as possible to the implementation in Miro.com (see screenshot).
After attaching the curve, I calculate the path of the cubic Bezier curve. For this first segment, the anchor points and offsets from the objects it connects are used. There are no problems at this stage.
Problem: When dividing the curve into segments by clicking and dragging one of the blue points of the segment (see screenshot), it is split in two in the middle. At the junction of two new curves, a new interactive (movable) point is formed for which the tangent and coordinates of the control points are unknown. I need to find the position of these control points every time the position of the interactive points changes (white points in the picture below). Moreover, the curve should not drastically change its position when dividing, not form loops, have different lengths of control point vectors (I'm not sure here) and behave as adequately as possible (like on the board in Miro).
By control points I mean 2 invisible guide points for the Bezier segment.
In black I painted the known control points, and in red those that I need to find. (Pn - interactive points, Cn - control points)
The algorithms I have tried to find them give incorrect distances and directions of control points.
The following algorithms were tested:
Interpolation from Tacent - jumps of the curve when separating, inappropriate direction and amount of indentation of control points;
Chaikin's algorithm - curve jumps during separation, creates loops;
"Custom" interpolation based on guesses (takes into account the distance to the center of the segment between the start and end points of the segment, as well as the direction between the start and end points) - has all the same problems, but looks slightly better than those above.
I suspect the solution is to chordally interpolate the points using a Catmull-Rom spline and translate the result to points for a Bezier curve. However, there are still problems with implementation.
The curves from 3DMax also look very similar. In their documentation, I found only a mention of the parametric curve.
Methods that I did not use (or did not work):
Catmull-Rom interpolation;
B-spline interpolation;
Hermitian interpolation;
De Casteljau's algorithm (although it seems not for this)
I would be immensely grateful for any help, but I ask for as much detail as possible.
Find helpful sources to understand bezier curves here and here.
To do what you want, I would give a try to the Catmull-Rom approach which I believe is much more simple than Bezier's, which is the one used in the itween asset, that is free, and you got plenty of funtionality implemented.
If you want to stick to the bezier curves and finding the control points, I will tell you what I would do to find them.
For the case of 2 control point bezier curve:
P = (1-t)P1 + tP2
To get to know the control points P1(x1,y1) and P2(x2,y2), you need to apply the equation in a known point of your curve. Take into account that the 2D equation is vectorial, so each points provides 2 equations one for x and one for y, and you got 4 unknows, x and y for each point.
So for the first node of the curve (t=0), you would have:
Px = (1-0)P1x + 0*P2x
Py = (1-0)P1y + 0*P2y
For the last point (t=1)
Px = (1-1)P1x + 1*P2x
Py = (1-1)P1y + 1*P2y
With these 4 equations I would try to achieve the control points P1 and P2. You can do it with t=0 and t=1 which are the supposed points you know of your curve and the ones that simplify the math due to the t values, but you should be able to use any as long as you know the points coords in the curve for determined t.
If the curve is a 3 control point bezier, you would need 6 equations for the 3 control points and so on.
I think that the best approach is to compound the curve of cuadratic curves composition, and calculate the control points for each chunk, but I am not sure about this.
Once maths are understood and control points achieved, In case that was successful I would try to implement that in the code.
I have some photos of white pages with some black points drawn on, like this:
photo (the points aren't very circular, I can draw them better),
and I would find the coordinates of these points.
I can binarize the images (the previous photo binarized: image), but how can I find the coordinates of these black points? I need only the coordinates of one pixel for each point, the approximate center.
This is for a school assignment.
Since its for school work I will only provide you with a high level algorithm.
Since the background is guarantee to be white, you are in luck.
First you need to define a threshold on the level black which you want to consider as the black dot's color.
#ffffff is pure white and #000000 is pure black. I would suggest some where like #383838 to be your threshold.
Then you make a two dimensional bool array to keep track of which pixel you have visited already.
Now we can start looking at the picture.
You read the pixel one at the time horizontally and see if the pixel is > threshold. If yes then you do a DFS or BFS to find the entire area where the pixel's neighbor is also > threshold.
During the process you will be marking the bool array we created earlier to indicate that you have already visited the pixel.
since its a circle point you can just take the min, max of x and y coordinate and calculate the center point.
Once you are done with one point you would keep looping thru the picture's pixel and find the points that you have not visited (false in the bool array)
Since the points you have on the photo contains some small dots on the edge which is not connected to the large point, you might have to do some math to see if the radius is > some number to consider that a valid point. Or instead of a radius 1 neighbor you do a 5 - 10 pixel neighbor BFS/DFS to include the ones that are really close to the main point.
The basics for processing image data can be found in other questions, so I won't go into deeper detail about that, but for the threshold check specifically, I'd do it by gathering the red, green and blue bytes of each pixel (as indicated in the answer I linked), and then just combine them to a Color c = Color.FromArgb(r,g,b) and testing that to be "dark" using c.GetBrightness() < brightnessThreshold. A value of 0.4 was a good threshold for your test image.
You should store the result of this threshold detection in an array in which each item is a value that indicates whether the threshold check passed or failed. This means you can use something as simple as a two-dimensional Boolean array with the original image's height and width.
If you already have methods of doing all that, all the better. Just make sure you got some kind of array in which you can easily look up the result of that binarization. If the method you have gives you the result as image, you will be more likely to end up with a simple one-dimensional byte array, but then your lookups will simply be of a format like imagedata[y * stride + x]. This is functionally identical to how internal lookups in a two-dimensional array happen, so it won't be any less efficient.
Now, the real stuff in here, as I said in my comment, would be an algorithm to detect which pixels should be grouped together to one "blob".
The general usage of this algorithm is to loop over every single pixel on the image, then check if A) it cleared the threshold, and B) it isn't already in one of your existing detected blobs. If the pixel qualifies, generate a new list of all threshold-passed pixels connected to this one, and add that new list to your list of detected blobs. I used the Point class to collect coordinates, making each of my blobs a List<Point>, and my collection of blobs a List<List<Point>>.
As for the algorithm itself, what you do is make two collections of points. One is the full collection of neighbouring points you're building up (the points list), the other is the current edge you're scanning (the current edge list). The current edge list will start out containing your origin point, and the following steps will loop as long as there are items in your current edge list:
Add all items from the current edge list into the full points list.
Make a new collection for your next edge (the next edge list).
For each point in your current edge list, get a list of its directly neighbouring points (excluding any that would fall outside the image bounds), and check for all of these points if they clear the threshold, and if they are not already in either the points list or the next edge list. Add the points that pass the checks to the next edge list.
After this loop through the current edge list ends, replace the original current edge list by the next edge list.
...and, as I said, loop these steps as long as your current edge list after this last step is not empty.
This will create an edge that expands until it matches all threshold-clearing pixels, and will add them all to the list. Eventually, as all neighbouring pixels end up in the main list, the new generated edge list will become empty, and the algorithm will end. Then you add your new points list to the list of blobs, and any pixels you loop over after that can be detected as already being in those blobs, so the algorithm is not repeated for them.
There are two ways of doing the neighbouring points; you either get the four points around it, or all eight. The difference is that using four will not make the algorithm do diagonal jumps, while using eight will. (An added effect is that one causes the algorithm to expand in a diamond shape, while the other expands in a square.) Since you seem to have some stray pixels around your blobs, I advise you to get all eight.
As Steve pointed out in his answer, a very quick way of doing checks to see if a point is present in a collection is to create a two-dimensional Boolean array with the dimensions of the image, e.g. Boolean[,] inBlob = new Boolean[height, width];, which you keep synchronized with the actual points list. So whenever you add a point, you also mark the [y, x] position in the Boolean array as true. This will make rather heavy checks of the if (collection.contains(point)) type as simple as if (inBlob[y,x]), which requires no iterations at all.
I had a List<Boolean[,]> inBlobs which I kept synced with the List<List<Point>> blobs I built, and in the expanding-edge algorithm I kept such a Boolean[,] for both the next edge list and the points list (the latter of which was added to inBlobs at the end).
As I commented, once you have your blobs, just loop over the points inside them per blob and get the minimums and maximums for both X and Y, so you end up with the boundaries of the blob. Then just take the averages of those to get the center of the blob.
Extras:
If all your dots are guaranteed to be a significant distance apart, a very easy way to get rid of floating edge pixels is to take the edge boundaries of each blob, expand them all by a certain threshold (I took 2 pixels for that), and then loop over these rectangles and check if any intersect, and merge those that do. The Rectangle class has both an IntersectsWith() for easy checks, and a static Rectangle.Inflate for increasing a rectangle's size.
You can optimise the memory usage of the fill method by only storing the edge points (threshold-matching points with non-matching neighbours in any of the four main directions) in the main list. The final boundaries, and thus the center, will remain the same. The important thing to remember then is that, while you exclude a bunch of points from the blob list, you should mark all of them in the Boolean[,] array that's used for checking the already-processed pixels. This doesn't take up any extra memory anyway.
The full algorithm, including optimisations, in action on your photo, using 0.4 as brightness threshold:
Blue are the detected blobs, red is the detected outline (by using the memory-optimised method), and the single green pixels indicate the center points of all blobs.
[Edit]
Since it's been almost a year since I posted this, I guess I might as well link to the implementation I made of this. I actually managed to use it myself about a month after I wrote it, when recreating the video compression algorithm of an old DOS game which used chunked up diff frames.
I have some trouble.
I need generate walls by path.
For example. I have vectors A, B, C. And I need to find vectors D, E, F for creating volumetric walls around ABC.
Firstly, I going on easiest way - scaling ABC (with finding a centroid).
But it's not a correct solution, b/c I need to set correct width of walls, and I need to find some additional points like this (point J and point K with JK perpendicular AB)
I will be gratefull for any help!
You will need to find out normals to the outer edge of the polygon.
There could be two approaches.
One is using edge normals, another is vertex normals.
On edge normals you will need to find out what direction is outside (depends on closed / open)
If you use vertex normals, you will only need to translate the vertex to the new position. Finding out a good vertex normal is the main problem.
This is known as offsetting. More details can be found below.
An algorithm for inflating/deflating (offsetting, buffering) polygons
There are a set of points S in n dimensional space. I want to test a given point P is inside the region of S.
Since this is n dimensional space, points should form a polytope. Then the question is to determine whether a given point is inside the convex polytope.
I find this for 3-D polyhedrons but C++ libraries were not meaningful and I couldn't find their definitions. Besides it doesn't check the boundary conditions.
Another algorithm I found is for 2D polygons. I couldn't modify it since it is not clearly written. I can extend it of course but I'm not an expert in this domain so it's better to ask first.
Finally I found an algorithm for triangulation for concave polygon but I don't think it fits to my case.
Not sure what exactly you are asking, it seems you have several problems. First to compute Convex Hull of a point set. In 2d you can use BOOST or CGAL. For 3d CGAL. Not sure if they handle higher dimensions. For interior check, one way is (as the link you posted states) to check the ray intersection from the point of query to a known exterior point. The point of intersection of the ray (for interior point) should lie on a plane with normal pointing in the same direction as your ray. Meaning you are exiting the volume. A more efficient way would be to use something like a Binary Space Partitioning Tree (BSP). There are many links with tutorials on how that works.
From your description, you have established that S is convex. If that is the case you apply the hyperplane separation theorem (http://en.wikipedia.org/wiki/Hyperplane_separation_theorem)
Find the point Q in S that is closest to P.
Construct a hyperplane H that lies on Q and is normal to P-Q
Test all the points in S on which side of H are on.
If they are all either on the plane or on the opposite side of H compared to P, then P is either on or outside of S. If some points are in front of H, and others are behind H, then P is inside S.
[edit: I tried to rewrote my question a bit because it seems, that nobody understands what I want... and I thought, that it is a hard algorithm only for me :) ]
Problem I am facing is joining of individual polygons. Each is a 4-point polygon. The final result is then a merge / union of two polygons.
Following image shows one version of possible result (results may vary, because that black filled part can be different for each result).
I start with something like:
Polygon one = [A,B,C,D]; // (A/B/C/D) might look like : new Point {x = 10, y = 15}
Polygon two = [E,F,G,H];
And I need an algorithm for calculating union of these two sets, so I will get result like:
Polygon total = [I,J,K,L,M,N]; // = new points
I don't have to visualize it (even when I do..), I just need the set of points defining new polygon (union of those two), because my final result will be a centroid of that merged polygon.
I already have algorithm to calculate centroid based on set of input points. But I need to get the right points first.
So far, I have found mentions about convex-hull algorithm, but I am afraid that it would generate following polygon (which is wrong):
EDIT:
So different way, how to look at this problem:
I have a program, that is able to work with objects, that are represented by 4 points. Each point has two attributes (x coordinate, y coordinate).
Then the program is able to draw lines between these points. These lines will then look like a square, rectangle or polygon.. this result depends on given coordinates, but I know, that I will be always using points, that will generate polygons. Once the points are connected, the program is able to fill this connected area. Once this is drawn, you can see following image:
BUT: The program doesn't know, that he just made a polygon. He only knows, that he got 4 points from me, he connected them and filled them.
Then I have second object (=polygon), which is defined by another set of points (different coordinates). Program again doesn't know that he's creating a filled polygon.. he just did some operations with 4 given points. Result in this case is another polygon:
Now, we just draw two polygons at display.. and we gave them such coordinates, that they overlap each other. The result looks like this (considering only the filled area):
My program just draw two polygons. Fine. You can see at your screen only one polygon (because there are two overlaping = they look like one piece) and I need to count the centroid of that ONE piece.
I already have an algorithm, that will accept a set of points (representing a points forming polygon) and counting a centroid from these points. But I can't use the algorithm now, because I can't give him the needed points, because I do not know them.
Here are the points, that I want as a result:
So my algorithm should start with points A,B,C,D,E,F,G,H and he should give me points I,J,K,L,M,N as a result.
Summary: I need to count a centroid of polygon which is result of union/merge of two individual polygons, that are overlapping.
And I thought, that union of two polygons would be enough to explain :)
Here http://www.codeproject.com/KB/recipes/Wykobi.aspx is a collection of Computational Geometry algorithms. At least you can start from there.