enter image description here
I am using particle js for circle moving but circles are overlapping to each other. how can i able to move circles but not overlap.
Related
I am currently trying to draw a circle of a certain radius at the origin of my chart.
One of the ways I found to do that is to use the Circle component of React Native Svg (I don't know why, I wasn't able to use the one provided by Victory) but then its size and location are set in pixels. I also found that I could use a VictoryScatter and add a single data point at (0, 0), but then it's the same problem again. I also thought of computing the points of the circle with a specified resolution and then use a VictoryLine, but this component only goes from left to right.
Is there a way to draw a circle of a certain size in a chart ? Preferably only the border, but if it's filled it's okay too.
If that's not possible, is there an other library I could use to achieve this ?
I am working on react native application. I have set of array coordinates and we draw a direction arrow by using bearing angle calculations in Polyline paths. The problem is direction arrow collided with each other and Polyline path is not visible at all. I need to show markers in a specific distance. Normal distance calculation works fine in zoom out mode, but if I zoom in the map means all markers are collided with each other. I need to remove some markers while zoom in. Can some one help me how it can be sorted out.
I tried distance between first and last coordinates of the visible markers. and applied that value with already existing distance coordinate but it is not working.
I'm given a 2d binary array. Some of the dots are on, some are off (1 for on, 0 for off).
I know that the "on" dots were created before by putting circles on the 2d array.
The circles are of the same radius, and each time a circle was put, the dots inside it changed to 1 instead of 0.
All the circles are within the edges of the array and dot touching the edge of the circle is lit.
An illustration can be seen below. The circles are ordered randomly and may touch.
Notice that the dots inside the circles are 1 and all other are 0.
Can you find how many circles were there just by looking at the 2d array without the circles after I had put them? Is this problem solvable?
My attempt at solving this problem was:
First, I assumed that my circles can contain dots as in the figure (radius big enough to contain 4 to 7 dots.
Then I tried to categorize what possible orientation can the circles have, however there are just a lot.
I would like to find these two circles. Notice that they can cannot overlap but can be just one near the other.
If your circles don't overlap, you can use connected component labeling algorithm and get number of circles:
NCircles = (NComponents - 1) / 2
(if inner empty regions of circles and outer empty place form separate components)
Edit: with these dots it is worth to select only connected conponents with size in some range to exclude dots and other false regions.
Simple kind of CCL suitable for this picture:
scan image until black pixel is met
do flood fill while possible, keep bounding box of scanned black pixels
if box corresponds to circle size, count it
scan further from any unmarked pixel
One more possible approach: you can try Hough algorithm for circles of predefined radius.
For example, OpenCV library contains labeling function that works with images and arrays (and Hough transform too)
Why not just generate randomly generate circles and count them?
When you insert a new circle, just check if they do not overlap.
And stop inserting new circles after you tried a certain times and failed to insert a new circle. With this last value you probably need to play a bit.
You can probably repeat this a couple of times and average the result like that.
What I am doing is a pick program. There are many triangles and I want select the front and visible ones by a rectangular region. The main method is described below.
there are a lot of triangles and each triangle has its own color.
draw all the triangles to a frame buffer.
read the color of pixel in frame buffer and based on the color, we know which triangles are selected.
The problem is that there are some tiny triangles can not be displayed in the final frame buffer. Just like the green triangle in the picture. I think the triangle is too tiny and ignored by the graphic card.
My question is how to display the tiny triangles in the final frame buffer? or how to know which triangles are ignored by the graphic card?
Triangles are not skipped based on their size, but if a pixel center does not fall inside or lie on the top or left edge (this is referred to as coverage testing) they do not generate any fragments during rasterization.
That does mean that certain really small triangles are never rasterized, but it is not entirely because of their size, just that their position is such that they do not satisfy pixel coverage.
Take a moment to examine the following diagram from the DirectX API documentation. Because of the size and position of the the triangle I have circled in red, this triangle does not satisfy coverage for any pixels (I have illustrated the left edge of the triangle in green) and thus never shows up on screen despite having a tangible surface area.
If the triangle highlighted were moved about a half-pixel in any direction it would cover at least one pixel. You still would not know it was a triangle, because it would show up as a single pixel, but it would at least be pickable.
Solving this problem will require you to ditch color picking altogether. Multisample rasterization can fix the coverage issue for small triangles, but it will compute pixel colors as the average of all samples and that will break color picking.
Your only viable solution is to do point inside triangle testing instead of relying on rasterization. In fact, the typical alternative to color picking is to cast a ray from your eye position through the far clipping plane and test for intersection against all objects in the scene.
The usability aspect of what you seem to be doing seems somewhat questionable to me. I doubt that most users would expect a triangle to be pickable if it's so small that they can't even see it. The most obvious solution is that you let the user zoom in if they really need to selectively pick such small details.
On the part that can actually be answered on a technical level: To find out if triangles produced any visible pixels/fragments/samples, you can use queries. If you want to count the pixels for n "objects" (which can be triangles), you would first generate the necessary query object names:
GLuint queryIds[n]; // probably dynamically allocated in real code
glGenQueries(n, queryIds);
Then bracket the rendering of each object with glBeginQuery()/glEndQuery():
loop over objects
glBeginQuery(GL_SAMPLES_PASSED, queryIds[i]);
// draw object
glEndQuery(GL_SAMPLES_PASSED);
Then at the end, you can get all the results:
loop over objects
GLint pixelCount = 0;
glGetQueryObjectiv(queryIds[i], GL_QUERY_RESULT, &pixelCount);
if (pixelCount > 0) {
// object produced visible pixels
}
A couple more points to be aware of:
If you only want to know if any pixels were rendered, but don't care how many, you can use GL_ANY_SAMPLES_PASSED instead of GL_SAMPLES_PASSED.
The query counts samples that pass the depth test, as the rendering happens. So there is an order dependency. A triangle could have visible samples when it is rendered, but they could later be hidden by another triangle that is drawn in front of it. If you only want to count the pixels that are actually visible at the end of the rendering, you'll need a two-pass approach.
I am developing a charting application in which there are 2 polylines, say Polyline A (shown as red colour line in below image) and Polyline B (shown as blue colour line in below image).
There can be 2 conditions in the chart:
When the red line intersects the blue line from above and then stays below the blue line, I want to fill that area with some color.
When the red line intersects the blue line from below and then stays above the blue line, I want to fill that area with some other color.
Without ever having done this, i could imagine that you might be able to do what you want without much mathematics by filling a Path and setting its Clip in an appropriate way.
Let's say you fill the entire area below the red line with green. Therefore you would set up a filled Path whose Data geometry is a closed polygon consisting of all the points of the red line plus the two lower corner points of the viewport. On that Path you would set the Clip property to another closed polygon geometry, which would consist of all the points from the blue line plus the two upper points of the viewport. For the red fill you would do the same again, but with exchanged polylines.
The straightforward approach would of course be to find the intersection points, determine the direction of the intersection, create closed polygons from the upper and lower line points plus the appropriate intersection points and fill these polygons according to the intersection direction.
Good luck!