Smooth casino wheel animation

Question

I am developing a casino based game using html5. The animation works fine, but it’s not quite smooth, that is, as soon as the wheel stops spinning, I move the ball as the final repositioning to smooth the transition, but this does not meet expectations. Full code here

Function BallReposition - is executed after I stopped the wheel movement to finally change the position of the ball to give the animation an animation.

function ballReposition(){ curX = findNearestOnCircle(curX); if(curX > deadXRight){ sign = "-"; }else if(curX < deadXLeft){ sign = "+"; } if(sign == "+"){ curX = parseInt(curX) + ballRepositionIncVal; curY = Math.floor(Math.abs(getYOnCircle(curX, 130, 1)) + 0.5); }else{ curX = parseInt(curX) - ballRepositionIncVal; curY = Math.floor(Math.abs(getYOnCircle(curX, 130, 0)) + 0.5); } var xy = normalizeXY(curX, curY); curX = parseInt(xy.split("-")[0]); curY = parseInt(xy.split("-")[1]); surface = document.getElementById("myCanvas"); var surfaceContext = surface.getContext("2d"); //removing older ball image. surfaceContext.save(); // Translate to the center point of our image surfaceContext.translate(happy.width * 0.5, happy.height * 0.5); // Perform the rotation surfaceContext.rotate(DegToRad(angle)); // Translate back to the top left of our image surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5); surface.getContext("2d").drawImage(happy, 0, 0); surface.getContext("2d").drawImage(ball, curX, curY); console.log(curX + curY); surfaceContext.restore(); ballRepositionIncVal-=5; if(ballRepositionIncVal <= 0){ clearInterval(myIntervalVar); } 

}

Other features -

• drawCanvas - loads images, and as soon as the images are loaded, it starts calling a loop function that will rotate the wheel and move the ball counterclockwise.
• normalizeXY - is used to place the ball in some discrete positions, that is, in the correct positions below the number of wheels.

EDIT - updated script configuration here

Answer 1

To create a realistic spinning wheel, you can use a logarithmic approach to reduce wheel speed.

This means that the angle is reduced by a small percentage for each frame. Since this is a percentage, you get a smooth final turn (you will also notice that you get the infamous wheel aliasing effect ).

This online demo shows a closed loop (implement as you please):

 var angle = 2; /// start angle in radians ctx.translate(w, h); /// prepare canvas for rotation (w and h = 50%) ctx.globalAlpha = 0.67; /// optional bonus: motion blur(-ish) loop(); /// start loop function loop() { ctx.rotate(a); /// use incremental rotation ctx.drawImage(img, -w , -h); /// spin down and only loop if angle > certain value a *= 0.995; /// continue if there is enough "inertia" if (a > 0.001) requestAnimationFrame(loop); } 

The threshold for continuing the cycle determines how "cruel" you want to stop. If you want the wheel to look heavier (more mass), you can reduce the angle with an even smaller increment (for example, try 0.998 ).

For the ball to bounce, you need to resort to physical modeling, or at least pseudo-physical modeling. This includes collision detection for all small parts on the wheel, as well as checking and positioning sub-items (beam casting) along the z axis.

I feel this is a little wide to describe here on SO, but find a good article on collision detection and physical modeling. Here is a good start with the basics .