RGB Color Game

In 5 Minuten erfährst du, was das RGB-Modell ist und wie man ein kleines Spiel in Javascript programmiert.

Was ist RGB?

RGB steht für Red, Green, Blue bzw. Rot, Grün, Blau. Das RGB-Farbmodell ist ein sogenanntes additives Farbmodell. Das rote, grüne und blaue Licht wird auf verschiedene Arten addiert, um eine breite Palette von Farben zu reproduzieren. Wie man schnell erkennt, stammt der Name des Modells von den drei Grundfarben Rot, Grün und Blau.

Die Hauptanwendung des RGB-Farbmodells besteht in der Erfassung, Darstellung und Anzeige von Bildern in elektronischen Systemen. Beispielsweise bei Fernsehern und Computern, obwohl es auch in der konventionellen Fotografie verwendet wurde. Bereits vor dem elektronischen Zeitalter gab es eine Theorie zum RGB-Farbmodell, basierend auf der menschlichen Farbwahrnehmung. RGB ist ein geräteabhängiges Farbmodell. Dies bedeutet, dass unterschiedliche Geräte einen bestimmten RGB-Wert unterschiedlich erkennen oder reproduzieren, da die Farbelemente (wie Leuchtstoffe oder Farbstoffe) und ihre Reaktion auf die einzelnen R-, G- und B-Stufen von Hersteller zu Hersteller unterschiedlich sind.

Die komplementär Farben sind zwischen Rot und Grün: Gelb, zwischen Grün und Blau: Cyan, zwischen Blau und Rot: Magenta.

Typische RGB-Eingabegeräte sind Videokameras, Bildscanner und Digitalkameras. Typische RGB-Ausgabegeräte sind Fernsehgeräte verschiedener Technologien, Computer- und Handy-Displays, Videoprojektoren und mehrfarbige LED-Displays. Aber Achtung! Farbdrucker sind dagegen keine RGB-Geräte, sondern subtraktive Farbgeräte und benützen typischerweise das CMYK-Farbmodell.

Das CMYK-Modell vs. das RGB-Modell

CMYK ist ein Vierfarbenmodus, der die Farben Cyan, Magenta, Gelb und Schwarz in verschiedenen Mengen verwendet, um beim Drucken alle erforderlichen Farben zu erzeugen. Es ist ein subtraktiver Prozess. Das heisst, dass jede zusätzliche Farbe, die entfernt oder absorbiert wird, mehr Licht erfordert, um Farben zu erzeugen. Wenn die ersten drei Farben addiert werden, ist das Ergebnis nicht, wie beim RGB-Modell reines Schwarz, sondern ein sehr dunkles Braun. Die K-Farbe oder Schwarz wird verwendet, um das Licht vollständig aus dem gedruckten Bild zu entfernen, damit man mit dem Auge die Farbe als als schwarz wahrnimmt.

CMYK ist das primäre Farbmodell, das von Farbdruckern verwendet wird. Alle gedruckten Medien wie Flyer, Poster und Kataloge werden in CMYK gedruckt. Dies bedeutet, dass deine Bilder digital ins CMYK-Modell umgewandelt werden müssen, um so farbecht wie möglich zu erscheinen. Es gibt viele RGB-Farben, die CMYK-Drucker nicht reproduzieren können. Daher sollte man sich bewusst sein, was die Unterschiede zwischen dem CMYK- und RGB-Modell sind, vor allem bei der Benützung der Adobe Creative Suite.

Zurück zum RGB-Spiel

Auf der RGB Color Game Webseite wurde ein Spiel in JavaScript programmiert, um die RGB-Farben zu erraten.

Die RGB-Werte sind immer zwischen 0 und 255 gross.  Bei 255 gilt der Wert als rot und bei 0 als weiss (keine ersichtliche Farbe). Alle Werte werden bis 255 immer rötlicher. Dasselbe gilt bei dem Wert von Grün (0: keine Farbe – 255: grün) und Blau (0: keine Farbe – 255: blau). Nun liegt es an dir, die korrekte Farbe zu erraten!

Hier ein Beispiel:

  1. Man sieht, dass die gesuchte Farbe im obigen Bild der Wert 242 von 255 Rot, 6 von 255 Grün und 232 von 255 Blau enthält.
  2. Demnach ist die Farbe fest mit Rot und Blau vermischt und sehr wenig mit Grün, so dass Grün bei bei der Überlegung vernachlässigt werden kann.
  3. Die Mischung von Blau und Rot ergibt Magenta. Demnach ist die Farbe Magenta die Lösung.

 

Game-Engine: Farbengenerator

(nur für Javascript-Interessierte)
Die Game-Engine des Spiels, also die Funktion, die das Spiel steuert bzw. zu einem Spiel macht, ist sehr einfach konzipiert. Im folgenden wird erklärt, wie ein Quadrat die zufällige Farbe erhält. Die folgenden Zeilen Code sind kein Tutorial. Es wird bloss gezeigt, wie einfach man ein Spiel bauen kann. Hier ist der Ausschnitt vom Code:

  1. Wir erzeugen von jeder Variable r, g und b eine zufällige Zahl zwischen 0 und 255.
function randomColor(){

// nimm eine Zahl für r, Rot von 0 - 255

var r = Math.floor(Math.random() * 256);

// nimm eine Zahl für g, Grün von 0 - 255

var g = Math.floor(Math.random() * 256);

// nimm eine Zahl für b, Blau von 0 - 255

var b = Math.floor(Math.random() * 256);

return "rgb(" + r + ", " + g +", " + b + ")";

};

2. Danach stellen wir diese obige Funktion durch einen Loop in ein Quadrat. Lies dazu in den Kommentaren weiter.

//Ich kreiere jetzt eine Funktion mit Zahlen(num)

function generateRandomColors(num){

// Ich kreiere eine Array

var arr = [ ];

// Integriere die obige Funktion “randomColor” in diese Array durch ein FOR-Loop

for(var i = 0; i < num; i++){

//die drei Variablen r, g, b werden in die Array eingefügt (.push)

arr.push(randomColor());

}

//Die Array wird ausgegeben

return arr;

}

3. Nun wird diese in einem Array in einem Quadrat mittels «var colors» eingebunden (Diese Einbindung ist komplizierter).

//numSquares ist 6

var colors = generateRandomColors(numSquares);

Gratuliere! Du verstehst schon, wie ich die Farbe zufällig generiert habe. Geh jetzt auf meine Webseite und spiel das RGB Color Game:

Viel Spass beim RGB Color Game!

Quellen:
Kompendium der Mediengestaltung Digital und Print – Konzeption und Gestaltung, Produktion und Technik für Digital- und Printmedien, Springer Verlag, 2014, Böhringer, J., Bühler, P., Schlaich, P., Sinner et al. | Udemy.com

(mm)

Kritik
von Kyle Smith

Motivation

Bevor ich mich für Spielentwicklung in Javascript interessierte, hatte ich ein interessantes Gespräch mit Herr Weibel in Bern. Er erklärte mir seine Spiel-Engine mit statischer künstlicher Intelligenz. Da wir zur gleicher Zeit Serious Games im Fach Visualisieren hatten und ich Javascript besser beherrschen wollte, nahm ich mir vor ein kleines Spiel zu bauen. Ich las auch zur gleichen Zeit das Buch: Head First JavaScript Programming - von O’Reilly Media. Jedoch fiel es mir extrem schwer Javascript mit einem Buch zu lernen. Ich lernte unter dem Semester auf die Plattformen: YouTube, Lynda und Udemy. Lynda gibt Einsicht in die Sprache, jedoch fand ich, dass den Übungen eine Dynamik fehlte. Niemand konnte seine Lösungsvariante hochladen oder kommentieren. Bei YouTube gibt es viele Videos mit Javascript zu spielen. Udemy passte am besten für mich. Ich lerne als erstes wie man ein Feld mit zufälligen Werten generieren konnte. Danach erweiterte ich es selbst auf sechs. Zu meinem Pech fand ich im Nachhinein ganz viele Versionen von diesem Code, denn die Anleitung zeigt einem wie man ein Quadrat macht und man darf es danach beliebig erweitern. Trotzdem entschied ich einen Digezz-Beitrag zu machen, da man wir RGB als MMPler täglich brauchen und ein kleines Spielkonzept in Javascript, kann keinem MMPler schaden.

Mein Code

Mein Code ist redundant, jedoch funktioniert er und dies war mein wichtigstes Ziel. Die Code-Philosophie DRY bedeutet: Don’t Repeat Yourself.

Ich konnte ihr nicht treu werden. Jedoch einer anderen Code-Philosophie blieb ich treu: KISS - Kiss It Simple, Stupid. Da sich mein Code oft wiederholt bei der Feld-Generierung, ist er “einfacher” zu lesen für einen jungen Javascript-Entwickler/MMPler. Ich erklärte im Beitrag, dass ich aus einem Farbquadranten durch mehrere For-Loops, Arrays und Funktionen die Farbe ausgeben konnte. Eigentlich wollte ich diesen Teil in die Kritik integrieren, realisierte aber schnell, dass selten diese von einem Leser angeklickt und durchgelesen wird, wenn sie Code enthält. Ich hatte insgesamt drei Tage gebraucht bis ich funktionierte und ich die Schritte verstand. Irgendwie habe ich, aber immer noch einen Bug, den ich suche. Manchmal zeigt es bei der Schwierigkeitsgrad HARD nur 3 anstatt 6 Felder an. Nach dem Neuladen der Seite ist das Problem gelöst.

Reflexion

Das RGB-Spiel gab mir Einsicht in die Wichtigkeit der Farbmodelle und wie man ein kleines Spiel Javascript baut. Das Konzept von dem Spiel Herr Weibels, verstehe ich. Jedoch bin ich noch nicht sicher, ob ich den Code in Javascript ganz verstehen werde. Was ist weiss, ich dass ich Javascript besser verstehe und es meinen Mitstudenten erklären kann.

Keine Kommentare

Schreibe einen Kommentar