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.

Coloured PointCloud rendering JavaScript algorithm

I've just made a 3D pointcloud rendering app in JS. This app is able to render +200 000 3D black/white points at 40 FPS for dense heavy clouds. However, I'm now trying to implement colours, and, while I was working on this new feature, I realised that the order in which points were painted on the screen was really important.
I've made another file where I've selected a colour for each point. For example, point 0 is red, point 1 is green and point 2 is blue; so colours are precalculated.
I mean, points that are further from the user should be rendered first and points that are closer should be rendered later. With this technique, if two points overlap, the point which is closer is the one which will appear on the screen.
I made a custom algorithm [O(n^2) pretty slow I know] which sorted all the points (more than 200 000) for the distance from the position of the user (further points first). However, it takes me about 7 seconds to put them in the right order, for and app which was intended to be real-time, and I had to make a workaround for preventing the browser from showing a "this page is not responding" popup.
Is there any other method for rendering 3D coloured points which overlap on the screen? Don't worry, I'm not asking for a piece of code, I just want to know if there's another faster way to achieve this, if possible in pseudo-code.
I already know that I can reduce that time writing a more efficient algorithm but that would still be too slow. Every valid answer will be rewarded with an upvote!
THIS IS WHAT I'VE GOT SO FAR
THIS IS WHAT I'D LIKE TO HAVE

It is not clear why you came up with your O(n^2) time complexity.
You have your array of 200k points. You have some point to which you have to calculate a distance. This is done in O(n). On my machine it is done in 42.142ms.
Now you have to sort your points based on this distance and on my machine it done in 122.358ms. Your sorting algorithm runs in O(n*log(n)). Now you draw the points from furthest to closes and it also runs in O(n).
So I am not sure how you ended up with O(n^2) and why it runs in 7 seconds.

Instead of sorting, you could memorize the rendered pos / distances during the rendering. If you find that a new point that you're about to render is farther than an overlapping point that is already rendered, you skip the new point.

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

CSS3 Tweens and Matrix

I've put together some key frame animations in CSS which animate a div from one side of the screen to the other, applying a slight rotation along the way. I'm finding the key frame approach restrictive because I want to be able to have many variations that go into one big sequence. The variations could as an example be not just left to right, right to left but also up to down and so on. To add more complexity to the problem, I need to be able to shuffle up this sequence and retain continuity between each animation.
The sequence itself should be able to run in any order and reset.
For example if I want to move the div in 100px phases:
left (100px), up (100px), left (100px) and then down(100px)
the next time I might want the sequence as follows (again 100px):
left, down, right, up
My thinking is that this would be better achieved by using JavaScript to write the animations on the fly perhaps using something like the CSS3 Matrix. So far I've figured out the easy stuff like left and right but I can't figure out how to add in rotation. This seems like a really good starting point:
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/
Also been taking a look at this:
http://tweenjs.com/
My thoughts are, a) am I over-complicating this by taking the CSS Matrix approach? Is there something simpler? and b) How can I achieve rotation and movement at the same time using the CSS Matrix or any other approach?
Any help appreciated!

If you want to do dynamic animations, then you should be using JavaScript to animate.
As far as how to combine translation with rotation, the answer is right there in the useragentman post (which incidentally is a very good introduction to css matrixes.)
Take the angle of rotation (in radians) that you want to achieve and create the following matrix:
Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0, 0, 1
then create the following matrix for your (presumably 2D) movement in x and y.
0,0,X
0,0,Y
0,0,1
Then multiply them together (or take the dot product in matrix terminology). Here is a handy matrix multiplier for you, the details of how to create a dot product are also in the same post.
Note that these are transforms (not position changes) and transforms don't affect affect page position.

Most efficient way to implement mouse smoothing

I'm finishing up a drawing application that uses OpenGL ES 2.0 (WebGL) and JS. Things work pretty well unless I draw with very quick movements. See the image below:
This loop was drawn with a smooth motion, but because JS was only able to get mouse readings at specific locations, the result is faceted. This happens to a certain degree in Photoshop if you have mouse smoothing turned off, though obviously much less because PS has the ability to poll at a much higher rate.
So, I would like to implement some mouse smoothing, but I'm concerned about making sure it's very efficient so that it doesn't bog down the actual pixel drawing operations. I was originally thinking about using the mouse locations that JS is able to grab to generate splines and interpolate between readings to give a smoother result. I'm not sure if this is the best approach, though. If it is, how do I make sure I sample the correct locations on the intermediate spline? Most of the spline equations I've found don't have uniformly-distributed values for t = [0, 1].
Any help/guidance/advice would be very appreciated. Thanks!

Catmull-Rom might be a good one to try, if you haven't already.
http://www.mvps.org/directx/articles/catmull/
I'd pick a minimum segment length and divide up segments that are over that into 1+segmentLength/minSegmentLength sub-segments.