0

I'm trying to use javascript to make an image face the mouse of the user, I'm close but my calculations are a bit off (the rotation on the x-axis seems to be inverted). I based my code of this link: rotate3d shorthand

javascript:

$(document).mousemove(function(e){
   pageheight = $(document).height();
   pagewidth = $(document).width();
   widthpercentage = e.pageX / pagewidth;
   heightpercentage = e.pageY / pageheight;
   specialW = (widthpercentage * 180 - 90);
   specialH = (heightpercentage * 180 - 90);

   function toRadians(degrees) {
     radians = degrees * (Math.PI /180);
     return radians;
    }

   function matrix(x, y, z, rads) {
    var sc = Math.sin(rads / 2) * Math.cos(rads / 2);
    var sq = Math.pow(Math.sin(rads / 2), 2);

    var array = [];
    var a1 = 1 - 2 * (Math.pow(y, 2) + Math.pow(z, 2)) * sq,
        a2 = 2 * (x * y * sq - z * sc),
        a3 = 2 * (x * z * sq + y * sc),
        a4 = 0,
        b1 = 2 * (x * y * sq + z * sc),
        b2 = 1 - 2 * (Math.pow(x, 2) + Math.pow(z, 2)) * sq,
        b3 = 2 * (y * z * sq - x * sc),
        b4 = 0,
        c1 = 2 * (x * z * sq - y * sc),
        c2 = 2 * (y * z * sq + x * sc),
        c3 = 1 - 2 * (Math.pow(x, 2) + Math.pow(y, 2)) * sq,
        c4 = 0,
        d1 = 0,
        d2 = 0,
        d3 = 0,
        d4 = 1;
      array.push(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);
        return array;
        }

        xmatrix = matrix(1, 0, 0, toRadians(specialH));
        ymatrix = matrix(0, 1, 0, toRadians(specialW));

        function multiply(xarray, yarray) {
            var newarray = [];
            var a1 = (xarray[0] * yarray[0]) + (xarray[4] * yarray[1]) + (xarray[8] * yarray[2]) + (xarray[12] * yarray[3]),
                a2 = (xarray[0] * yarray[4]) + (xarray[4] * yarray[5]) + (xarray[8] * yarray[6]) + (xarray[12] * yarray[7]),
                a3 = (xarray[0] * yarray[8]) + (xarray[4] * yarray[9]) + (xarray[8] * yarray[10]) + (xarray[12] * yarray[11]),
                a4 = (xarray[0] * yarray[12]) + (xarray[4] * yarray[13]) + (xarray[8] * yarray[14]) + (xarray[12] * yarray[15]),
                b1 = (xarray[1] * yarray[0]) + (xarray[5] * yarray[1]) + (xarray[9] * yarray[2]) + (xarray[13] * yarray[3]),
                b2 = (xarray[1] * yarray[4]) + (xarray[5] * yarray[5]) + (xarray[9] * yarray[6]) + (xarray[13] * yarray[7]),
                b3 = (xarray[1] * yarray[8]) + (xarray[5] * yarray[9]) + (xarray[9] * yarray[10]) + (xarray[13] * yarray[11]),
                b4 = (xarray[1] * yarray[12]) + (xarray[5] * yarray[13]) + (xarray[9] * yarray[14]) + (xarray[13] * yarray[15]),
                c1 = (xarray[2] * yarray[0]) + (xarray[6] * yarray[1]) + (xarray[10] * yarray[2]) + (xarray[14] * yarray[3]),
                c2 = (xarray[2] * yarray[4]) + (xarray[6] * yarray[5]) + (xarray[10] * yarray[6]) + (xarray[14] * yarray[7]),
                c3 = (xarray[2] * yarray[8]) + (xarray[6] * yarray[9]) + (xarray[10] * yarray[10]) + (xarray[14] * yarray[11]),
                c4 = (xarray[2] * yarray[12]) + (xarray[6] * yarray[13]) + (xarray[10] * yarray[14]) + (xarray[14] * yarray[15]),
                d1 = (xarray[3] * yarray[0]) + (xarray[7] * yarray[1]) + (xarray[11] * yarray[2]) + (xarray[15] * yarray[3]),
                d2 = (xarray[3] * yarray[4]) + (xarray[7] * yarray[5]) + (xarray[11] * yarray[6]) + (xarray[15] * yarray[7]),
                d3 = (xarray[3] * yarray[8]) + (xarray[7] * yarray[9]) + (xarray[11] * yarray[10]) + (xarray[15] * yarray[11]),
                d4 = (xarray[3] * yarray[12]) + (xarray[7] * yarray[13]) + (xarray[11] * yarray[14]) + (xarray[15] * yarray[15]);

        newarray.push(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);
        return newarray;
        }
        var newmatrix  = multiply(xmatrix, ymatrix);

        $('#page1 img').css('transform', 'matrix3d(' + newmatrix[0] + ','  + newmatrix[1] + ',' + newmatrix[2] + ',' + newmatrix[3] + ',' + newmatrix[4] + ',' + newmatrix[5] + ',' + newmatrix[6] + ',' + newmatrix[7] + ',' + newmatrix[8] + ',' + newmatrix[9] + ',' + newmatrix[10] + ',' + newmatrix[11] + ',' + newmatrix[12] + ',' + newmatrix[13] + ',' + newmatrix[14] + ',' + newmatrix[15] + ')');
});

I know it's a lot of code, but if I could get a second a opinion, It would be greatly appreciated. Thanks

No plugins please.

4
  • 1
    Are you trying to align the image with the mouse cursor, on a 2D plane? Could you not use a simple (css) transform:translate3d(x, y, 0)? Maybe I'm missing something. Jul 21, 2016 at 14:00
  • what is your question ???
    – user4520208
    Jul 21, 2016 at 14:04
  • Have a look at this Jul 21, 2016 at 14:07
  • sorry for the misunderstanding, I was wondering how to I make an image rotate on it's x and y axis to make it look like it's facing the mouse.
    – Cristian
    Jul 21, 2016 at 14:21

1 Answer 1

0

I actually just edited the matrix() function and added this right before array.push:

if ( y = 1 ) {
    a3 = a3 * -1;
    c1 = c1 * -1;
}

And this fixed the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.