I was experimenting with a 1-d ball bounce problem in KonvaJS, with zero loss. Hence it should appear that the ball is simply oscillating.
The equations for this are available here. (Click here for reading instructions).
The full code is available on github (Check README.md for setting up).
Code below is responsible for the animation part:
stage.on('contentClick', function(e){
var pos = stage.getPointerPosition();
var circle = new Konva.Circle({
x: pos.x,
y: pos.y,
fill: 'red',
radius: 20
});
var h = bounds.max.y - pos.y - circle.radius();
layer.add(circle).draw();
var last,
start,
u = 0,
distance = function(time) {
var ts = time/1000;
return u * ts + 0.5 * g * ts * ts;
},
lastPos;
var anim = new Konva.Animation(function(frame){
if(!start) { start = getTime(); }
var now = getTime();
var diff = now - start;
if(diff > params.delay) {
var y = distance(diff);
//debug({state: 'before', u: u, g: g, y: circle.position().y, dist: y});
if(u === 0) {
var cl = circle.y() + circle.radius();
circle.y(pos.y + y);
if(cl >= bounds.max.y) {
circle.move({
y: bounds.max.y - cl
});
layer.draw();
console.log('reverse u > 0');
u = Math.sqrt(2 * g * h);
g = -g;
start = null;
return false;
}
}
else { // when u < 0
console.log(diff, y, circle.y());
var cc = circle.y()
cc = cc - y;
circle.y(cc);
if(cc <= pos.y) {
circle.y(pos.y);
layer.draw();
console.log('reverse u = 0');
u = 0;
g = -g;
start = null;
return false;
}
}
return;
}
return false;
}, layer);
start = getTime();
anim.start();
});
To me it makes sense that the upward animation is going to be fast; the equations says so. But the animation as a result of it is not smooth. I am expecting that the ball ascends upwards fast, slows down prior to reaching its upward (apex) height, and then fall again.
Theoretically speaking the time taken for the two trips, should be the same. However, for this animation that isn't the case. So, either my equations must be wrong or I need to tweak something in the animation.
