Preventing two draggable circles from overlapping when they intersect - uiimageview

Ive looked everywhere i could for what i am guessing has a simple solution. But i am a new programmer and am having a bit of trouble. I have a few draggable image view circles in my view and i want to prevent any overlapping between the image views. Im not looking for any serious collision solutions(friction, vectors, etc...), just something to stop the image views from going any further once they make contact with each other.
Any guidance to the solution is appreciated. Thanks.

That should just be a simple comparison of location and radii...
When a drag is attempted, compute the distance between any two circles' center points (using the new location), and if that's less than the sum of the radii, they overlap. Pseudocode:
onMoveAttempted()
{
distance = sqrt (((moving(x) - existingcircle(x))^2) + ((moving(y) - existingcircle(y))^2))
if (distance < (radius of moving circle + radius of existing circle)
then
prohibit the move, as the circles would overlap
end if
}

Related

How does one place predefined circles on a grid so that they do not overlap?

I am making an app where predefined circles will be drawn on the screen. Before placing the circle, I know how big the radius is. I am struggling to place the circles so that they do not overlap. In the simplest terms, I need a function that takes in radiuses and returns a list of (x, y) coordinates where they do not overlap. It would also be helpful to be able to prioritize some circles towards the origin of the plane.
I have found algorithms that can place random circles with ought them overlapping, but struggle to apply them to predefined circles in an efficient way.
Can someone point me in the right direction? Thanks!

Point within multiple spheres

The above graphic is meant to more efficiently display my problem than I would ever hope to be able to explain with words.
As you can see, there is an n-number ( 3 in this case ) of spheres ( displayed as circles for simplicity ) of varying sizes, and a point ( the red one ) which technically belongs to all 3 of them at once.
However, a point can only belong to a single sphere at any one time.
What I'm trying to find is an efficient algorithm, which will allow me to determine which of these spheres the point actually belongs to. The end result, I'm hoping, will look a little something like this:
Here, I've used the radial lines to "clip" the circles in the graphic where appropriate, and it is clear now that the red dot belongs to the large left-most circle.
Any help would be appreciated! :D
Not an answer, just a comment.
If I am right, the loci of the points equidistant to two spheres in the reduced sense (proportionally to the radius) are themselves on a sphere (that can degenerate to a plane).
The diagram is as below:
To check if a point lies within a circle, define the circle by its center and a radius and check if the distance of the point to the center is less than the radius.
To find which circle a point belongs to (in the manner indicated by your diagram), compute the power of the point as the distance of the point to the circle center point, squared, minus the square of the circle radius:
power = distance2 - radius2
If the result is less than 0, it's inside that circle. It belongs to the circle with the smallest power.

Algorithm for a "Blob" Border

I have several 2 dimensional circles that I want to draw a border around. I've done this using a convex hull before, but my goal is to make the border almost like a surrounding "blob". I attached a picture to show what I mean.
Essentially, I want the border to outline the circles, and be pulled slightly into the middle of the area if no circles are present. The center shape shows my current train of thought -- create normal lines for each circle, and somehow merge them into a complete shape.
Summed up, I have 2 questions:
1. Are there any existing algorithms to do this?
2. If not, are there any algorithms that would help me merge the circle outlines into a single larger path?
Thank you!
"Everything You Always Wanted to Know About Alpha Shapes But Were Afraid to Ask" is for you http://cgm.cs.mcgill.ca/~godfried/teaching/projects97/belair/alpha.html
One way to get this border could be to simply compute the distance to the centers of circles: for a given point this distance is the minimum of the distances from this point to all the centers of the given circles. Then sample this distance function over a regular grid. And finally extract the f-level of this function as a collection of polylines with an isocurve extraction algorithm (like Marching Squares). f should be the radius of the circles augmented with the desired margin.

How to find collision center of two rectangles? Rects can be rotated

I've just implemented collision detection using SAT and this article as reference to my implementation. The detection is working as expected but I need to know where both rectangles are colliding.
I need to find the center of the intersection, the black point on the image above (but I don't have the intersection area neither). I've found some articles about this but they all involve avoiding the overlap or some kind of velocity, I don't need this.
The information I've about the rectangles are the four points that represents them, the upper right, upper left, lower right and lower left coordinates. I'm trying to find an algorithm that can give me the intersection of these points.
I just need to put a image on top of it. Like two cars crashed so I put an image on top of the collision center. Any ideas?
There is another way of doing this: finding the center of mass of the collision area by sampling points.
Create the following function:
bool IsPointInsideRectangle(Rectangle r, Point p);
Define a search rectangle as:
TopLeft = (MIN(x), MAX(y))
TopRight = (MAX(x), MAX(y))
LowerLeft = (MIN(x), MIN(y))
LowerRight = (MAX(x), MIN(y))
Where x and y are the coordinates of both rectangles.
You will now define a step for dividing the search area like a mesh. I suggest you use AVG(W,H)/2 where W and H are the width and height of the search area.
Then, you iterate on the mesh points finding for each one if it is inside the collition area:
IsPointInsideRectangle(rectangle1, point) AND IsPointInsideRectangle(rectangle2, point)
Define:
Xi : the ith partition of the mesh in X axis.
CXi: the count of mesh points that are inside the collision area for Xi.
Then:
And you can do the same thing with Y off course. Here is an ilustrative example of this approach:
You need to do the intersection of the boundaries of the boxes using the line to line intersection equation/algorithm.
http://en.wikipedia.org/wiki/Line-line_intersection
Once you have the points that cross you might be ok with the average of those points or the center given a particular direction possibly. The middle is a little vague in the question.
Edit: also in addition to this you need to work out if any of the corners of either of the two rectangles are inside the other (this should be easy enough to work out, even from the intersections). This should be added in with the intersections when calculating the "average" center point.
This one's tricky because irregular polygons have no defined center. Since your polygons are (in the case of rectangles) guaranteed to be convex, you can probably find the corners of the polygon that comprises the collision (which can include corners of the original shapes or intersections of the edges) and average them to get ... something. It will probably be vaguely close to where you would expect the "center" to be, and for regular polygons it would probably match exactly, but whether it would mean anything mathematically is a bit of a different story.
I've been fiddling mathematically and come up with the following, which solves the smoothness problem when points appear and disappear (as can happen when the movement of a hitbox causes a rectangle to become a triangle or vice versa). Without this bit of extra, adding and removing corners will cause the centroid to jump.
Here, take this fooplot.
The plot illustrates 2 rectangles, R and B (for Red and Blue). The intersection sweeps out an area G (for Green). The Unweighted and Weighted Centers (both Purple) are calculated via the following methods:
(0.225, -0.45): Average of corners of G
(0.2077, -0.473): Average of weighted corners of G
A weighted corner of a polygon is defined as the coordinates of the corner, weighted by the sin of the angle of the corner.
This polygon has two 90 degree angles, one 59.03 degree angle, and one 120.96 degree angle. (Both of the non-right angles have the same sine, sin(Ɵ) = 0.8574929...
The coordinates of the weighted center are thus:
( (sin(Ɵ) * (0.3 + 0.6) + 1 - 1) / (2 + 2 * sin(Ɵ)), // x
(sin(Ɵ) * (1.3 - 1.6) + 0 - 1.5) / (2 + 2 * sin(Ɵ)) ) // y
= (0.2077, -0.473)
With the provided example, the difference isn't very noticeable, but if the 4gon were much closer to a 3gon, there would be a significant deviation.
If you don't need to know the actual coordinates of the region, you could make two CALayers whose frames are the rectangles, and use one to mask the other. Then, if you set an image in the one being masked, it will only show up in the area where they overlap.

How to fill a rectangular area with non-intersecting rotated rectangles?

I try to create a scene for physical simulation. The scene consists of rectangular floes floating in a rectangular pond. Something like this:
So I need to fill a rectangular area with non-intersecting rotated rectangles with widths and heights in a specified range. I don't need to find an optimal coverage of the area. The goal is just to generate floes of different size without intersections.
And I'd like to get a solution without any dynamics, only using collision detection algorithms.
You could consider simulating a collection of boxes falling into a square bucket and saving the positions of all the boxes once they come to rest.
box2d is an open source 2D physics library that can do this for you - you might recognise it as the physics engine behind Angry Birds and umpteen-million Flash games.
There is what I would do:
Suppose the length of the rectangles are between [MaxSize MinSize]
r <- MaxSize
do{
Trying adding non-intersecting circles to the area with radius r and random center (x,y). We use circle instead of rectangle because intersection detecting for circles are easier than rectangles. e.g. if distance(x,y,x',y')<r+r' then we are good.
If adding circle failed{
r--;
if r< MinSize break;
}
}
Now you will have a plane full of on intersecting squares. There will be gaps because we were using circles as intersection detection. If this is not good enough for you, grow the squares to rectangles. You can do this by checking all points against a certain border and decide how much you can grow it.
To model solid (ie non-intersecting) objects, you could use a physics engine. As it happens I just the other day read Farseer tutorial for the absolute beginners, which includes a video depicting almost exactly your requirement. Farseer is a .NET version of box2d, which you may have heard of.

Resources