Hi, I'm trying to create an image animation using Raphael JS.

I want the effect of a bee moving randomly across the page, I've got a working example but it's a bit "jittery", and I'm getting this warning in the console:

"Resource interpreted as image but transferred with MIME type text/html"

I'm not sure if the warning is causing the "jittery" movement or its just the way I approached it using maths.

If anyone has a better way to create the effect, or improvements please let me know.

I have a demo online here

and heres my javascript code:

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;  
} 

function BEE(x, y, scale) {
    this.x = x;
    this.y = y;
    this.s = scale;
    this.paper = Raphael("head", 915, 250);

    this.draw = function() {
        this.paper.clear();
        this.paper.image("bee.png", this.x, this.y, 159*this.s, 217*this.s);
    }

    this.update = function() {
        var deg = random(-25, 25);

        var newX = Math.cos(Raphael.rad(deg)) * 2;
        var newY = Math.sin(Raphael.rad(deg)) * 2;

        this.x += newX;
        this.y += newY;

        if( this.x > 915) {
            this.x = 0;
        }
        if( this.y > 250 || this.y < 0 ) {
            this.y = 125;
        }
    }
}

$(document).ready(function() {

    var bee = new BEE(100, 150, 0.4);
    var timer = setInterval(function(){
        bee.draw();
        bee.update();
    }, 15);
}