RGB в зависимости от положения мыши

Question

Я пытаюсь изменить фон RGB в соответствии с положением мыши. Здесь вы можете увидеть пример http://rockit.folio.su/gexans/

С первыми двумя числами проблем нет, это горизонтальная и вертикальная оси. Но есть проблема с 3-м числом, которое должно быть относительно диагонали документа. И я понял, что это потому, что я получаю число в соответствии с положением мыши по осям X и Y, но оно мне нужно в зависимости от того, насколько близко мышь расположена к диагонали документа, а не к прямоугольнику, созданному мышью.

Вот код

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});
    });
});

Хорошо, теперь у меня есть формула для расстояния от курсора до линии, как это

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;

И я предполагаю, что теперь мне нужно вычислить расстояние до верха справа, разделить его на 256 = dStep, затем distance to top right - var d и разделить его на dStep знак равно mColorZ и после этого colorZ - mColorZ = значение, которое мне нужно для моего третьего цвета?

И что еще более важно, я понятия не имею, каковы значения для A, B, and C,

г = х * у /oldz; // расстояние близко от мыши к диагонали, это ты хочешь?

Я не уверен, что это то, чего я хочу. Что делает эта формула?)

Обновление Прямо сейчас у меня это, но это дает мне ноль по диагонали.

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});

Обновление Хорошо, здорово, что у меня теперь расстояние от курсора до диагональной линии. Но теперь мне нужно иметь положение курсора на диагонали, если это верхняя правая часть экрана, это вертикальная линия от курсора, пересекающего диагональ относительно X, нижнего левого - горизонтальная относительно Y. И после этого position on the line - distance from the line = цвет

Обновление № 2 Я решил закончить, но я получил не классную версию, а просто простую. Третье значение всегда зависит от гипотенузы. Очень просто. Вот код

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});

    });

}

Пример

Answer 1

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

Это говорит о том, что значение z это длина линии между мышью и верхним левым углом. Я не уверен, что вы подразумеваете под "расстоянием от диагонали документа", но если вы действительно хотите самое близкое расстояние до линии, которая выглядит так:

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

Тогда вы можете использовать формулу для ближайшей линии к плоскости (Google для formula for distance of point from line).

Answer 2

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?