The problem here is I don't really know the right question to ask, but essentially I want to generate a pattern of ngons that all fit perfectly together, kinda like the picture.
Is there an algorithm or anything that can do this?
FYI I'm attempting this in JavaScript
The algorithm you want is a Voronoi Diagram. The essential description of the algorithm is such:
Generate a list of random points on a plane (or get the points as input from somewhere).
Create a geometric map of n-gons that represent all the space in the plane closest to each point.
The resulting graph will look something like this (stylized and colored):
The look and shape of the n-gons depend on the spacing of the points. You can play with different point distributions or generation methods to get a Voronoi Diagram with particular characteristics. You can also play with the n-gons themselves, for example you can treat the boundaries as fuzzy approximations, blending or leaving gaps between adjacent n-gons:
There are a ton of cool things you can do with a Voronoi Diagram, and pretty much every programming language has libraries that can compute one very quickly. For example, one of the interactive examples for Paper.js is a dynamically generated Voronoi Diagram where one of the points is the location of the cursor. Here's another example where someone uses Voronoi Diagrams as one of the steps for procedural terrain generation. Yet another example is a Voronoi Diagram using the locations of all the airports in the world, which you could use to find the closest airport to any location on the planet.
One such library in Javascript is d3-voronoi, though like I said, there are quite a few libraries out there, not to mention a gazillion tutorial articles on how to implement it yourself should you decide to go that route.
Related
How can I draw a Bezier Line between two non-static DOM elements, like this:
The two lines should be drawn between the
<div class="brick small">Line starts here</div>
and the
<div class="brick small">Line ends here</div>
of this CodePen: https://codepen.io/anon/pen/XeamWe
Note that the boxes can be dragged. If one of the elements changes its position, the line should be updated accordingly.
If I'm not wrong I can't use a canvas, right? What can I use instead?
Let me point you toward the answer I beleve you're looking for, it's a dom element type called 'SVG' which is supported by most if not all web browsers of today (so you won't need to plug in anything external), in which you can draw lines, shapes, apply graphical filters much like in Photoshop and many other useful things, but the one to be pointed out here is the so called 'path', a shape that can consist of both straight lines with sharp corners, or curved lines (bezier) or both combined.
The easiest way to create such paths is to first draw them in for example Illustrator, save the shape in the SVG format, open that file in a text editor and pretty much just copy the generated markup code and paste it into your html, as it is supported there. This will result in the drawn shape to be displayed on your site. But in your case, you won't come around the a little bit complex structuring of the paths, because you wish to have control of it using javascript, so I would suggest first making a few simple paths in this way by exporting from Illustrator, study these in code, then manipulate their bezier values in javascript until you get the hang of how they work, once you've done that you will be able to create the accurate bezier shape you have in mind and (knowing the positions of the elements you want to connect) position them so that they connect your boxes.
Paths can even be decorated with markers, like an arrowhead in the end or beginning of the path, you can even design your own markers as you like them to look and much more if you would dig deeper into it.
Good luck! :)
I have phasor information (polar vector data pairs, each with magnitude and angle, representing voltage and current measurements) that I would like to display using Javascript. They should look something like the image linked below (my rep isn't high enough to directly post it) which I stole from Jesse's question about MatPlotLib. I would also like to easily change which phasors are displayed by a simple mechanic like clicking on the legend entry.
See a phasor diagram example here.
While I have inspected several code sets, I have yet to find a chart package that is built to handle polar vectors like this. Is my Google-fu lacking or do I need to create everything from scratch?
I feel like this is a cheap workaround, but here's what I ended up doing:
I used the polar chart from jqWidgets and with the series type set to "column" and the flip property switched to "true." I put the data in an array with 0 entries for each possible angle except for where I wanted the phasor displayed. Each phasor gets a dedicated series so the legend lists them all. It's not perfect and the array is much larger than it really should need to be, but it's passable.
While it's not surprising that no power system display package is publicly available for Javascript, I'm sure one has to be out there for educational sites if nothing else.
I have a B-Spline curve. I have all the knots, and the x,y coordinates of the Control Points.
I need to convert the B-Spline curve into Bezier curves.
My end goal is to be able to draw the shape on an html5 canvas element. The B-Spline is coming from a dxf file which doesn't support Beziers, while a canvas only supports Beziers.
I've found several articles which attempt to explain the process, however they are quite a bit over my head and really seem to be very theory intensive. I really need an example or step by step help.
Here's what I've found:
(Explains B-Splines),(Converting to Beziers),(Javascript Example)
The last link is nice because it contains actual code, however it doesn't seem to take into account the weight assigned by the nodes. I think this is kind of important as it seems to influence whether the curve passes through a control point.
I can share my Nodes or Control Points if that would be useful. If someone would point me to a step-by-step procedure or help me with some psuedo(or actual)code, I would be so grateful.
I wrote a simple Javascript implementation of Boehm's algorithm for cubic B-Splines a while back. It's a fairly straightforward implementation involving polar values, described here in section 6.3: Computer Aided Geometric Design- Sederberg
If you're just interested in the implementation, I've linked the classes I wrote here: bsplines.js
This could be helpful - https://github.com/Tagussan/BSpline
My project has moved on and I no longer need it, but this seems to be a pretty useful way to feed control points and have a curve drawn.
I have a geojson object defining Neighborhoods in Los Angeles using lon/lat polygons. In my web application, the client has to process a live stream of spatial events, basically a list of lon/lat coordinates. How can I classify these coordinates into neighborhoods using Javascript on the client (in the browser)?
I am willing to assume neighborhoods are exclusive. So once a coordinate as been classified as neighborhood X, there is no need to further test it for other neighborhoods.
There's a great set of answers here on how to solve the general problem of determining whether a point is contained by a polygon. The two options there that sound the most interesting in your case:
As #Bubbles mentioned, do a bounding box check first. This is very fast, and I believe should work fine with either projected or unprotected coordinates. If you have SVG paths for the neighborhoods, you can use the native .getBBox() method to quickly get the bounding box.
the next thing I'd try for complex polygons, especially if you can use D3 v3, is rendering to an off-screen canvas and checking pixel color. D3 v3 offers a geo path helper that can produce canvas paths as well as SVG paths, and I suspect if you can pre-render the neighborhoods this could be very fast indeed.
Update: I thought this was an interesting problem, so I came up with a generalized raster-based plugin here: http://bl.ocks.org/4246925
This works with D3 and a canvas element to do raster-based geocoding. Once the features are drawn to the canvas, the actual geocoding is O(1), so it should be very fast - a quick in-browser test could geocode 1000 points in ~0.5 sec. If you were using this in practice, you'd need to deal with edge-cases better than I do here.
If you're not working in a browser, you may still be able to do this with node-canvas.
I've seen a few libraries out there that do this, but most of them are canvas libraries that may rely on approximations more than you'd want, and might be hard to adapt to a project which has no direct need to rely on them for intersections.
The only other half-decent option I can think of is implementing ray casting in javascript. This algorithm isn't technically perfect since it's for Euclidean geometry and lat/long coordinates are not (as they denote points on a curved surface), but for areas as small as a neighbourhood in a city I doubt this will matter.
Here's a google maps extension that essentially does this algorithm. You'd have to adapt it a bit, but the principles are quite similar. The big thing is you'd have to preprocess your coordinates into paths of just two coordinates, but that should be doable.*
This is by no means cheap - for every point you have to classify, you must test every line segment in the neighborhood polygons. If you expect a user to be reusing the same coordinates over and over between sessions, I'd be tempted to store their neighborhood as part of it's data. Otherwise, if you are testing against many, many neighborhoods, there are a few simple timesavers you can implement. For example, you can preprocess every neighborhoods extreme coordinates (get their northmost, eastmost, southmost, and westmost points), and use these to define a rectangle that inscribes the town. Then, you can first check the points for candidate neighborhoods by checking if it lies inside the rectangle, then run the full ray casting algorithm.
*If you decide to go this route and have any trouble adapting this code, I'd be happy to help
I want to code a little Game, dealing with fonts and letters. I want to make them move arround in 2d space and i am using box2dweb as physics engine, what is actually doing a very great job. At the moment all I am struggling with, is the problem of building the b2Body for a Letter. Box2d can only handle primitive, convex shapes and to build an more complex hitbox I have to combine some of them. In the image I tried to figure out what i would like to reach, an algorithm, that takes an svg-path of a letter and generates a series of b2shapes which represent the hitbox.
All in all i have no Idea where i could find some Information about this, if there is a library that is capable of doing this. Even if this Library is not available in Javascript, i could do the job on Server.
I know that there is paper.js and raphalel, some clever vector libraries, but i have not found any hint how to solve this yet.
I would be happy for any kind of help, links to ressources, or the correct name of the problem in mathematical sense.
Greetings and thanks in advance...
Philipp
I just want to leave the result of investigation here, maybe someone will help it. The initial idea is based on »ear cutting«, »ear culling«, or »ear cropping«. A demo here will describe this. But the algorithm, which produces less, but box2d suitable polygons is shown in a demo here. The idea is to merge as much triangles as possible, as long as they are convex and this case, do not have more than eight edges. A triangle is suitable to be added to a polygon, if one can find two points in the triangle and two adjective points in the polygon, with the same x and y coordinates.