RGB 根据鼠标位置

Question

我正在尝试根据鼠标位置更改背景 RGB。这里可以看到例子http://rockit.folio.su/gexans/

前两个数字没有问题，它们是水平轴和垂直轴。但是第三个数字有一个问题，它必须相对于文档的对角线。我发现这是因为我根据 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 的值是什么。

z=x*y/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});

    });

}

example

Answer 1

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?

Answer 2

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

这表示值z 是鼠标和左上角之间的线的长度。我不确定您所说的“与文档对角线的距离”是什么意思，但如果您真的想要与这条线的最近距离，如下所示：

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

然后，您可以使用公式来计算离飞机最近的直线（google for formula for distance of point from line）。