Wie die Farbe der hier auf der Mausposition (spezifische Farben)

Question

basiert Hintergrund zu ändern, ist der Code:

var $win = $(window), 
    w = 0,h = 0, 
    rgb = [], 
    getWidth = function() { 
     w = $win.width(); 
     h = $win.height(); 
    }; 

$win.resize(getWidth).mousemove(function(e) { 

    rgb = [ 
     Math.round(e.pageX/w * 255), 
     Math.round(e.pageY/h * 255), 
     150 
    ]; 

    $(document.body).css('background','rgb('+rgb.join(',')+')'); 
    //top center: rgb(85, 209, 79) 
    //right middle: rgb(104, 129, 197) 
    //bottom center: rgb(40,129,255) 
    //left middle: rgb(255, 184, 0) 
    //very center: rgb(15, 175, 168) 
}).resize(); 

Ich möchte die Hintergrundfarbe der Mausposition abhängig ändern, aber ich kann nicht Finde heraus, wie ich die Farbe der 5 Punkte angeben kann (oben, rechts, unten, links, Mitte).

################### 
#  O  # 
#     # 
#     # 
# O  O  O # 
#     # 
#     # 
#  O  # 
################### 

Also diese fünf Punkte, wo ich die Farben haben, und wenn ich die Maus zwischen diesen Punkten zu bewegen, will ich es von einem zum anderen wechseln. http://jsfiddle.net/710r4gaj/

Answer 1

Sie müssen eine Interpolationsmethode verwenden. Bilinear interpolation ist sehr beliebt.

Was ich tun würde wäre, Farben an den Punkten von Interesse (oben, links, rechts, unten und Mitte) zu spezifizieren. Dann definieren Sie die Farben in den Ecken, indem Sie den Durchschnitt der am nächsten liegenden Farben definieren (was nicht wirklich gut ist, am besten wäre es, sie auch zu spezifizieren).

das erledigt, einen Punkt in dem Bildschirm angegeben, I, in der Berechnung würde Teilquadrat der Punkt ist, und eine bilineare Interpolation zwischen den Scheitelpunkten dieses Quadrats berechnen (wie in der Abbildung erläutert)

hier ist eine Geige:

var $win = $(window), 
 
    w = 0, 
 
    h = 0, 
 
    rgb = [], 
 
    getWidth = function() { 
 
    w = $win.width(); 
 
    h = $win.height(); 
 
    }; 
 

 

 
var average = function(a, b) { 
 
    return [0.5 * (a[0] + b[0]), 0.5 * (a[1] + b[1]), 0.5 * (a[1] + b[1])]; 
 
} 
 

 
var center = [255, 255, 255]; // white 
 
var topMiddle = [0, 0, 0]; // black 
 
var leftMiddle = [255, 0, 0]; // red 
 
var rightMiddle = [0, 255, 0]; // green; 
 
var bottomMiddle = [0, 0, 255]; // blue; 
 

 

 
var topLeft = average(leftMiddle, topMiddle); 
 
var topRight = average(topMiddle, rightMiddle); 
 
var bottomLeft = average(leftMiddle, bottomMiddle); 
 
var bottomRight = average(bottomMiddle, rightMiddle); 
 

 

 
var interpolate2D = function(x00, x01, x10, x11, x, y) { 
 
    return x00 * (1 - x) * (1 - y) + x10 * x * (1 - y) + x01 * (1 - x) * y + x11 * x * y; 
 
} 
 

 
var interpolateArray = function(x00, x01, x10, x11, x, y) { 
 
    var result = [0, 0, 0]; 
 
    for (var i = 0; i < 3; ++i) { 
 
    result[i] = Math.floor(interpolate2D(x00[i], x01[i], x10[i], x11[i], x, y)); 
 
    } 
 
    return result; 
 
} 
 

 

 
$win.resize(getWidth).mousemove(function(e) { 
 
    var positionX = e.pageX/w; 
 
    var positionY = e.pageY/h; 
 
    var x00, x01, x11, x10; 
 

 
    if (positionX > 0.5 && positionY > 0.5) { 
 
    x00 = center; 
 
    x01 = bottomMiddle; 
 
    x10 = rightMiddle; 
 
    x11 = bottomRight; 
 
    positionX = 2.0 * (positionX - 0.5); // scale position back to [0, 1] 
 
    positionY = 2.0 * (positionY - 0.5); 
 
    } else if (positionX > 0.5 && positionY <= 0.5) { 
 
    x00 = topMiddle; 
 
    x01 = center; 
 
    x10 = topRight; 
 
    x11 = rightMiddle; 
 
    positionX = 2.0 * (positionX - 0.5); 
 
    positionY = 2.0 * (positionY); 
 
    } else if (positionX <= 0.5 && positionY <= 0.5) { 
 
    x00 = topLeft; 
 
    x01 = leftMiddle; 
 
    x10 = topMiddle; 
 
    x11 = center; 
 
    positionX = 2.0 * (positionX); 
 
    positionY = 2.0 * (positionY); 
 
    } else if (positionX <= 0.5 && positionY > 0.5) { 
 
    x00 = leftMiddle; 
 
    x01 = bottomLeft; 
 
    x10 = center; 
 
    x11 = bottomMiddle; 
 
    positionX = 2.0 * (positionX); 
 
    positionY = 2.0 * (positionY - 0.5); 
 
    } else { 
 
    // can't happen 
 
    } 
 

 

 

 
    rgb = interpolateArray(x00, x01, x10, x11, positionX, positionY); 
 

 

 
    $(document.body).css('background', 'rgb(' + rgb.join(',') + ')'); 
 
    //top: rgb(85, 209, 79) 
 
    //right: rgb(104, 129, 197) 
 
    //bottom: rgb(40,129,255) 
 
    //left: rgb(255, 184, 0) 
 
}).resize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>