I have several intersecting semitransparent polygons, which divides the canvas on some number of other polygons of different colors. Here is an example with 3 triangles:
How I can calculate the number of areas of the different colors created by this intersection? In the presented picture there are 2 grey areas; 3 red; 3 green; 1 blue; 1 violet (red and blue triangles intersection); 1 olive (red and green triangles intersection); 1 teal blue (green and blue triangles intersection). Is it possible to adopt for this purpose Sutherland-Hodgman clipping algorithm that allowing to find the polygon that is the intersection between two arbitrary polygons?
Related
I have a sprite with alpha channel (first image, it has texture padding, to prevent texture bleeding, thats why it's "thicker"). The second picture is what I see when I render the sprite. The strange thing is the alpha blending works, because the light blue inside the circle is alpha blue, I see it is working. And the orange parts has also alpha colors at the edges (because of anti aliasing).
But how that white edge possible around the blue circle? The blue circle has alpha, I see it is working. I can't comprehend if the alpha blending working (for the alpha blue pixels), how that white edge around the blue circle is possible (that's the alpha orange pixels)?
How can I prevent rendering the white edges around the sprite's blue circle?
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
If I render the sprite to a HTML canvas works as expected, has alpha blending, no white edges around the circle.
The attached images has no alpha channel, but it's there in my app.
I found the solution.. It seems if I not turning off the alpha at the getContext, alpha not working properly.
const gl = canvas.getContext("webgl2", {
alpha: false,
});
Then I realized this way only works for NEAREST texture filtering, to work for LINEAR filtering and for MIPMAPs you also need:
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
INTRO
I have an array of X/Y coordinates. This array generates an irregular polygon inside a square area of 128 x 128 pixels. So the value of the coordinates can be only a number from 0 to 127 (0,0 is the left top corner - 127,127 is the right bottom corner).
I have virtually divided this area in 4 small areas of 64 x 64 pixel each.
QUESTION
I would like to calculate 4 percentages where each percentage tells me how much the polygon is covering one of the small areas.
To be clear, I've this screenshot:
A, B, C and D area the small areas.
The red dots are the X/Y coordinates I have in an array.
The green area is the polygon virtually generated by the coordinates.
So, how to calculate the percentages of the areas covered by the polygon? For example, looking the screenshot, I would like to obtain that the A area is 40% covered, the B area is 5% covered, the C area is 15% covered, the D area is 80% covered.
Does anyone know a Javascript script that can perform this kind of calculation? Honestly, I'm not good in geometry!
I have a Right Triangle with equal legs of 1 unit long rotated on 3 individual angles in the space like in the picture below:
As could be seen in the picture, the input I have are the angles 'a' and 'b' which rotates the triangle in the space and move it to orientation 1 which is "Red Triangle in the picture" (The triangle is still laying on the z-axis), then it rotates on one of it's Legs ('c' angle) and turns to the second orientation which is "The Green Triangle in the picture".
Also, the Right corner is located on (0,0,0).
Here is my question:
How in simple mathematics, can I get the 2 coordination (marked in blue in the picture) for the green triangle, in x, y and z?
I need it to be in simple mathematics so I can easily code it in JavaScript.
Never mind.
I just reviewed my triangular knowledge and solved the problem with the most basic functions including Sine, Cosine and ArcTangent!
Now I have the points in the space!
I have a number of 2D shapes that interlock with no gaps. I can extrude them to 3D without a bevel and they continue to fit together correctly. However if I add a bevel when extruding, the shapes grow which means they overlap each other when adjacent:
Here you can see that the top of red shape (translated +Z for clarity) is the same width as the gap in the blue shape but that the sides of the red shape have expanded.
Is there any way to achieve an inner bevel which doesn't change the shape's outer dimensions?
How to set stroke color in SVG polygon with different colors? for example we have quadrangle and have to set 2 stroke red and 2 stroke black
Draw 2 paths. Make one path the red parts of the polygon and the other the black.