I have a shape, a polygon. I have the x,y coordinates of the edges of this polygon.
I'd like to draw 50 circles of 10 pixel radius randomly in this shape.
How do I randomly choose a position in my polygon?
I'm doing this in canvas with javascript, but I don't need any actual code. Maybe some math equations or some direction would be enough
You'd get the whole area of the polygon , apply a rand function on it and draw the circles, if you need to avoid intersection you could create a 'collision' function. Perhaps this helps:
Set: https://en.wikipedia.org/wiki/Set_%28mathematics%29
Calculating the area of a polygon: http://www.wikihow.com/Calculate-the-Area-of-a-Polygon
Related
I have a polygon (RED SQUARE), for simplicity its a square 100x100 with an offset of 100 from the top left. Assume the coordinate system top left is 0,0. So the coordinates for my simple square are: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100].
Now lets say I have another square (BLUE SQUARE), its a 100x100 square also, with the same 100 offset from the top left, but this square is rotated 45 degrees, so its cords are: (rounded) [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150].
How do I calculate the rotation of BLUE SQUARE (45 degrees) if I am given only the coordinates? Assuming I want the right angles to be straight (vertical or horizontal) in this coordinate system (Like RED SQAURE).
Worded another way... Given these coordinates: [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150] how do I calculate the rotation to apply to polygon so its coordinates are this: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100]
Here is a image demonstrating what I am talking about.
Image of both polygons with coordinates
The way you do this is to
calculate the angle between two adjacent points. The formula for this Math.atan2(x2-x1, y2-y1); This will give you the angle the quadrilateral is on.
Rotate the quadrilateral (from its center) by -angle (or by pi/2 - angle) and one side will be horizontal and one will be vertical
We have a polygon with an irregular form (in example, a city boundaries polygon).
We need to draw a "circle" with a defined radius (ie, 4km) bound to this polygon, in other words, if point at 4km fall outside the polygon, we need to keep the polygon point as point.
I've attached a sample image, the red border is our polygon, the blue circle is what we need to get. As you can see, the blu circle doesn't exceed the polygon boundaries.
Any help?
Use floodfill algorithm to make a set of points inside the shape, then paint points form the set which are not further form center of circle than its radius.
I have some scattered points for which I need to draw a rectangle / circle / polygon as a background. I have only coordinates (x,y) of selected points.what will be the maths formula to this? These points are inside canvas and I need to draw the outer shape for selected points in canvas itself. Tried with canvas rect .
Attaching one more image:
I have a large array of x and y coordinates from which I'm drawing an SVG polygon. For some points, the change in gradient of the line is very small, but I'm still getting a jagged "corner" where the two lines meet. How can I make it have smoothed out corners?
Preferably, this wouldn't kick in when the change in gradient is large (a 90 degree angle for example). So, one polygon could have some corners smoothed out, but where the angle is very different to 180 (180 = no change in gradient), the corners would remain sharp.
I have a problem with Raphael.Freetransform. I need the coordinates of the four corners of a rectangle. Unfortunately it is not possible to simply use the x,y,width and height attributes of the rectangle after a transformation, because they still have the data of before.
With rectangle.matrix.x(x,y) and rectangle.matrix.y(x,y) I can receive the real x and y coordinates of the top left corner and with rectangle.attrs.scale.x and rectangle.attrs.scale.y I can calculate the changed width and height of the rectangle.
Now I do need the center coordinates of the transformed and shifted rectangle to calculate with the help of the rotation angle the other corners, but unfortunately the rectangle.attrs.center.x function of Raphael.FreeTransform only returns the initial center of the rectangle.
So how can I get the coordinates of the center of the rotated and shifted rectangle?
Thank you in advance!
In the local coordinate system of the element, the center is at x+width/2, y+height/2, under the assumption that the rectangle goes from (x,y) to (x+width, y+height). So you have to find the coordinates in the global system using the matrix functions.