I have a distribution of numbers given as a list of numbers, with duplicates allowed, such as [0, 0.1, 0.1, 0.1, 0.2, 0.5].
This distribution changes over time. Each distribution may have a different number of elements, but should usually be similarly sized
I am trying to visualise this change of distributions in Javascript, but can't find a satisfactory solution. I am using plotly for other visualisations already, so a solution in plotly would be preferred, but is not required.
My current approach is to make a scatterplot with heatmap, and enter data points by giving each new distriubtion a new sequentially generated x coordinate, while treating the entries of the distribution as y coordinates. This works reasonably well when the sequentially generated number is small compared to the number in the distribution, but looks odd otherwise, because I don't know how to tell the scatterplot that the x coordinate is artificial and there can never be a data point between two subsequent x coordinates.
For extra credit, find a way to visualise it nicely even if the distributions can be based on a vastly different number of elements.
I couldn't find a standard solution in Javascript, but I found a way around:
I show a graph with 11 lines. Each line is a 10% quantile of the distribution I am tracking. It's a bit unintuitive at first, but very informative once you are used to it.
Related
Eventually, I'd like to get to a place where I'm generating multiple fake "countries" on a fake "continent," but to start I boiled the problem down into something simple, and I'm already stuck at this first step:
Given an area (let's say 10 tiles x 10 tiles) and a number of polygons (let's say 6), I'm looking for a way to randomly give the polygons tile coordinates in a way that 6 polygons of approximately equal size (+/- 10% is fine, and honestly even planned) will fill up the entirety of the grid. Not the precise code per se, but even how I'd go about doing it on paper.
I've also thought about using a spiral. Starting from the approximate centre of the area (let's say [4, 4]), spiral around clockwise and cut off at 100 / 6 = ~16. While this seems like a really straight-forward approach, both on paper and in code, it certainly makes for weird-looking polygons:
And no matter how much I tweak some random variables (e.g., size of polygon, where I start, etc), it'll always look like that. In a variation, starting at the bottom left point and going up, then right, then down, then right, etc., yields the same:
To create something vaguely realistic, I'm thinking that I need to generate 6 centroids across my [10, 10] area, and then use the spiral method to create regions from that.
I find myself pretty quickly running into three problems:
How do I "equally space" out the centroids?
How do I handle the "overlap" areas, like shown with the ?s or ?!s (for the second pass-through)
How do I handle the "gap" areas, like shown with the letter G above?
And finally... is this centroid approach even the best method? I've heard of (and used, via 'clicking a button') k-means clustering... would it work to theoretically set my 100 points as input points and try to generate 6 clusters?
Any help would of course be much appreciated!
I'm not very experienced with this, but you could use a Voronoi triangulation. You would generate the points on your grid, spaced out randomly , then you would use a Voronoi diagram (https://en.wikipedia.org/wiki/Voronoi_diagram), to determine the countries. To make them more equal, you would use Lloyd relaxation (https://en.wikipedia.org/wiki/Lloyd's_algorithm) to equal them out.
I'm working on a simulation in which I have an aircraft and I need to be able to fly to a starting point of a line. When arriving at that point, it needs to be aligned with the angle of the line. The starting point can be either point on the line. It is similar to simulating an aircraft landing on a runway but I do not need to factor in altitude.
example
I have the following information:
aircraft vector
latitude/longitude
heading
speed
destination line (two points)
point 1 latitude/longitude
point 2 latitude/longitude
Aircraft position is updated every 0.5 second and is limited to 3 degrees per second turn rate.
I am currently using Jean Brouwers python interpretation of geodesy tools (https://github.com/mrJean1/PyGeodesy) for a lot of my trigonometric and vector-based methods.
I'm looking for a way to plot my aircraft to the destination line with the proper heading.
Any help with the rationale or math would be greatly appreciated. It's been a long time since I have done any complex trig.
Thanks
It looks like a problem in a field of Optimal control, if you really want to deal with plane speed and position, not just to build a smooth graph connecting two or three dots.
This is a theory for finding control functions that can bring mathematical systems from one state to another.
Your goal is to represent everything as a system of variables: state variables x(t) (position in rectangular or polar coordinates, direction, speed) and control variables u(t) (throttle position, steering position). Then you describe dependencies between them as a system of differential equations x'(t) = f(x(t), u(t)).
And for that mathematical system, applying constraints s on your control variables and providing sets of target values of state variables, you synthesize a control functions for control variables. Synthesizing relies heavily on Pontryagin's maximum principle.
Check out simple examples of applying the theory, if you can.
Of course, it is a general approach which is used in real aviation and spaceships... Maybe you don't really need this and something simpler's gonna fit :)
Say we are coding something in Javascript and we have a body, say an apple, and want to detect collision of a rock being thrown at it: it's easy because we can simply consider the apple as a circle.
But how about we have, for example, a "very complex" fractal? Then there is no polygon similar to it and we also cannot break it into smaller polygons without a herculean amount of effort. Is there any way to detect perfect collision in this case, as opposed to making something that "kind" of works, like considering the fractal a polygon (not perfect because there will be collision detected even in blank spaces)?
You can use a physics editor
https://www.codeandweb.com/physicseditor
It'll work with most game engines. You'll have to figure how to make it work in JS.
Here's an tutorial from the site using typescript - related to JS
http://www.gamefromscratch.com/post/2014/11/27/Adventures-in-Phaser-with-TypeScript-Physics-using-P2-Physics-Engine.aspx
If you have coordinates of the polygons, you can make an intersection of subject and clip polygons using Javascript Clipper
The question doesn't provide too much information of the collision objects, but usually anything can be represented as polygon(s) to certain precision.
EDIT:
It should be fast enough for real time rendering (depending of complexity of polygons). If the polygons are complex (many self intersections and/or many points), there are many methods to speedup the intersection detection:
reduce the point count using ClipperLib.JS.Lighten(). It removes the points that have no effect to the outline (eg. duplicate points and points on edge)
get first bounding rectangles of polygons using ClipperLib.JS.BoundsOfPath() or ClipperLib.JS.BoundsOfPaths(). If bounding rectangles are not in collision, there is no need to make intersection operation. This function is very fast, because it just gets min/max of x and y.
If the polygons are static (ie their geometry/pointdata doesn't change during animation), you can lighten and get bounds of paths and add polygons to Clipper before animation starts. Then during each frame, you have to do only minimal effort to get the actual intersections.
EDIT2:
If you are worried about the framerate, you could consider using an experimental floating point (double) Clipper, which is 4.15x faster than IntPoint version and when big integers are needed in IntPoint version, the float version is 8.37x faster than IntPoint version. The final speed is actually a bit higher because IntPoint Clipper needs that coordinates are first scaled up (to integers) and then scaled down (to floats) and this scaling time is not taken into account in the above measurements. However float version is not fully tested and should be used with care in production environments.
The code of experimental float version: http://jsclipper.sourceforge.net/6.1.3.4b_fpoint/clipper_unminified_6.1.3.4b_fpoint.js
Demo: http://jsclipper.sourceforge.net/6.1.3.4b_fpoint/main_demo3.html
Playground: http://jsbin.com/sisefo/1/edit?html,javascript,output
EDIT3:
If you don't have polygon point coordinates of your objects and the objects are bitmaps (eg. png/canvas), you have to first trace the bitmaps eg. using Marching Squares algorithm. One implementation is at
https://github.com/sakri/MarchingSquaresJS.
There you get an array of outline points, but because the array consists of huge amount of unneeded points (eg. straight lines can easily be represented as start and end point), you can reduce the point count using eg. ClipperLib.JS.Lighten() or http://mourner.github.io/simplify-js/.
After these steps you have very light polygonal representations of your bitmap objects, which are fast to run through intersection algorithm.
You can create bitmaps that indicate the area occupied by your objects in pixels. If there is intersection between the bitmaps, then there is a collision.
I'm hitting a wall in some work I'm doing; I've searched on here for many, many threads regarding numerical interpolation and have found them either to contain too much math for me to interpret them, or that their coding solutions have been too specific to be generalized to the task I'm working on.
I have sets of coordinates (currently float x, y distances around an 0,0 origin point) which I am, via Javascript, transposing to latitude, longitude coordinates. (The transposition is easy, so don't worry about that — I'm just telling you that to make the application more clear.)
For the rest, refer to the below graphic:
The dots are the coordinates. (They are generated algorithmically.) The blue line shows a simple, linear interpolation between the points. What I want is something more like the red line. It's not quite an ellipse — you can see that around the first coordinates, it forms arcs that are almost like a perfect circle.
Note that some of the points are negative in various places. Note that the lines between them must be draw sequentially — an algorithm that generates the points out of sequence will make things much harder for this application.
What I'd like is to have a Javascript function that would let me do the following: specify two sequential points from this series (x1,y1; x2,y2), specify a number of interpolated steps in between (say, 5 to 10), and then output an array of coordinates that would, when linked linearly (that is, when a straight line is drawn between them), look something like the red line above (with the degree of curviness obviously constrained by the number of steps).
Of all of the many spline functions out there, which of these satisfies these requirements? The mathematical precision of the spline function is less important to me than the simplicity of adapting it to this purpose, and to its aesthetic output. I would be fine with manually setting the eccentricity/circle-ness of each individual set of coordinates, too (so the first ones really should be very circle-like, but the latter should not be).
Put another way, I am looking for a simple function for getting the interior coordinates of an arc between any two sets of coordinates. EDIT to clarify that I'm fine with there being a third variable that sets the inclination of the arc (positive or negative) and its eccentricity or whatever. The function doesn't necessarily have to know where it is on the diagram above, as I will know that. I'm just looking for something that can help me interpolate the arc points.
I think I understand the parameters of the problem; what I'm bad at is geometry and turning mathematical answers into usable Javascript. (Because I don't really understand the math.)
I have already looked at Midpoint circle algorithm and found it difficult to adapt to this purpose (because of the need for sequentiality and non-integer coordinates); I've also looked at a variety of spline interpolation methods and found them way too complicated for my dummy-self to make sense of.
Any pointers, help, and code would be appreciated!
I have lots of line segments (that represent various surfaces such as walls, ceilings and floors). I want to efficiently determine which lines are within the player's bounding box.
(Right now I'm cycling through all lines, and whilst correct, it is proving much too slow).
There are several kd-tree and other spatial indices in Javascript but they all store points rather than lines.
I actually only need to query by the x axis; it would suffice with a 1D range tree of some sort.
How can you efficiently store and retrieve shapes such as lines?
Once built, the index would not be added to.
In just 2 dimensions, where you have good control over the total spatial extend (i.e. know min and max, and these won't increase), grid based approaches such as plain grids or quadtrees work incredibly well. In particular, if you know your query radius (the players box size), a grid of exactly this size should work really well.
Many games also used what is called a BSP tree, a binary space partitioning tree. But for good performance, this tree is AFAIK usually precomputed when the level is built, and then just loaded with the map.