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".

Advice on specific Web Based 3D Game Development

I'm relatively new to HTML and Javascript, but I'm knee deep in the Udacity interactive 3D course and have gotten my hands dirty with some three.js + WebGL. And I've been able to make and somewhat understand this:
http://goo.gl/UPWKKL
So far.(having a hard time understanding the API and getting cannon.js and really any interesting mechanics to work, any advice for learning APIs like threejs?)
I was wondering if anyone could provide any input for someone whose end goal is to make a game that is somewhat like a demi-version of: REZ, Exteel, Armored Core or Zone of The Enders versus mode.
My goal is implementing: rail shooting(w/ cannon.js?), health bars, NPC boss battles with different stages, animated movements, a cross-hair, level bounds, concepts of upgrades to a character.
To be really specific, a 5 level game with PointerLockControl + shooting interface, where each level pass requires bringing a boss' health bar down to zero. The enemy would have a vulnerable mesh area where if bullet objects hit it, it'd trigger a collision event where its health decreased. If health<= 25 it speeds up and becomes harder to kill. After its death the screen blacks out and restarts with a new boss and so on. I'd want to put in victory screens, failure screens and if possible, cut scenes where I guess I'd disable user control and enable some kind of path cinematic camera. And preferrably for this to all be in the browser like Quake, BUT if something like this isn't possible, I'd try something else.
Sorry if this question is too broad or weird, I want to work on video games for a living, I will appreciate any feedback I get, I just want to know if someone more experienced can look at what kind of game I want to make and recommend some up to date material or helpful sites.
Currently I'm working with webGL and threejs, I've looked into Unity3D but I can't develop that on my Linux machine. Far FARR down the line I'd like make full blown games in C++.

Design as specifically as possible, because then you will have lots of small tasks whose role in the greater whole is known. Then if you don't know what to do on any given day, just look at your design, your map, and pick a piece that you can do that day.
Sorry if this answer is not specific to WebGL but you have asked broadly.

Drawing/manipulate a quadrilateral vector on an image using JavaScript

I am trying to develop a system that will render a preview of a what a product might look like with embossing.
In order to do this, I am essentially going to composite two images together. In order to do this correctly, I am building a system using mainly JavaScript that allows a background image to be chosen. Someone will then draw a quadrilateral on this image that represents the correct proportions of the composite image.
This image, which is rectangular, will be distorted to match the four coordinates that comprise this quadrilateral using Imagick.
The piece I'm a little hazy on is the JavaScript. It doesn't need to support multiple browsers, Webkit or FF is fine.
At a minimum, it should put a rectangular shape comprised of four points. These points can then be manipulated at will and a line would be drawn between the points to help the user visualize the effect.
This is a crude description, but the best I have. In a perfect world, I'd love to do something similar to this , but with more flexibility. http://jqueryui.com/demos/resizable/#aspect-ratio is also a good example of something similar to what I'm envisioning, but with less constrained transformations.
I've investigated Raphael.js, which looks promising too but I'm weary of reinventing the wheel.
Any thoughts? Am I missing any obvious JavaScript libraries/implementations that might be useful here?
EDIT: I ended up using Flash and this AS3 class: http://www.rubenswieringa.com/blog/distortimage
It was a pain, but I got it working. I'm leaving this up in case someone wants to opine on a javascript technique.

Getting Started With Traffic Simulation in JavaScript

I am going to be asking a lot of questions in the upcoming months. For my ninth grade science fair project I would like to create a traffic simulator in order to test whether or not interconnected communicating traffic lights can increase traffic flow. I have a couple of generic questions that I need help with...
How would I represent roads?
How would I make car follow a road?
How would I make a car switch lanes or roads?
I am not looking for specific code, just good pointers and resources to help me get started. Any help is appreciated, C.Ruhl.
PS I am only in high school so no advanced math notations please :)

One possible approach which is taken quite often is to use a discrete model for roads and cars' positions.
Each position on the road can either be occupied by a car (blue dot) or be empty. Cars move at discrete time steps by exactly one position (if the target position is empty) along the given arrows. Thus a car can even switch lanes if it would otherwise have to slow down or stop.
You can further improve it by using separate timesteps per car (simulating faster/slower cars) or in many other ways.
After you've defined your roads (i.e. the positions and their follow-up positions) by an appropriate data structure this model is relatively easy to simulate but already shows interesting effects.

Forget about the UI.
Represent each object in its base form --only put object properties in it. Example, a car will have a size and ability to move. But it won't have the logic to make it move. Similarly a traffic light will have states such as green, amber and red. But it won't have the logic to switch between these states. Similar classes for roads, lanes etc.
Build a different class for the driver. This class will contain all methods such as lane shifting, stopping, turning, moving forward etc. More technically, this will be your "actor" and will act on the veichle. A similar actor would be for traffic light control which will act on a network of traffic lights. Make it an interface and have two implementations to it --one that takes advantage of interconnectedness and other that operates on static times.
Optional add a UI on top of this object model. Don't go fancy, have simple dots to begin with. Once you get all simple stuff working, adding more fancy features should be easy and impact free (relatively).
This will be a very challenging project.
But if your objective is a proof of concept, I have a simpler suggestion. You can go user generated here and get all the complexity of simulation out and all the accuracy in. Start with 15-20 remote controlled cars, a cardboard model of a fictional town, some bulbs to simulate traffic lights and some volunteers who know how to drive. Have a preprogrammed sequence of on and offs written on paper and assign some of the volunteers to control those lights. Have another set of volunteers control the cars. If you have hands on experience in basic electronics you can build a timer controlled circuit to control the lights.
All the very best!

You could try the SIM.JS discrete event simulation library in Javascript. They have a very simple example for traffic at road intersection simulation here.

Ooh, Conner, you've found an interesting question indeed -- and one which is the subject of research even today. Here's a suggestion: before you fret about how to do it in JavaScript, spend some time thinking just how to do it at all.
Here's a suggestion: think about the objects invovled first. You have Cars, and they travel along Roads. Start with a square grid of roads, so your cars go from intersection to intersection.
Pick a fixed speed for the cars, so it takes a constant time to travel from intersection to intersection.
Each intersection has a traffic light, which can be red or green. If it's red, of course cars can't go through; they have to wait.
Now, your basic program will look like
time = 0
while time < end-time:
for each car:
update the car's location
add time consumed to time
when you update the cars location, what happens? (Hint: the car moves; can it go through an intersection or not?)
That will give you a start.

For my Bachelor's degree exam I developed a traffic control web-app that tracked the vehicles in my town in real-time and I used google maps api.
I suggest you use a map service such as maps.google.com , yahoo.maps.com...
They have an api for everything... you can use markers to represent anything on the map (cars,street lights,even pedestrians :)) ) and you can use their api to calculate distances and paths.
It may seem a bit more complex then the average div-implementation, but, trust me, it's a big plus to use a service with a well-organised api.
+it would have a more professional look ;).