Ladebalken: Farbverlauf von Rot über Gelb nach Grün berechnen. Wenn A 50% von B ist, sollen X und Y beide 100% sein.

Question

Wenn A 50% von B ist, sollen X und Y beide 100% sein. Ist A von B weniger als 50% soll X fallen, ist es mehr, dann Y.

X soll 100% und Y 0% sein wenn A 100% von B ist, Y soll 100% und X 0% sein wenn A 0% von B ist. Wenn A 50% von B ist, sollen X und Y beide 100% sein.

Tja, Frage im Titel : D

Zum besseren Verständnis die Textaufgabe(Informatik):

"... Der Ladebalken soll je nach Zustand unterschiedlich eingefärbt werden. Benutze einen Farbverlauf von Rot über Gelb nach Grün. ..."

Ich färbe den Balken mit RGB, also (255, 255, 255) (Rot, Grün, Gelb). (255, 0, 0) wäre Rot, (0, 255, 0) wäre Grün und (255, 255, 0) wäre Gelb. Den Zustand des Ladebalken berechne ich durch die Größe der Datei und der bereits übertragenen Daten, also p% = Dateigröße / GeladeneDaten. Daten in KiloByte.

Gegeben ist eine Datei von 5000 kB, sind erst 100 kB hochgeladen sollte der Ladebalken beinahe Rot sein, sind 2500 kB hochgeladen soll er Gelb sein und sind 5000 kB hochgeladen soll er Grün sein.

Ich habe folgendes versucht:

$$ rot = 255 * (100 * \frac{GeladeneDaten}{Dateigröße}) / 100 $$

$$ gruen = 255 - (255 * (100 *  \frac{GeladeneDaten}{Dateigröße}) / 100)$$

Das Problem ist, dass wenn der Ladebalken bei 50% ist, Rot und Grün jeweils auch nur 50% sind, dann müssten sie aber 100% sein.

Helft mir TT

Answer 1

Nette Aufgabe. Hier ein Lösungsvorschlag umgesetzt in Javascript:

var i = 0; // 0 bis 100 %
var r = 255;
var g = 0;
var b = 0;

while(i <= 100)
{
    r = (i<=50) ? 255 : Math.round(255 - 255*(i-50)/50);
    g = (i<=50) ? Math.round(255-255*(50-i)/50) : 255;
    console.log(i+'% = rgb('+r+'|'+g+'|'+b+')');
    i++;
}

Output für alle 10 %-Schritte:

0% = rgb(255|0|0)
10% = rgb(255|51|0)
20% = rgb(255|102|0)
30% = rgb(255|153|0)
40% = rgb(255|204|0)
50% = rgb(255|255|0)
60% = rgb(204|255|0)
70% = rgb(153|255|0)
80% = rgb(102|255|0)
90% = rgb(51|255|0)
100% = rgb(0|255|0)

Ich weiß nicht, wie weit du schon in der Informatik bist. Falls die Frage aufkommt was die Zeichen ? und : sollen, das nennt man eine Shorthand-Notation, also:

r = (i<=50) ? 255 : Math.round(255 - 255*(i-50)/50);

ist das Gleiche wie: 

if(i<=50) { r = 255; } else { r = Math.round(255 - 255*(i-50)/50); }

Answer 2

Grafisch gesehen verläuft also dein X bis zur Mitte auf 0% und steigt dann linear auf 100%.

Y dagegen beginnt bei 100% um ab der Mitte linear auf 0% zu sinken.
Dafür brauchst du mathematisch gesehen je zwei Funktionen (zwei definitionsbereiche)

informatisch gesehen würdest du mit einer if Else Anweisung entscheiden welche Funktion du wann nimmst.

da deine Formel auf der mobilen Seite ziemlich abgeschnitten ist, kann ich dir grade schlecht die Lösung mit rot/ grün hinschreiben ...

müsste dann ungefähr so ausgehen:

erste hälfte: rot = 0, grün = 255

zweite hälfte:Rot und grün: deine Funktionen um die hälfte nach Links rechts verschieben

Comments

Habe gerade die TeX-Formel vom Fragesteller korrigiert. Müsste jetzt lesbarer sein.

PS: Die "100*" und die "/100" kürzen sich weg.

---

Mir ist da ein kleiner Denkfehler unterlaufen:

X müsste bei 0% anfangen linear bis zur Mitte auf 100% steigen und dann auf 100% bleiben.

Also muss die Funktion für rot:

erste hälfte: von (0;0) bis (breite/2; 255) gehen

zweite hälfte: rot = 255