We Keep Coding

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.

Drawing polygons like triangles and squares on layers instead of circles in MapBox GL JS

I am using "mapbox-gl": "^1.3.0"
So, in mapbox GL JS,
I would like to know if there is a way to draw polygons such as triangles and squares like circles on layers.
But the problem is I have to do this in a coordinate that is of the geoJson type: Point not Polygons.
{"type":"Point","coordinates":[307170.943,6679032.568]}
There was an example in the documentation to do this when with "type": "Polygon".
https://docs.mapbox.com/mapbox-gl-js/example/fill-pattern/
But I want to do it with Points just like how we are able to draw circles using
{
'type': 'circle'
}
in the place of points.
Note: I tried adding a sprite and plotted an icon using "icon-image" like this:
"layout": {
"icon-image":"airport-15" ,
"icon-size": 1
}
But the problem is I have more than 100 k points like this. So, rendering so many images is causing the map to lag too much. This doesn't happen when i use circles as i believe drawing is smoother than using images.
Any help would be appreciated.

Using a symbol is probably best. The lag could be if you're avoiding overlaps. Check out the style spec and change the property to allow overlaps should speed it up. Make sure you only have one source and one layer.

How it is possible to get rid of spurious artifacts of Shadow Mapping?

Spurious artifacts in case of creation of shadows through shadow mapping.
I can't understand why many shadows are drawn, and from where they originate?
example: example

It looks like your shadow map is covering only a fraction of the scene, and is being tiled (repeated) to cover the rest. Change the wrapping mode for the shadow map to GL_CLAMP_TO_BORDER:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
And set your border color to 1.0f or 0.0f, depending on whether you want things outside the shadow map to be lit or unlit:
GLfloat borderColor[] = { 1.0f, 1.0f, 1.0f, 1.0f };
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);

I think you mean shadow acne. when you are rendering a litten surface, you calculate the surface point's distance from the light, and compare it with the distance read from the shadow map. Now ideally these should be equal if the surface is lit, but due to float precision errors there may be slight inaccuracies resulting in shadows where there shouldnt be any.
Solution is to apply an offset, so add a small number like 0.001 to the distance you read from the shadow map. The actual offset should be dependant on the world's scale.

Make sure that the farplane of the shadow camera is high enough!

Rotate a Two.js object in its position

I have a large circle with smaller ones inside made using two.js.
My problem is that these two do not rotate in their own place but in the top left axis.
I want the group of circles (circlesGroup) rotate only inside the large one in a static position. The circlesGroup and the large circle are grouped together as rotatoGroup.
two.bind('update', function(frameCount, timeDelta) {
circlesGroup.rotation = frameCount / 120;
});
two.bind('update', function(frameCount, timeDelta) {
rotatoGroup.rotation = frameCount / 60;
});
The whole code is in CodePen.

All visible shapes when invoked with two.make... ( circles, rectangles, polygons, and lines ) are oriented in the center like this Adobe Illustrator example:
When this shape's translation, rotation, or scale change those changes will be reflected as transformations about the center of the shape.
Two.Groups however do not behave this way. Think of them as display-less rectangles. They're origin, i.e group.translation vector, always begins at (0, 0). In your case you can deal with this by normalizing the translation your defining on all your circles.
Example 1: Predefined in normalized space
In this codepen example we're defining the position of all the circles around -100, 100, effectively half the radius in both positive-and-negative x-and-y directions. Once we've defined the circles within these constraints we can move the whole group with group.translation.set to place it in the center of the screen. Now when the circles rotate they are perceived as rotating around themselves.
Example 2: Normalizing after the fact
In this codepen example we're working with what we already have. A Two.Group that contains all of our shapes ( the bigger circle as well as the array of the smaller circles ). By using the method group.center(); ( line 31 ) we can normalize the children of the group to be around (0, 0). We can then change the translation of the group in order to be in the desired position.
N.B: This example is a bit complicated because it invokes underscore's defer method which forces the centering of the group after all the changes have been registered. I'm in the process of fixing this.

Canvas coordinates in Fabric.js have offset

I just started with fabric.js and I have a (probably beginner) error:
I am using fabric with jquery with the following code:
$(document).ready(function () {
canvas = new fabric.StaticCanvas('scroller');
canvas.add(
new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })
);
});
This code should draw a 140x100 Rectangle on the canvas.
Sadly, only a quarter of the Rectangle appears.
If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas.
So it seems, that the canvas origin is not at 0/0, but at sth. higher.
Does someone know how to fix this or what I am doing wrong?
Thanks in advance,
McFarlane

Here is a jsfiddle link with some examples http://jsfiddle.net/pukster/sdQ7U/2/
My guess is that fabric.js calculates everything from the origin (middle point) since it is drawing exactly one quarter of a rectangle even with a canvas 10 times the size of the rectangle. My guess is that top and left actually refer to the origin and not the top and left sides of the imaginary bounding box. Trouble is there is very little documentation on fabricjs. Is there any reason you are using fabricjs and not easeljs
EDIT Here's the same fiddle but with squares instead of rectangles (it is more clear) http://jsfiddle.net/pukster/sdQ7U/3/
EDIT OK I am now almost absolutely certain that fabric.js uses the center as the top/left. I ripped their example off of their site and overlayed it with the transparent couterpart to those shapes had they been coded in pure canvas http://jsfiddle.net/pukster/uathZ/2/ (blue border is the limit of the canvas element).
What you see is that the boxes are exactly offset by half but the circle (I only drew a semi circle otherwise it would not have been discernable) is perfectly overlapped. This is b/c in HTML Canvas, the circle coordinates (x,y) refer to the origin and not the top left. I did not bother with the triangle b/c my trigonometry is a bit rusty. I personally think it's misleading to use the terms top and left, when x and y would have been more representative and shorter.

Yes, this is highly unexpected and even more undocumented.
Workaround:
Set
originX: "left"
originY: "top"
for each created object.
edit: or use kangax simpler solution in the comment below.

I want to comment but lack the reputation to do so. So anyway, here is what happens when I do the following:
fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";
The shape gets rendered fine but when I select it for resizing or moving, it gets offset to a different location. The best approach seems to be to set the coordinates for every object separately using the set() method.