RGB according to mouse position

I'm trying to change background RGB according to mouse position. Here you can see the example http://rockit.folio.su/gexans/

There are no problems with first two numbers, they are horizontal and vertical axes. But there is a problem with 3rd number which must be relative to the diagonal of the document. And I figured out that it's because i receive the number according to X and Y mouse position, but I need it according to how close the mouse is to the diagonal of the document and not a mouse-made rectangle.

Here is the code

function mousePage(e){
    var x = 0, y = 0, z =0;
    if (!e) e = window.event;
    x = e.pageX;
    y = e.pageY;
    z = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
    return {"x":x, "y":y, "z":z};
}

$(window).load(function(){
    $(document).mousemove(function(e) {
        var widthStep = $(document).width() / 256;
        var heightStep = $(document).height() / 256;
        var diagonalStep = Math.sqrt(Math.pow($(document).width(),2) + Math.pow($(document).height开发者_开发技巧(),2)) / 256;
        var mCur = mousePage(e);    
        var colorX = Math.floor( Number(mCur.x) / Number(widthStep) );
        var colorY = Math.floor( Number(mCur.y) / Number(heightStep) );
        var colorZ = Math.floor( Number(mCur.z) / Number(diagonalStep));
        var hue = 'rgb(' + colorX + ',' + colorY + ',' + colorZ + ')';
        $("body").css({backgroundColor: hue});
    });
});

Ok, so now I have a formula for the distance from cursor to the line like this

var numerator = Math.abs( ( A * m ) + ( B * n ) + C );
var denominator = Math.sqrt( Math.pow( A, 2 ) + Math.pow( B, 2 ) );
var d = numerator / denominator;

And I suppose that now I need to calculate the distance to top right, divide it by 256 = dStep, then distance to top right - var d and divide it by dStep = mColorZ and after that colorZ - mColorZ = the value that I need for my third colour?

And what is even more important, I have no idea what are the values for A, B, and C.

z=x*y/oldz; //the distance close from mouse to the diagonal, is this u want?

I'm not sure if this is what I want. What does this formula do?)

Update Right now I'm having this but it gives me Zero on the diagonal.

var width = $(document).width();
var height = $(document).height();
var widthStep = $(document).width()/256;
var heightStep = $(document).height()/256;
var diagonalStep = Math.sqrt(Math.pow(width,2)+Math.pow(height,2))/256;
var mCur = mousePage(e);

var numerator = Math.abs((height*Number(mCur.x))+(width*Number(mCur.y))+0);
var denominator = Math.sqrt(Math.pow(height,2)+Math.pow(width,2));
var d = numerator/denominator;

var vp_numerator = Math.abs((height*width)+(width*height)+0);
var vp_denominator = Math.sqrt(Math.pow(height,2)+Math.pow(width,2));
var vp_d = vp_numerator/vp_denominator;

var vp_dStep = vp_d/256;
var m_colorZ = Math.floor(Number(d)/Number(vp_dStep));

var colorX = Math.floor(Number(mCur.x)/Number(widthStep));
var colorY = Math.floor(Number(mCur.y)/Number(heightStep));
var colorZ = Math.floor(Number(mCur.z)/Number(diagonalStep)) - m_colorZ;
var hue = 'rgb(' + colorX + ',' + colorY + ',' + colorZ + ')';
$("body").css({backgroundColor: hue});

Update Ok, it's great that I have now the distance of cursor from the diagonal line. But now I need to have position of cursor ON the diagonal, if it's top-right part of the screen it's vertical line from cursor crossing the diagonal reltive to X, lower-left - horizontal relative to Y. And after that position on the line - distance from the line = color.

Update #2 I decided to finish it, but I got not the cool version but just a simple one. The third value always depends on hypotenuse. Very simple. Here's the code.

function rgbchange(target, source){
    var widthStep = source.width() / 256,
        heightStep = source.height() / 256,
        diagonal = Math.sqrt( Math.pow( source.width(), 2 ) + Math.pow( source.height(), 2 ) ),
        diagonalStep = diagonal / 256,
        colorX,
        colorY,
        colorZ,
        newDiagonal,
        hue;

    source.on('mousemove', function( event ){

        colorX = Math.floor( event.pageX / widthStep ),
        colorY = Math.floor( event.pageY / heightStep );
        newDiagonal = Math.sqrt( Math.pow( event.pageY, 2 )+ Math.pow( event.pageX, 2 ) );
        colorZ =  255 - Math.floor( ( diagonal - newDiagonal ) / diagonalStep );

        hue = 'rgb(' + colorX + ',' + colorY + ',' + colorZ + ')';

        target.css({'background-color': hue});

    });

}

The example

---

z = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

This is saying that the value z is the length of the line between the mouse and the upper-left-hand corner. I'm not sure what you mean by "distance from the diagonal of the document", but if you really want the closest distance to the line which looks like this:

 ____
|\  .|  <-- hypothetical point (.)
| \/ |  <-- perpendicular line
|  \ |
|   \|

Then you can use the formula for the closest line to a plane (google for formula for distance of point from line).

---

var oldz=Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
z=x*y/oldz; //the distance close from mouse to the diagonal, is this u want?