Getting the coordinates of a point inside an overlapping rectangle - javascript

I have two colored rectangles, both being represented by a 2D array that directly corresponds to their coordinates(ex. [0][0] is the same as (0,0)). Things such as the width, height, and origin of each rectangle are known.
As of now, I want their colors to "blend" in the area they intersect. Detecting if a point is within both rectangles is easy enough, and I have the point's coordinates relative to the origin of my first rectangle as it is the one I am iterating through for color blend checking.
My problem is getting the point's coordinates relative to the second rectangle so I may get that rectangle's color at that point. Here is a visual example of what I mean.
Visual representation of the problem. The black dot is a point on both Rect 1 and 2.
Note that relative to the canvas, the top left corner of Rect 1 is always considered (0,0), and Rect 2 will always appear "on top" of Rect 1.
My idea is to do a simple math equation to get the X and Y coordinates of the point on Rect 2, but so far it has not worked out.

Related

How Place a convex polygon inside restricted area (rectangle) maximizing minimal distance among other polygons

I have a bounded area (x, y, width, height), and set of convex polygons [[[p1x1, p1y1], [p1x2, p1y2],...], [[p2x1, p2y1], [p2x2, p2y2],...]]
The polygons can be outside of the bounded area.
Then I have another convex polygon with a set of vertexes ([[Px1, Py1], [Px2, Py2],...]), I need to translate this polygon to maximizing the distance among all other polygons, but keeping this polygon inside the bonded area that I defined before.
The distance is assumed from the borders of polygon that I am placing, to the borders of other polygons (P1, P2, P3, .... PN)
I calculated the minimal distance among all polygons with Gilbert–Johnson–Keerthi distance algorithm. I need to maximize this value.
If there is no an easy solution, for now I can assume that all polygons are rotated rectangles.
I just need to find the correct algorithm, any suggestion is appreciated, but if you can provide a solution in javascript is better.
EDIT:
I draw a diagram to show the situation:
I need to move the red rectangle to maximize the minimal distance among all blue rectangles.
The red rectangle can be moved inside the black rectangle area.
The green line are all the minimum distances, and the red line is the minimum
among all.
I want end up in a situation like the second image.

Three.js random mesh placement without overlap

I have a series of circles which are randomly positioned on the scene (x,y). I was wondering if anyone knew of a solution to make sure that when randomly placed, the circles would not overlap.
In your loop when you place circles, take the randomized (x,y) coordinate, and get the distance to all of the existing circles (another loop) --> √((x1-x2)^2 + (y1-y2)^2), if the distance is greater than the radii of both circles added together for EVERY circle, then you can place the circle, otherwise they overlap.
A statement checking to each circle's co-ordinates plus and minus its radius does not come within the co-ordinates of another circle plus and minus its radius in both the x and y direction could work

Plot.ly - How can I get exact x / y pixel coordinates of a marker / point?

Right now, I'm struggling to convert the x and y axis position from a marker on a scatter graph to pixel position relative to the graph. My goal is to add an html element outside of the graph, and position it exactly above the point.
I checked this forum thread here: https://community.plot.ly/t/how-to-customize-plotly-tooltip/332. There, I found about the l2p() function, which seems to help a lot. The returned x/y pixel coordinate seems to be on the right path, but there's a huge offset between the returned coordinate and the real coordinate of the point on the screen. Here's a quick demo:
http://codepen.io/diegoliv/pen/NdWKWj
(check the position of the red dot on the screen, it always has the same offset for both x / y axis).
I tried this code with several data sources, and seems that the offset varies for all of them.
So, I'm suspecting that the returned result from l2p() and similar functions (like d2p()) are not relative to the root svg element, but is relative to something else.
How can we calculate this offset so we can use it to calculate the exact x/y pixel coordinates on the graph for the red dot? OR, is there any other better approaches to get these coordinates?

Drawing a point to point ellipse to allow painting in GUI

I'm implementing some basic annotation draw features, such as arrows. Now I'm a little bit stuck with ellipse.
The methods to draw an ellipse usually address using it's two diameters and eventually a rotation:
However I want to display the ellipse between the point user clicked and the one he's hovering, therefore I need a function that calculates diameters and rotation based on two points:
How would I do that? Can it be achieved with sufficient performance (as it renders during mouse-hovering)?
the steps you shoul follow:
get the angle of the line (from this post: get angle of a line from horizon)
rotate the canvas or at least the part you currently drawing (live demo here: http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial)
draw an ellipse in canvas (http://www.scienceprimer.com/draw-oval-html5-canvas)
the resulted ellipse will be transformed as described
It can be done in the same way that it is normally done, just using different math to calculate the shape. Without writing the entire code for you, you can start by having an event trigger when the user clicks the mouse button down. The function will copy the users x and y position based on the screen. Then there is a second function which will handle mouse movement. This function will keep track of the x and y coords of the mouse while it is in motion. The final function will be a mouse up event, when a user lifts their finger from the mouse button (assuming this is when the event should be finished). Using the initial and final position of the x and y coordinates, you can calculate the length of the line the user created. That line is the long diameter of the ellipse. Half this number for the large radius. Then use whatever ratio you are using to calculate the smaller radius from the larger one. Then create an ellipse based on these numbers.
For the math: Suppose your first point is x1,y1 and the end point is x2,y2
I'm also assuming that we have a line going from bottom-left to top-right
Distance between two points = sqrt((x2-x1)^2 + (y2-y1)^2) ---> (we will call this d1)
half of this is the length of the large radius ---> (we will call this r1)
Midpoint formula = ((x1+x2)/2 , (y1+y2)/2) ---> axis of rotation (we will call it (m1, m2))
distance from midpoint to end is just the radius
radius is now the hypotenuse of constructed plane, y2-m2 is height of right triangle.
Find the angles between midpoint and one end of larger radius - sin((y2-m2)/r1).
Angle of smaller radius is this angle + pi/4 radians.
calculate length of smaller radius based on ratio.

Raphael js: Scale and translate elements in a set proportionally

It seems that if you scale a set in raphael, it will scale the elements inside, but not translate them proportionally. So for instance if I have two squares next to each other in my set, and I scale the set up, the squares begin overlapping each other instead of the second square moving over as it resizes in order to stay right next to the first square. Is there a way to get this behavior in raphael?
As Ian mentioned, the key is to set the X,Y origin for the scale. By default, when you scale an element, it uses the geometric center of the element as the origin to scale from:
path.transform('S1.5'); // Scale 1.5x in both axis
So if you scale a set of objects, it will scale each individual element from it's own individual geometric center.
But you can optionally set an X and Y origin for the scale:
path.transform('S1.5,1.5,0,0'); // Scale 1.5 in X and 1.5 in Y, with origin set at the Paper's 0,0 as the origin.
Therefore, if you have a set of elements, and all of them are scaled using the Paper's 0,0 as their scale origin, then they will all scale proportionally to each other.

Categories