We Keep Coding

Getting the coordinates of a point inside an overlapping rectangle

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.

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.

Find the bounding box of a rotated polygon with an axis of rotation

I've looked through some of the other close answers here but can't find any solutions to my problem.
I have a polygon that is rotated around an axis position, and I need to find the bounding box of the polygon. Essentially, the bounding box object should have the x and y position of the top left corner, and the width and height of the box itself. I am able to calculate the box of the polygon without rotation using this code, but it doesn't account for rotation too. The red square is the current bounding box without rotation, the green circle is the rotation axis, and the polygon is the polygon itself.
Ideally, I don't want to re-compute each vertex position on each call to get the bounding box, I want it to be in the math itself. Here's an example of the polygon and the bounding box without rotation: https://i.imgur.com/MSOM9Q1.mp4
Here is my current code for finding bounding box for the non-rotated polygon:
const minX = Math.min(...this.vertices.map((vertex) => vertex.x));
const minY = Math.min(...this.vertices.map((vertex) => vertex.y));
return {
x: minX + this.position.x,
y: minY + this.position.y,
width: Math.max(...this.vertices.map((vertex) => vertex.x)) - minX,
height: Math.max(...this.vertices.map((vertex) => vertex.y)) - minY
};
Polygon object structure:
The position is the center of the polygon
The rotationAxis is a vector relative to the center of the polygon (position)
The vertices array is a list of vectors relative to the center of the polygon
Bounding box structure:
What do I need to do calculate the bounding box of the rotated polygon?

if you do not want to recompute the axis aligned BBOX from all the vertexes of polygon after any rotation/translation then do it from OBB that is only 4 vertexes ...
Compute OBB of unrotated/untranslated polygon
this operation is slow but its done just once (unless your polygon is changing shape or size)
At any transformation of polygon
transform the OBB vertexes in the same way too. And then compute axis aligned BBOX from transformed OBB vertexes (just finding min/max coordinates as you do now).
This way you have to compute stuff from only 4 vertexes instead of Ntransforming the complexity from O(N) into O(1).
Also having OBB might come in handy later on as it can speed up some operation or even improve precision of collision testing etc ...

How to scale a mesh without changing the position?

I have in this scene 27 meshes, each of which has an associated number. The one with the highest number will have the scale 1. The rest will have a value less than 1 successively.
Next I want it to climb each of the loops accordingly. My problem occurs when the position of each mesh is changed.
Indeed it is scaled to the size that is due, but it changes position. I'm struggling as several screens are stacking.
I just need you to climb and stay in the same position as in this example:
US states are scaled, but still keeping their position. I think that they scale to the center of the figure.
I created the meshes (each called "municipios")
for(var s=0; s< features.features[x].geometry.coordinates[0].length; s=s+1){
geometria[x].vertices.push(new THREE.Vector3((((features.features[x].geometry.coordinates[0][s][0])+75.5)*10),(((features.features[x].geometry.coordinates[0][s][1])-5.5)*10),0));
}
forma_figura[x]=new THREE.Shape(geometria[x].vertices);
extrude_geometria[x]=new THREE.ExtrudeGeometry(forma_figura[x],datos_extrusion);
municipios[x] = new THREE.Mesh( extrude_geometria[x], materialExtrude[x] );
scene.add(municipios[x]);
// so I change the scale:
//formula is the value of scale. The biggest number has escale 1.
new TWEEN.Tween(municipios[x].scale).to({ x: formula, y: formula }, 1000).start();
//this ultimate line is the same: municipios[x].scale.set(formula,formula,formula);

Because the mesh position is not at its center, or whatever reference you want it to be : if you create a geometry with average vertices x component over 100, its visible position will be its real position plus (100,0,0). If you did not specify a position for the mesh ((0,0,0) by default), it will look being at (100,0,0) precisely. Scaling it by .5 for instance will result in the average position being at (100,0,0)*.5=(50,0,0), making the mesh apparently change its position.
What needs to be done is :
to substract the coordinates of the center from all the vertices. Vertices are inside the geometry, so once it is done, geometry.verticesNeedUpdate = true needs to be set.
then to add the coordinates of the center to the mesh, to compensate.
So the resulting mesh will be positionned at its center without having moved.
There are three different possibilities to define the center :
Three.js can center your mesh automatically based on the center of the bounding box with geometry.center() and THREE.GeometryUtils.center(geometry).
You can compute the centroid by looping through the vertices a first time to get their average coordinates.
You may neither want the center of the bouding box, nor the centroid, but a custom center. For example if you are scaling 'people' meshes and want their feet touch the ground at any scale : on the horizontal plane the center you want can be one of the two first, but its vertical coordinate must be the lowest vertical coordinate found (the very bottom of the feet).
Of course if your meshes are imported from a 3D editor software you can also do that inside it.

How to find new coordinates of rectangle after rotation

Y coordinate of rectangle after rotation on canvas. As shown in image the rectangle will be rotated on its center point axis. After rotation and canvas is restored I want to find the new X,Y coordinates like one shown in second image, before rotation points were 50,50 and after rotation they could be 62,40.
I found similar question so I took the images from there but that question is for some WPF and my requirement is JS. How to find coordinates of all corners of rectangle after rotation?

I made a simple JavaScript transformation class for this exact purpose.
Using it you can transform arbitrary points by a transform of your making.
When you transform the canvas, transform the Transform object in the same way and then call transformPoint(x, y) to get back the appropriate coordinates.
So in your case calling transformPoint(50, 50) would return about [62, 40], etc.
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
Here's an example: http://jsfiddle.net/b2fEX/