We Keep Coding

Smooth all data-points in a chart in nodejs/javascript

I have a chart which line I wish to be able to make as smooth as possible. The line should still keep the overall pattern and as close to the original line as possible - but I need to be able to smooth all "bumbs" 100% away / to the degree I wish.
When I say "100% smooth" - I mean something like this (try to draw a curved line in the square): http://soswow.github.io/fit-curve/demo/
The line must only go up or down (while the main trend is up/down-wards) - E.g. like a Sine curve. Now imaging you added a lot of noise/bumps of different sizes/freq. to the Sine curve - but you like to "restore" the curve without changing the curve's overall pattern. That is exactly my need. The ideal: If I could filter away exactly the selected level of noise/freq. I wish to remove from the main trend.
SMA is lagging in nature and I need something which is a lot closer to the actual data-points in time.
I know the lagging feature of SMA is normally accepted - but I don't accept it ;) I strongly believe it would be possible to do better than that :) DMA can shift the data-points itself - but has no effect of the data-points info in real time which is what I'm looking for as well...I know I have to hack/compensate - and I can also come up with 100s of ways myself (mixing all the algos I know, running them multiple times etc.) But I guess someone out there is way smarter than me and that it has already been solved - and I would definitely wonder if not a standard algorithm for exactly this issue exist?
I have looked into many different algorithms - but none of them worked satisfyingly (Moving Averages, Median, polynomial regression, Savitzky Golay etc.). But the result is still way too "bumby" and "pixelated" and otherwise it again becomes too lagging.
Lastly I have found: Bezier Cubic and quadratic which seems pretty interesting but I don't know how apply it on all my data-points and I can't find a suitable NPM (I can only find libraries like this: https://www.npmjs.com/package/bezier-easing which only takes 1 data-point which is not what I'm looking for).
Savitzky G. is better than regular MA - but I still believe it lags too much when it is as smooth as I consider acceptable.
The task is pre-processing and noise-reduction of temperature, price and similar charts in real-time before it is handled over to an IA which looks for abnormalizes (too much noise seems to confuse the AI and is also unnecessary for the most parts). The example with the drawing was only an example - just as well as me mentioning a "Sine curve" (to illustrate my point). The chart is in general very arbitrary and doesn't follow any pre-defined patterns.
I like to emphasize again that the primary prerequisite of the selected algorithm/procedure must be - that it generates a chart-line which minimizes lagging from the main chart's overall trend to an absolutely minimum and at the same time makes it possible to adjust at what level the noise-reduction should take place :-)
I have also made this small drawing in paint - just so you easily would understand my point :-) screencast.com/t/jFq2sCAOu The algo should remove and replace all instances/areas in a given chart which matches the selected frequency - in the drawing is only shown one of each - but normally there would exist many different areas of the chart with the same level of noise.
Please let me know if all this makes sense to you guys - otherwise please pin-point what I need to elaborate more about.
All help, ideas and suggestions are highly appreciated.

2D soft bodies: Gelly and moldable?

I am using Matter.js physics in an attempt to create soft bodies. I was able to create a body like this:
However I am not sure if this is the "soft body" I want. It is true that this body is not entirely rigid and has that bouncy feel when it collides and gets dragged. I was looking for a body that shares similarities with a gelly. This image might visually help explaining the concept:
I was wondering how these type of bodies can be made. Is it the same as the as matter.js soft body but with a very specific type of properties? I can only get the body to be kind of rigid-squared and not as moldable and circular as I would like it to be.
I am also interesting in manipulating the physics body with in-game interactions which would increase or decrease the physics body size which leads me once more to the conclusion that the type of body that I want must be quite moldable.
Can matter.js handle this or do I have to change the physics engine? Any solutions to approach this?
NOTE: I am using Phaser.js for some in-game components but matter.js physics for physics manipulation because I believe Phaser integrated Physics can't simulate this type of complex body.
Thanks
EDIT: It is very similar to this Box2d :roll soft body ball. I just need to do that with a js engine I guess. Is there any?

As I mentioned in the comments, I am not familiar with phaser or how you would actually implement this within a Javascript framework. My goal here is maybe to give you some ideas on different ways to proceed, so hopefully you'll find this answer useful.
I will try to answer this:
I was wondering how these type of bodies can be made. ... I can only get the body to be kind of rigid-squared and not as moldable and circular as I would like it to be.
It is not necessarily clear what you want given this sentence. As I noted in comments, what I think you are looking for is plasticity, and I will describe a way which you could possible "cheat" that look with somewhat simple tools.
At the moment you describe the motion of your body by "It is true that this body is not entirely rigid and has that bouncy feel when it collides and gets dragged.". Currently your model works as such:
A point is connected to all other points as given in your mesh.
Every time step, a force is calculated between each pair. The total force on a joint (or point) is the sum of all these pair wise forces.
Each joint is associated with a part of the body (i.e. it has some mass m) and you calculate its acceleration with acceleration = force/m. From there on we calculate velocity and finally position.
The most interesting part of the steps above is nr 2, as that will greatly influence the motion of the whole body. A very common way to implement it is as an elastic potential that for a certain distance between two points gives some force. Like so:
function elasticPotential(p1, p2) {
// Given two positions p1 and p2 we calculate a force between them
distance = sqrt(pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2) + pow(p1.z - p2.z, 2));
force = force_given_distance(distance); // A popular choice here is for example a spring force
return force;
}
Now, you already have the function described above built in in your framework, so you don't have to implement it. The reason I'm describing this is because it is essential to understanding how we can create plasticity. The problem with the above is that nothing will retain deformation---the nature of the elastic potential is that it has some rest configuration (most likely your first configuration) and it will always try to get back to that shape. We want the shape to remember how it was mis-shaped. This is what plasticity is.
Simple plasticity
Note first here that the problem of plasticity is a big research topic and in many cases far from trivial. My idea is as follows: if the distance between two connected points are larger than some threshold, remesh the points in the current configuration. That is,
for each pair(p1, p2):
if distance(p1, p2) > threshold:
recalculate_connection(p1, p2)
As you can see this is a very simple model for plasticity, and most likely not physically correct. However, it should be possible to get interesting behaviours my playing with the remeshing together with what elastic potential you choose.
If you provide me with more details I might be able to discuss the problem further, but right now I feel this answer is already longer than it should be.
TL;DR:
Create a "moldable" shape by remeshing your body during deformation. It might be tricky to get an exact desired physical behaviour, but it should be possible to create something that looks "gelly-like".

How to check if two convex polyhedrons intersect with each other in Three.js?

I'm working on a problem that need to randomly generate and put convex polyhedrons into a cube/cylinder container at randomly chosen points without overlapping. I'm using three.js to get a graphic output.
A demo.
While putting a polyhedron, how to check whether it intersects with other polyhedrons?
The convex polyhedron involved is simply tetrahedron or hexahedron and is constructed using THREE.ConvexGeometry. As I need a precise check, bounding box is not enough, I just use it to make sure two polyhedrons are not intersected.
I've done a lot research and found many complicated theories and methods, what I need is to get a Boolean result that tells if there exists an intersection between two convex polyhedrons. SAT (Separating Axis Theorem) in 3D is good enough, but Three.js doesn't seem to be capable of doing this. Can anyone tell me how to do this kind of check in a simple way or just explain how to do it with SAT in 3D?

You can take a look at http://www.realtimerendering.com/intersections.html. Even though the site is from 2011 the intersection algorithms have not changed in the last years. From the demo it seems that once the polyhedrons are placed in the cube, they don't move. So the SAT algorithm would not be the best solution as it is used for moving polyhedra.

The Gilbert–Johnson–Keerthi is a powerful algorithm that allow to measure distance and check for intersection between convex polyhedrons. Still I believe that it is better to use on simple polyhedron otherwise the computation in the support function might take some time. A possible drawback is that you need to have functions able to measure the distance between a point and another point/segment/triangle, I do not know if some are available in three.js.
http://en.wikipedia.org/wiki/Gilbert%E2%80%93Johnson%E2%80%93Keerthi_distance_algorithm

Algorithm for smoothing the edges of a polygon

I use Node.js and Concave hull algorithm for isolating UK postcode sectors.
This is what I get for now:
So now, I need to smooth boundaries to look like this:
Does anyone have any idea which algorithm should I use?

There seems to be a lots of ways of doing this. I'm inclined to cite some kind of bezier interpolation (http://www.antigrain.com/research/bezier_interpolation/).
#amit gave another great clue about how to solve the problem, splines are actually pretty useful for smoothing polygons. See the related question: https://gis.stackexchange.com/questions/24827/how-to-smooth-the-polygons-in-a-contour-map
Hope it helps!

There are at least 2 approaches to this:
Curve fitting algorithms(best for your use case)
Rammer-Douglas-Peucker algorithm (simpler to implement)
The Rammer-Douglas-Peucker algorithm reduces the node count of a polygon - this will not smooth it in the sense that it will make it curvy, it will simply reduce the nodes(roughness), whilst struggling to keep the polygon in it's original shape as much as possible
Although what you are, most probably, after is a Curve fitting algorithm through a series of points.
See this answer I've made (and the answer above, which is more descriptive) for solutions to this.

Finding a polygonal approximation of a Closed Path

I'd like to be able to find the best fitting polygonal approximation of a closed path (could be any path as they're being pulled out of images) but am having issues with how to approach coding an algorithm to find it.
I can think of a naive approach: every x amount of pixels along the path, choose the best fit line for those pixels, then brute force for different starting offsets and lengths and find the one that minimizes the least-square error with the minimum amount of lines.
There's got to be something more elegant. Anyone know of anything? Also, (cringe) but this is going to be implemented in javascript unless I get really desperate, so nice libraries that do things for you are pretty much ruled out, (opencv has a polygonal fitter for instance).

D3.js1 has some adaptive resampling code that you might be able to use. There's also an illustrated description of the algorithm used (Visvalingam’s algorithm).

The Ramer–Douglas–Peucker algorithm seems appropriate here, and is simple to implement.
Note that the acceptable error is an input to this algorithm, so if you have a target number of lines you can binary-search using the error parameter to hit the target.