How to fill an SVG path with circles? - javascript

I have a path (green in the image below), and I need to fill it with a dynamic number of circles.
For example I know from the start that the most circles a path can contain is 500, and as a JS script runs in a browser, I will need to display 300 circles inside the path. It doesn't matter how the circles are arranged, just that they are inside the path. How do I calculate the positions inside the path with a little bit of padding between each circle?
I've been thinking of getBBox of the path, generating a grid inside it, then checking each X,Y position with isPointInFill, but this only checks the center of the circle and ones on the edge will overflow the path.
Is there any library that can do the heavy lifting for this situation? Or otherwise how would you accomplish this?

Related

Image registration (aligning one image to match another)

Currently I have an image that needs to be manipulated so it matches the same scale, position, and rotation as a template.
The grey rectangle with a circle in the middle is the template.
The orange rectangle and circle represents the user's input. It needs to be rotated, scaled and aligned to it matches the grey one. I'm currently stumped on how to proceed. I've no code other than the following.
function align_image()
{
// clever transform alignment code here
}
Bad dog, no biscuit!
The process at of aligning the images would normally be done manual input and judged by eye. I'm hoping to automate this step and align the image to its respective size and position but leaving the comfort and safety of Photoshop DOM I'm not sure how to proceed or even if this is a trivial matter or one left best alone. The project is web based currently using javascript and three.js
So if anyone can give me some pointers I'd appreciated it.
I don't code javascript so I can only talk about the algorithm. Generally best tool for registration is to use feature matching methods (using sift, surf,...) but your image is not the kind that have strong features. Now if you're always dealing with rectangles and circles in your images, find the "edges" of the rectangle with Hough Transform, compute the angle of those edges (lines) then rotate the image with that angle in the opposite direction.
Then with the help of Hough Circle Detector, find the center of the circles in the middle of the images, calculate the distance between them, and move the target rectangle to the source's circle position. After the movement by comparing the radius of the circles, you can resize the target image to make it like the source rectangle.
All of these are conveniently doable with Opencv.

How can I change the size of the innermost circle in a D3 zoomable sunburst?

There are lots of "zoomable sunburst" D3.js examples out there, like this. In these examples, the innermost circle starts out large, but after you zoom down a level the circle is small and remains the same size until you zoom back out to the highest level.
I'd like to have that innermost circle stay the same size throughout in order to have information at the center of the visualization. In my case, when a user hovers their mouse over a node, information about that node would appear at the center of the sunburst.
Is there a way to change the size of that innermost circle? What variables would I need to change? I'm thinking it might have to do with interacting with the radius variable in the click function?
Please find this edited example in plunker here: https://plnkr.co/edit/9iDdZ2auIJQokr1Yb9il?p=preview
I have added this variable innerCircleScale that you can edit to change the size of the inner circle. Initially it was 20.
I find 100 to be ideal here.
If you go above 100 it starts to show 2 inner circles (parent and parent of parent).

Transform / move one end of a path

As a simplification of my code I have a number of svg rectangles. Each of these are connected to one another with a svg path or curve.
The user can drag the rectangles. The code does this by applying a transform matrix to each rectangle.
Now I would like the path to adjust dynamically when a rectangle moves. Ie The end of the path connected to the moving rectangle also moves.
Is there some way I can apply a transform to one end of the path ?
Previously I have just redrawn the curves on mouse move events but in my more complicated code that gets awkward so I was wondering if there was a simpler svg feature.
Thanks
No. There is no way to do that in the general case. You need to modify the path.
The exception, of course, would be the very specific case where you were dragging the rectangle vertically or horizontally, where you could perhaps get away with scaling the path in one direction.

Check if a point is near a path, and get Y value of a path for a given X

I have a javascript class that uses an SVG to draw a set of cartesian graphs using paths (with both line and curve segments)
Now, the code must intercept a click event on the graph area, and if the click is on - or near - one of the path, it must take the X value, and get the Y values of other paths on the graph.
Click ON the graph area is not a problem with native events, but detecting click NEAR the graph and get all the Y values is a thing that I don't know how to do, because I'm searching for a method using the native JS function and methond, if available.
Yes, I can render every curve in a 2d array and do a lookup, but I'm trying to avoid it. Is there a way to do it without "reverting" to the math approach?
Draw the same curve with a stroke and stroke-width (to make it wider) but make it visibility="hidden" and then use the pointer-events property to make the hidden stroked curve clickable. You can either put the hidden curve on top or underneath the original stroke but if you put it underneath you'll probably want to make the original curve pointer-events="none"

Detecting wether a point is inside or outside of a raphael.js shape

I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to.
To make this more clear, here is an example of what I do not want to happen:
Example http://img682.imageshack.us/img682/4168/shapeh.png
I want the circles outside of the grey area not to appear. How would I detect wether a circle is inside or outside of the grey shape?
One possible way to dertermine if a point is inside closed path is this:
Choose coordinates that are definitely outside the shape.
Make a line from that point to your actual point in question.
Count, how often the line intersects with the path.
if the number of intersections is odd, then your point is inside. If it's even, the point is outside.
I don't know if that help you very much since I don't know raphael.js at all. But it's a working geometrical approach to the problem.
You could just apply a clip-path (that should be defined to be the grey shape you have in your example) on a group (<g> element) containing the circles.
See this example from the w3c SVG testsuite for how to use clip-paths.
This looks very similar to "Hit-testing SVG shapes?".
You'll just need to call getIntersectionList() on the circle's position, and see if it returns the big gray shape.

Categories