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

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

0 голосов
/ 14 июля 2011

Я пытаюсь изменить фон 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.

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 =color.

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

    });

}

Пример

Ответы [ 2 ]

0 голосов
/ 14 июля 2011 
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?
0 голосов
/ 14 июля 2011 
z = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

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

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

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

...