Zufällige Farben mit Differenz zu anderen Farbwerten

KeVoZ_

KeVoZ_

Aktives Mitglied
Hallo Java-Freunde^^

ich habe gerade 'ne Wand vor'm Kopf.., komme gerade nicht weiter und bräuchte bitte ganz kurz eure Hilfe.
Also, ich habe beliebig viele Div-Boxen (können mal mehr und mal weniger sein). Diese Boxen möchte ich, wenn man mit der Maus drüber geht,
Javascript: 
nRndCoA.onmouseover = function() {
    nRndCoA.style.backgroundColor = A;
}
dass sich die Hintergundfarbe ändert. Die Farben möchte ich per Zufall ermitteln:
Javascript: 
function randomColor(){   
    var rot = Math.floor(Math.random()*(240-10)) + 10;
    var gruen = Math.floor(Math.random()*(240-10)) + 10;
    var blau = Math.floor(Math.random()*(240-10)) + 10;
    var rgb = "rgba("+rot+", "+gruen+", "+blau+")";
    return rgb;
}
Jetzt kann aber tatsächlich, wie es der Zufall so will, passieren, dass die Farben fast identisch aussehen. Das möchte ich gerne verhindern und habe desshalb die Ausgabe als RGB gewählt, dass ich die einzelnen Werte mit den Farbwerten der anderen Boxen vergleichen kann.
- An dieser Stelle eine kurze Zwischenfrage. Gibt es hierfür auch eine andere, kürzere, einfachere Möglichkeit, die RGB-Werte mit denen der anderen Boxen zu vergleichen?

Ich habe dabei an eine Schleife gedacht, die die Werte so lange anpasst, bis die Anforderungen erfüllt sind. - Also dass die rot/grün/blau - Werte jeweils eine gewisse Differenz zwischen den Werten der anderen rgb - Farbwerten der anderen Boxen haben.

Ich würde mich sehr über Unterstützung, Hilfe, Tipps, Anregungen und Beispiele freuen :)

Vielen Dank
Mit freundlichen Grüßen
Kevin Wilde
 
KeVoZ_

KeVoZ_

Aktives Mitglied
Also ich habe mir viel Code dazu angeschaut. Keiner hatte allerdings so funktioniert wie er sollte...
Ich hatte den HSV. Den H hatte ich random einen Wert von 1 bis 359 zugewiesen. S und V habe ich auf einen schönen Farbton 70 gesetzt. Ja und dann nur noch in rgb umwandeln... hat nicht so funktioniert wie es sollte. Auch auf einen festen Wert HSV, welcher eigentlich anders aussehen sollte (laut GIMP), wollte nicht so dargestellt werden...
Kann mir da vielleicht jemand weiterhelfen?
 
_Andi84

_Andi84

Mitglied
Ich habe das mal versucht zu lösen:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script>

function randomColor(string) {
   
    var box = document.getElementById(string);
   
    var colors = new Array;
    colors[0] = new Array;
    colors[1] = new Array;
    colors[2] = new Array;
   
    for(var i = 1; i <= 3; i++) {
       
       
        switch(i) {
        case 1:
            colors[0] = Math.floor((Math.random() * 85 * (i+2) ) + 0);
            colors[1] = Math.floor((Math.random() * 85 * (i+1) ) + 0);
            colors[2] = Math.floor((Math.random() * 85 * (i+3) ) + 0);
            break;
        case 2:
            colors[0] = Math.floor((Math.random() * 85 * (i+3) ) + 0);
            colors[1] = Math.floor((Math.random() * 85 * (i+2) ) + 0);
            colors[2] = Math.floor((Math.random() * 85 * (i+1) ) + 0);
            break;
        case 3:
            colors[0] = Math.floor((Math.random() * 85 * (i+2) ) + 0);
            colors[1] = Math.floor((Math.random() * 85 * (i+3) ) + 0);
            colors[2] = Math.floor((Math.random() * 85 * (i+1) ) + 0);
            break;   
        }
    }
   
    var r = colors[0];
    var g = colors[1];
    var b = colors[2];
    var color = "rgb(" + r + ", " + g + ", " + b + ")";

    box.style.background = color;
   
}

</script>
<style>
    #box1, #box2, #box3, #box4 {
        width: 300px;
        height: 150px;
        border: 1px solid black;
        margin: 20px;
    }
</style>
</head>
<body>
<div id="box1" onmouseover=" randomColor('box1');" >1 </div>
<div id="box2" onmouseover=" randomColor('box2');" >2 </div>
<div id="box3" onmouseover=" randomColor('box3');" >3 </div>
<div id="box4" onmouseover=" randomColor('box4');" >4 </div>



</body>
</html>
 
_Andi84

_Andi84

Mitglied
Äh ja... stimmt.

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script>

function randomColor(string) {
   
    var box = document.getElementById(string);
   
    var color = new Array;
    color[0] = new Array;
    color[1] = new Array;
    color[2] = new Array;
   
   
    for(var i = 0; i < 3; i++) {       
        color[i] = Math.floor((Math.random() * 255 ) + 0);   
    }
   
    var stop = false;
   
    var abstand = 20;
   
    while( !stop ) {   
       
        if( Math.abs(color[0] - color[1]) >= abstand && Math.abs(color[0] - color[2]) >= abstand ) {
       
            stop = true;
       
        } else {
       
            for(var i = 0; i < 3; i++) {       
                color[i] = Math.floor((Math.random() * 255 ) + 0);   
            }
           
        }
       
    }
   
    console.log("farbe1: "  + color[0]);
    console.log("farbe2: "  + color[1]);
    console.log("farbe3: "  + color[2]);
   
    var color = "rgb(" + color[0] + ", " + color[1] + ", " + color[2] + ")";

    box.style.background = color;
   
}

</script>
<style>
    #box1, #box2, #box3, #box4 {
        width: 300px;
        height: 150px;
        border: 1px solid black;
        margin: 20px;
    }
</style>
</head>
<body>
<div id="box1" onmouseover=" randomColor('box1');" >1 </div>
<div id="box2" onmouseover=" randomColor('box2');" >2 </div>
<div id="box3" onmouseover=" randomColor('box3');" >3 </div>
<div id="box4" onmouseover=" randomColor('box4');" >4 </div>



</body>
</html>
 
Zuletzt bearbeitet:

Aktuelle Jobs

Neue Themen


Oben