Question

I have this function set up

if (window.innerWidth && window.innerHeight) {
 var winW = window.innerWidth;
 }

var xM = winW/180; 

var axis = 0;
$(window).bind('mousemove',function(e){
 var xCoord =  Math.floor(e.pageX/xM);
 axis = 0.6 * Math.sin(xCoord);
 var pageCoords = "( " + e.pageX + ", " + e.pageY + ", " + xCoord + " )";
     $("span#showme").text(pageCoords);
 });
    setInterval(function() {
     $("#welcome-background").fadeTo(0, 0.4 + axis);
 }, 100);

(for additional reference and working visual- http://jsfiddle.net/ySjqh/2/ )

The code works in theory to divide the page evenly into segments from 0-180, then calculates which segment the mouse appears in. Then uses the Math.sin() function to derive how much opacity to apply, based on a padded starting point of 0.4 opacity (jQuery style), and should use the mouse position to determine how much of the remaining 0.6 to apply based on its distance from center, where mouse at center-page should yield full opacity.

What I don’t get is why the script behaves this way, rolling through an entire sine wave when I’ve limited the input to the Math.sin(x) function to 1 < x < 180. If you replace xCoord with axis in the place where I build the jQuery text for #showme, you’ll see that it throws negative numbers- which shouldn’t be happening! … so I don’t get what the problem/behavior results from!!! Frustrating!!!

Answer 1

Just use:

xCoord = (xCoord * Math.PI) / 180;  // Convert value to Radians

and it works..

Sample