Create smooth rotation in given time interval (+- x%) - javascript

I have got a cube in my scene which I want to rotate at a specific start velocity and in a given time interval.
In addition, the cube's end angle should be the same as the start angle.
Therefore, I thought of allowing +- 5% deviation of the time interval.
Here is my current status: http://jsfiddle.net/5NWab/1/.
Don't wonder that is currently working. The problem occurs if I change the time interval, e.g. by '3000': http://jsfiddle.net/5NWab/2/.
The essential move() method of my cube:
Reel.prototype.move = function (delta) {
if (this.velocity < 0 && this.mesh.rotation.x == 0) {
return false;
}
// Create smooth end rotation
if (this.velocity < 0 && this.mesh.rotation.x != 0) {
this.mesh.rotation.x += Math.abs(delta * this.speedUp * 0.5 * this.timeSpan);
if (Math.abs(this.mesh.rotation.x - 2 * Math.PI) < 0.1) {
this.mesh.rotation.x = 0;
}
}
else {
this.mesh.rotation.x += delta * this.velocity;
this.time -= delta;
this.velocity = this.speedUp * this.time;
}
}
The problem is that I cannot think of a solution or method in order to accomplish my topic.
It would not be so complex if I the variable delta would be constant.
It should be around 60fps = 1000/60 because I'm using requestAnimationFrame().
I have also found this question which could help finding the solution.
I think the code should either
slow down the velocity before the actual end is reached.
That should be the case if the final angle is a little bit greater than the desired (start) angle.
or should speed up the rotation speed after the actual end is reached.
That should be the case if the final angle is a little bit smaller than the desired (start) angle.
But what is when the angle is a hemicycle away from the desired one (i.e. 180° or PI)?
In order to clarify my question, here are my knowns and unknowns:
Known:
Start velocity
Time interval
Start angle (usually 0)
I want the cube to have the same start angle/position at the end of the rotation.
Because the FPS count is not constant, I have to shorten or lengthen the time interval in order to get the cube into the desired position.

If you want the rotation to end at a particular angle at a particular time, then I would suggest that instead of continually decrementing the rotation as your current code (2012-09-27) does, set the target time and rotation when you initialise the animation and calculate the correct rotation for the time of the frame recalculation.
So if you were doing a sine-shaped speed curve (eases in and out, linearish in the middle, nice native functions to calculate it), then (pseudocode not using your variables):
//in init
var targetTime = now + animationTime;
// normalize the length of the sine curve
var timeFactor = pi/animationTime;
var startAngle = ...
var endAngle = ...
var angleChange = endAngle - startAngle;
// inside the animation, at some time t
var remainingT = targetTime - t;
if(remainingT <= 0) {
var angle = endAngle;
} else {
var angle = startAngle + cos(remainingT * timefactor) * angleChange;
}
[Edited to add startAngle into andle calculation]
Because the cos function is odd (i.e. symmetric about the origin), as t approaches targetTime, the remainingT approaches zero and we move backward from pi to 0 on the curve. The curve of the sin shape flattens toward zero (and pi) so it will ease out at the end (and in at the beginning. There is an explicit zeroing of the angle at or past the targetTime, so that any jitter in the framerate doesn't just push it into an endless loop.

Here's one possible method, although it's not quite as good as I'd like: http://jsfiddle.net/5NWab/8/
The idea is to decrease the speed gradually, as you were doing, based on the amount of time left, until you get to a point where the amount of distance that the cube has to rotate to reach it's starting rotation (0) becomes greater than or equal to the amount of rotation that can possibly be made given the current velocity and the current amount of time left. After that point, ignore the time left, and slow down the velocity in proportion to the amount of rotation left.
This works fairly well for certain timeSpans, but for others the ending slowdown animation takes a little long.

Related

Increase velocity while smooth interpolating move animation with a 60fps game loop

I have a model with x y positions and vx vy velocity.
var model = { x: 0, y: 0, vx: 1, vy: 0 };
I have an update function that is called every 16ms, that updates the position based on velocity.
function update() {
model.x += model.vx;
model.y += model.vy;
}
Now I want to speed up this model by multiplying velocity with a boost:
var boost = 10;
function update() {
model.x += model.vx * boost;
model.y += model.vy * boost;
}
This causes the model to jump between positions, instead of interpolating and moving smoothly.
How can I increase the velocity and keep the object moving smooth?
The problem here is that you are multiplying the boost with the velocity.
Look what is actually going on. The value of boost is 10. Now suppose the velocity is 10 pixels/sec, but due to boost, it will be 100 pixels/sec. This is a huge difference. And this is obvious that it will jump.
You never want do this usually. I guess you would want to add the boost value with the velocity.
I assume you know the formulae of kinematics you studied in school.
One of those is,
v = u + at
See, here also you actually add the acceleration (boost in your case) to the velocity and not multiply it.
So, your code will be as follows:
var boost = 10;
function update() {
model.x += model.vx + boost;
model.y += model.vy + boost;
}
Or you can just decrease the value of boost.
Or you can add acceleration in your model that would increase whenever you want to boost up and will gradually decrease and the velocity will be normal after some time.
Still, you will end up with the same problem if the velocity (or acceleration) becomes too high.
If you really want to increase the velocity 10 times, then there's not much you can do.
Also, if you are using setInterval, I would recommend you to switch to requestAnimationFrame for 60 FPS animation.

PixiJS Random Rotation & Declining Speed

I am trying to get a simple random "rotation" based on the angle property, and would like to achieve the following.
Random Rotation, say "rotate" to 500 degrees
Start with a high speed and when getting nearer to the "rotated" degrees, lower the "rotating" speed so that the stop is not instant.
I put a basic concept of what I am trying to achieve on this link:
https://www.pixiplayground.com/#/edit/yalRPEN~6tg3seIHq5hbI
In the animate function, if I put the let degrees = 2000; as a Math.Random value it screws up the animation as it seems that this animate function is called numerous times?
Also, I tried using the speed property which would start off with a high value and starts to get lower with "rotations", but it seems to do nothing? Also tried using animationSpeed since I am using the angle property to change degrees, but I see no speed difference.
Any feedback would be appreciated.
Thanks
One approach is to change the angle and not the speed. Something like this:
var angleStep = 40;
let rotateSpeed = Math.floor(Math.random() * 300)
function animate() {
bunny.angle += angleStep;
angleStep = angleStep - angleStep/rotateSpeed;
if ((angleStep.toFixed(1) <= 0.0)) {
console.log("stopped rotation")
bunny.angle = bunny.angle;
return bunny.angle;
} else {
requestAnimationFrame(animate);
}
}

Rotate wheel and stop at specific point in EaselJs

I am new to EaselJs.
I am rotating a wheel with 9x numbers and 3 (0x), the total of 12 numbers. I am able to rotate the wheel by calling function, but I want to stop it on predefined specific point/number of the wheel.
var _oContainer;
this._init = function(iXPos,iYPos){
_oWheel = s_oSpriteLibrary.getSprite("wheel_circle");
_oContainer = new createjs.Container;
_oContainer.x = CANVAS_WIDTH - 200;
_oContainer.y = CANVAS_HEIGHT - 350;
s_oStage.addChild(_oContainer);
img = createBitmap(_oWheel);
img.regX = _oWheel.width / 2;
img.regY = _oWheel.height / 2;
_oContainer.addChild(img);
}
this.spin = function(b, a){
//var h = new createjs.Bitmap(s_oSpriteLibrary.getSprite('wheel_circle'));
createjs.Tween.get(_oContainer).to({
rotation: _oContainer.rotation + a
}, 2600, createjs.Ease.quartOut).call(function() {
_oContainer.rotation %= 360;
})
}
I am calling the spin function as this.spin(5, 1131.7511808994204); on every time button is clicked.
Right now it is spinning and stopping randomly on every button click. How can stop it on a specific number/position on the wheel?
What value should I give in rotation:?
There are a lot of factors in play to do something like this. I made a quick demo to show how I would do it:
Draw the wheel (at center) with segments. It is important to know how many segments you have so you can choose a place to "end"
Start spinning. Just increment the rotation each tick depending on how fast you want it to go.
When "stopping", you have to do math to determine where to land
To get a realistic "slow down", make sure the remaining rotation in the tween is enough so it doesn't speed up or slow down too rapidly
Here is the fiddle: https://jsfiddle.net/lannymcnie/ych1qt8u/1/
// Choose an end number. In this case, its just a number between 0 and the number of segments.
var num = Math.random() * segments | 0,
// How many degrees is one segment?
// In my demo I use radians for `angle`, so I have to convert to degrees
angleR = angle * 180/Math.PI,
// Take the current rotation, add 360 to it to take it a bit further
// Note that my demo rotates backwards, so I subtract instead of add.
adjusted = c.rotation - 360,
// Determine how many rotations the wheel has already gone since it might spin for a while
// Then add the new angle to it (num*angleR)
// Then add a half-segment to center it.
numRotations = Math.ceil(adjusted/360)*360 - num*angleR - angleR/2;
Then I just run a tween to the new position. You can play with the duration and ease to get something you like.
createjs.Tween.get(c)
.to({rotation:numRotations}, 3000, createjs.Ease.cubicOut);
Technically, I should change the duration depending on the actual remaining spin, since depending on the result, it might not be super smooth. This came close enough, so I left it as-is.
Hope that helps! Let me know if I can clarify anything further.

Coming up with an Algorithm

I have a circle in my canvas. The mouse position is calculated in relation to the canvas. I want the circle to move when the mouse is at <=100px distance from it. The minimum distance to start moving is 100px, at 0.5px/tick. It goes up to 2px/tick at 20px distance.
Basically, the closer the mouse is to the circle, the faster the circle should move.
What I have so far moves the circle when distance is less or equal to 100 -- (I'm using easeljs library)
function handleTick() {
distance = calculateDistance(circle, mX, mY);
if (distance<=100) {
circle.x += 0.3;
stage.update();
}
}
What I want
function handleTick() {
distance = calculateDistance(circle, mX, mY);
if (distance<=100) {
circleSpeed = // equation that takes distance and outputs velocity px/tick.
circle.x += circleSpeed;
stage.update();
}
}
So I thought this was a mathmatical problem and posted it on math exchange, but so far no answers. I tried googling several topics like: "how to come up with an equation for a relation" since I have the domain (100, 20) and the range (0.5, 2). What function can relate them?
Thing is I'm bad at math, and these numbers might not even have a relation - I'm not sure what I'm looking for here.
Should I write a random algorithm "circleSpeed = 2x + 5x;" and hope it does what I want? Or is it possible to do as I did - "I want these to be the minimum and maximum values, now I need to come up with an equation for it"?
A pointer in the right direction would be great because so far I'm shooting in the dark.
If I understand it correctly, you want circleSpeed to be a function of distance, such that
circleSpeed is 0.5 when distance is 100.
circleSpeed is 2 when distance is 20.
There are infinity functions which fulfill that, so I will assume linearity.
The equation of the line with slope m and which contains the point (x₀,y₀) is
y = m (x-x₀) + y₀
But in this case you have two points, (x₁,y₁) and (x₂,y₂), so you can calculate the slope with
y₂ - y₁
m = ───────
x₂ - x₁
So the equation of the line is
y₂ - y₁
y = ─────── (x - x₁) + y₁
x₂ - x₁
With your data,
0.5 - 2
y = ──────── (x - 20) + 2 = -0.01875 x + 2.375
100 - 20
Therefore,
circleSpeed = -0.01875 * distance + 2.375
I assume you want a linear relation between the distance and speed?
If so, you could do something like circleSpeed = (2.5 - 0.5(distance/20)).
That would, however set the speed linearly from 0 to 2.5 on the range (100 to 0), but by using another if like this if (distance < 20) circleSpeed = 2 you would limit the speed to 2.0 at 20 range.
It's not 100% accurate to what you asked for, but pretty close and it should look ok I guess. It could possibly also be tweaked to get closer.
However if you want to make the circle move away from the mouse, you also need to do something to calculate the correct direction of movement as well, and your problem gets a tiny bit more complex as you need to calculate speed_x and speed_y
Here is a simple snippet to animate the speed linearly, what that means is that is the acceleration of the circle will be constant.
if distance > 100:
print 0
elseif distance < 20:
print 2
else:
print 2 - (distance -20 ) * 0.01875
Yet other relationships are possible, (other easings you might call them) but they will be more complicated, hehe.
EDIT: Whoops, I’d made a mistake.

Math&JS: sinusoidal animation

given incremental values form 0 to infinite
I'd like to get back a value that increase, then decrease, then increase, then decrease...like a sine
I'm basically trying to get an animation of a ball that goes up and down, based on input values that are only linearly increasing (this value is given by scrolling the page for example to from 0px to TBD +1)
what the math function should I use?
thanks
Well, JavaScript has a sine function:
var y = Math.sin( Math.PI ); // returns 0
Math.sin() takes its argument in radians.
If you want to "slow down" the oscillation, what you have to do is stretch out the input parameter: just divide what you're passing into the sine function by some constant. For example, if x is your input parameter, and you want the animation to go half as fast, do this:
var y = Math.sin( x / 2 );
Also keep in mind that sine goes negative; its range is [-1,1]. So if you want to avoid the negative values, you'll have to add 1 to the output of the function:
var speed = 0.5; // 2=2x speed, 0.5=half speed, etc.
var y = (Math.sin( x * speed ) + 1)/2;
// y will range from [0,1]
See this jsfiddle for a demonstration: http://jsfiddle.net/r8yRN/

Categories