CODEWITHSUNDEEP
javascriptjqueryhtmlcss
unclemeat
unclemeat

Reputation: 5207

jQuery image rotation to follow angle of sine wave

SOLVED -

I am trying to animate an image to rotate following the angle of a sine wave - the sine wave is created using the jQuery.path plugin.

The problem is with getting a smooth rotation.

I am currently using the jQuery rotate plugin for the rotation, which - as it currently stands - is not creating a smooth rotation.

See http://hellosmithers.com/GNU/STALLMANQUEST.html for JavaScript and jQuery.

The script is relatively heavily commented.

Currently the rotation just repeats and takes a certain amount of time to complete - this means it will not work for all screen sizes as the sine wave takes longer to complete the wider the screen.

function mRot() { // image rotation - it goes from rA[0] (-8 degrees) to rA[1] (8 degrees) then swaps the values
    // flip the values in rA - making the rotation oposite each iteration of this funciton
    rA[1] = [rA[0], rA[0] = rA[1]][0];
    $("#rmat").rotate({
        duration: 1700,
        angle: rA[0],
        animateTo: rA[1],
        callback: mRot
    }); // I would like to remove this function - instead tying the rotation into the sine wave function somehow
}

The sine wave is created as follows:

SineWave = function() { // create the sine wave - as per https://github.com/weepy/jquery.path
    this.css = function(p) {
        s = Math.sin(p * 12);
        x = winWidth - p * (winWidth + 250);
        y = s * 40 + (winHeight - 440);
        return {top: y + "px", left: x + "px"};
    }
}

Thanks

Upvotes: 2

Views: 765

Answers (1)

unclemeat
unclemeat

Reputation: 5207

I figured it out - the angle is derived from p, I've used (p * 12) - 

SineWave = function() {
    this.css = function(p) {
        rA[0] = p * 12; // get the angle
        s = Math.sin(p * 12);
        x = winWidth - p * (winWidth + 250);
        y = s * 40 + (winHeight - 440);
        return {top: y + "px", left: x + "px"};
    }
}

The function mRot uses rA - 

function mRot() {
    rA[0] = prA[1]; // rA[0] will always be the previous rA[1]
    if (prA[1] < 0) rA[1] = Math.abs(rA[1]); // if the previous rA[1] is a negative number, make the current rA positive.
    else rA[1] = -(rA[1]); // otherwise make it negative
    prA = rA;
    $("#rmat").rotate({
        duration: 1500,
        angle: rA[0],
        animateTo: rA[1],
        callback: mRot
    });
}

Making sure to declare the array variables - 

rA = new Array (-8, 8);
prA = rA[1] = [rA[0], rA[0] = rA[1]][0];

If you want to see the full code - visit http://hellosmithers.com/GNU/STALLMANQUEST.html

Upvotes: 3

Related Questions