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.

Community
  • 1
  • 1
Cristian
  • 495
  • 2
  • 9
  • 35

1 Answers1

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.

Cristian
  • 495
  • 2
  • 9
  • 35