Rotating a circle image shifts it's position

Question

I am trying to rotate a circle image using jquery rotate plugin. But, I observe that the circle image appears to be oscillating about it's center while rotating. Something like a linear movement.

In IE7, it's pretty much observable. In Chrome/Firefox, if you zoom a bit, this wobbling issue can be observed.

I tried to rotate the image using Raphael library too. But still, the circle was wobbling.

Then I rotated the image with a c# program to see if the problem is with the browsers' graphic engine. But even here this issue is observed. I even took various images to see if the circle was imperfect. But, all the images show this behavior.

Can this be happening because of anti aliasing? Or, is it just an optical illusion?

If not, then what else can be the reason?

I am using jqueryrotate plugin rotate method to do this. $('#circleimg').rotate(Position);

Answer 1

Check this jsFiddle. Btw, this is the kind of source code you can include yourself in your question to make answering it easier for others.

http://jsfiddle.net/KyJzQ/

I used this rotate plugin since you did not specify which one you used.

HTML

<img id="circleimg" src="http://i.imgur.com/KgUDClr.png">
&nbsp;
<img id="circleimg2" src="http://i.imgur.com/sK4qP6z.png">

JAVASCRIPT

var rot = 0;

window.setInterval(function() {
    $('#circleimg').rotate(rot);
    $('#circleimg2').rotate(rot);
    rot += 1;
    },
    5
);

I think the circle you've provided is not actually a perfect circle, hence the tiny "oscillations" you see.

I added another circle that I rendered myself. If you zoom in closely enough you will see jagged pixels moving around the edge of my circle, but I don't see any way around this since the jQuery plugin is not actually re-rendering the image. I don't see any of the "oscillating" you mention in my circle.

This issue is more about vector art than it is about programming. Get a nice vector graphics program and render the nicest circle you can. Even the one I made is not really that good. Or use HTML5 and canvas to draw dynamically, rather than moving a static image around.