Coords interpolation - actionscript-3

Question

we are sending from server to client the coords of the ball each 300 ms. We have to interpolate coords to make the moving smooth. Here is the code (AS3):
private function run(event:Event):void
{
// Current frame ball position
var currentPosition:Point = new Point(this.x, this.y);
// Vector of the speed
_velocity = _destinationPoint.subtract(currentPosition);
// Interpolation
// Game.timeLapse - time from last package with coordinates (last change of destinationPoint)
// stage.frameRate - fps
_velocity.normalize(_velocity.length * 1000 / Game.timeLapse / stage.frameRate);
// If ball isn't at the end of the path, move it
if (Point.distance(currentPosition, _destinationPoint) > 1) {
this.x += _velocity.x;
this.y += _velocity.y;
} else {
// Otherwise (we are at the end of the path - remove listener from this event
this.removeEventListener(Event.ENTER_FRAME, run);
this.dispatchEvent(new GameEvent(GameEvent.PLAYER_STOP));
}
}
The problem is described in the following picture:
Red point - destination point
Black lines - lines from curret point to destination without
normalization
Green dotted - the path of the ball
Maybe there is a way to make moving smooth but more accurate?

Answer 1

If you want to interpolate path steps for exactly three points, you need to use quadratic Bezier curve math to be able to calculate any position on the curve for any given distance from its starting point. You need this to get equal steps along the curve, that you have on your picture. That's rather tricky, because when you use bezier curve equiations in polynomial form, you don't get equal distance along the curve for equal parameter deltas.So, you need to treat bezier curve as a parabola segment (which it effectively is), and the task can be reformulated as "stepping along a parabolic curve with steps of equal length". This is still quite tricky, but fortunately there is a solution out there: http://code.google.com/p/bezier/
I used this library several times (to make equal steps along a parabolic curve) and it worked perfectly well for me.
Most likely you would want to interpolate between arbitrary set of points. If this is the case, you may use Lagrange approximation.Below is my simple implementation of Lagrange approximation. (Googling for it will certainly give you more.) You supply approximator with arbitrary number of known function values and it can generate the value of a smooth function for any value of the argument in between.
--
package org.noregret.math
{
import flash.geom.Point;
import flash.utils.Dictionary;
/**
* #author Michael "Nox Noctis" Antipin
*/
public class LagrangeApproximator {
private const points:Vector.<Point> = new Vector.<Point>();
private const pointByArg:Dictionary = new Dictionary();
private var isSorted:Boolean;
public function LagrangeApproximator()
{
}
public function addValue(argument:Number, value:Number):void
{
var point:Point;
if (pointByArg[argument] != null) {
trace("LagrangeApproximator.addValue("+arguments+"): ERROR duplicate function argument!");
point = pointByArg[argument];
} else {
point = new Point();
points.push(point);
pointByArg[argument] = point;
}
point.x = argument;
point.y = value;
isSorted = false;
}
public function getApproximationValue(argument:Number):Number
{
if (!isSorted) {
isSorted = true;
points.sort(sortByArgument);
}
var listLength:uint = points.length;
var point1:Point, point2:Point;
var result:Number = 0;
var coefficient:Number;
for(var i:uint =0; i<listLength; i++) {
coefficient = 1;
point1 = points[i];
for(var j:uint = 0; j<listLength; j++) {
if (i != j) {
point2 = points[j];
coefficient *= (argument-point2.x) / (point1.x-point2.x);
}
}
result += point1.y * coefficient;
}
return result;
}
private function sortByArgument(a:Point, b:Point):int
{
if (a.x < b.x) {
return -1;
}
if (a.x > b.x) {
return 1;
}
return 0;
}
public function get length():int
{
return points.length;
}
public function clear():void
{
points.length = 0;
var key:*;
for (key in pointByArg) {
delete pointByArg[key];
}
}
}
}

Answer 2

You could send more than one coordinate each tick. Or send some extra properties along with each point, maybe to say if it is a point where the ball bounces, or if it can be smoothed.
Sending a series of points in one transaction would give you greater accuracy, and wont add too much to the packet size, compared to the overhead of sending, processing, and receiving.