/blog/processing-das-koordinatensystem-farben-284

Hallo,

sooo, meine Freundin ist gerade auf Shopping-Tour (love you Maus) und Ich war gerade noch einkaufen, und hab' mir ein paar Naschereien geholt, außerdem mein Lieblingsgetränk, Fanta. Kippen sind auch wieder da, gute Musik läuft .. Ich würde sagen, legen wir los :-)

Wie schon angesprochen, wollte Ich dir das mit den Farben näherbringen, außerdem das Koordinatensystem. Fangen wir mit dem Koorinatensystem an. Sowas kennst du sicher schon, die Koordinatenpunkte für Processing findest du wie folgt vor:

Originalgröße

Du siehst, in der linken oberen Ecke ist Punkt 0. Das heißt Richtung X Null, und Richtung Y Null. Von dort aus fängst du an zu zeichnen oder was auch sonst. Eigentlich nichts einfacher als das. Ich zeichne einmal zufällig ein paar Punkte, sehen wir uns an, was das Koordinatensystem dazu sagt. Ich habe Hintergrundfarbe auf weiß, Zeichenfarbe auf schwarz. Stark vergrößert setze Ich nun an beliebigen stellen Punkte, sieh' es dir einmal an:

Originalgröße

Eigentlich relativ einfach :-) Ich denke, zum Koordinatensystem muss nicht viel mehr gesagt werden, da kommt dann später noch was (zum Beispiel Z-Koordinaten oder Verschiebung des Nullpunktes ;-) )

Widmen wir uns nun voll und ganz den ..

<h3>Farben</h3>

Was Farben sind, ist dir klar. Was uns aber interessiert .. wie werden diese angegeben? Schau dir hierzu einmal den Link zum RGB-Farbraum an. R G B, steht für Red, Green und Blue, die drei primären Farben. Diese Farben sind jeweils mit einem Wert zwischen 0 und 255 anzugeben. 255 bedeutet dabei volle Farbe, 0 bedeutet, die Farbe kommt gar nicht vor. Auch hier ist es wieder so, dass wir die Farben nach der Funktion in Klammern durch Komma getrennt eingeben. Das wären dann 3 Argumente, die in der richtigen Reihenfolge (R, G, B) angegeben werden müssen. Dass wir durch das mischen der Farben wiederum andere Farben erhalten, sollte dir auch klar sein, hierzu gibt es auf der folgenden Seite eine schöne Grafik:

Originalgröße

Daraus ist klar ersichtlich, dass beispielsweise Rot und Grün Gelb ergibt, alle Farben zusammen ergibt Weiß. Interessant ist auch noch folgendes: Wenn du für R, G und B jeweils die gleichen Werte benutzt, bekommst du einen Graustufenwert. Sieh her:

Originalgröße

Und .. logisch, wenn wir bei allen drei Werten Null haben, bekommen wir Schwarz. Du kannst dir, wenn du lediglich Graustufen brauchst, die Schreibarbeit sparen, denn wenn wir ja ohnehin Graustufen bekommen, indem alle Werte (R, G und B) gleich sind, reicht es, einfach nur 1 Argument anzugeben mit einem Wert von zwischen 0 und 255. Doch sehen wir uns doch jetzt endlich den Code an. Wir haben wie schon im letzten Artikel angesprochen, primär 3 Befehle, einmal für den Hintergrund, dann die Füllfarbe und die Strichfarbe. Beispiel:

Originalgröße

Hier siehst du, Grün für den Hintergrund(0, 255, 0), Rot für die Strichfarbe(255, 0, 0) und Blau als Füllfarbe(0, 0, 255). Für das alles gibt es auch entsprechende Befehle. Und - wie immer auf Englisch ;-) Hintergrund -> background, Strichfarbe -> stroke und Füllfarbe -> fill. Und nun brauchen wir nichts weiter tun, als die Farben hinter die Befehle in Klammern einzusetzen. Der Code für das eben gezeigte Bild lautet

<div style="border: 2px solid #444444; border-radius: 10px; box-shadow: 3px 3px 5px #000000; padding: 7px"> <pre> smooth(); size(300, 300); strokeWeight(2); stroke(255, 0, 0); background(0, 255, 0); fill(0, 0, 255); ellipse(150, 150, 125, 125); </pre> </div>

Hier musste Ich nun ein wenig vorgreifen, die Befehle smooth(), strokeWeight und ellipse kennst du noch nicht, aber dazu kommen wir in Kürze :-) konzentrieren wir uns auf die wichtigsten:

<div style="border: 2px solid #444444; border-radius: 10px; box-shadow: 3px 3px 5px #000000; padding: 7px"> <pre> stroke(255, 0, 0); background(0, 255, 0); fill(0, 0, 255); </pre> </div>

stroke legt die Strichfarbe fest, background die für den Hintergrund und fill füllt Elemente / Formen mit Farben. Jetzt wo du das weißt, kannst du gerne ein wenig damit herumspielen, bevor wir zum nächsten (vorletzten) Punkt kommen, was Farben betrifft, nämlich ..

<h3>Der Alphakanal</h3>

Der Alphakanal gibt den Sättigungswert an, das heißt, wieviel von den zuvor angegebenen Farben sichtbar ist, man könnte auch sagen, der Alphawert ist für die Transparenz zuständig. Dieser Wert wird als vierter Parameter übergeben, und ist optional, das bedeutet, wird dieser nicht angegeben, wird automatisch von einer vollen Sättigung ausgegangen. Auch hier wieder ein Wertebereich von 0 bis 255.

Schau her, anhand des Beispiels mit dem Befehl für die Füllfarbe, hast du nun mehrere Möglichkeiten, Farben anzugeben:

<div style="border: 2px solid #444444; border-radius: 10px; box-shadow: 3px 3px 5px #000000; padding: 7px"> <pre> fill(255, 0, 0); //Ergibt Rot fill(255, 255, 0); //Ergibt Gelb fill(255, 255, 255); //Ergibt WeiÃ fill(0, 0, 0); //Ergibt Schwarz fill(127, 127, 127); //Ergibt einen mittelmÃ¤Ãigen Grauwert fill(255); //Ergibt WeiÃ fill(0); //Ergibt Schwarz fill(255, 0, 0, 255); //Ergibt Rot, keine Transparenz fill(255, 0, 0, 127); //Ergibt Rot, mittelmÃ¤Ãige Transparenz fill(200); //Sehr helles Grau fill(0, 100); //Schwarz mit ziemlich guter Durchsicht, //ergibt ungefÃ¤hr Hellgrau fill(255, 0, 255); //Ergibt Magenta fill(255, 255); //Ergibt WeiÃ bei voller SÃ¤ttigung, hier //kannst du den Alphawert weglassen </pre> </div>

Also, du gibt RGB an, oder nur den Grauwert, oder Grauwert mit Alpha oder RGB mit Alpha:

<table border="1" style="border-collapse: collapse;"> <tr><th>Muster</th><th>Beispiel</th><th>Anzahl Argumente</th><th>ErklÃ¤rung</th></tr> <tr><td>befehl(Graustufen);</td><td>fill(120);</td><td>1</td><td>Wert von 0 - 255</td></tr> <tr><td>befehl(R, G, B);</td><td>fill(255, 127, 0);</td><td>3</td><td>Jeweils von 0 - 255 fÃ¼r R, G und B</td></tr> <tr><td>befehl(Graustufen, Alphawert);</td><td>fill(120, 230);</td><td>2</td><td>Graustufen 0 - 255, Alphawert 0 - 255</td></tr> <tr><td>befehl(R, G, B, Alphawert);</td><td>fill(255, 255, 10, 255);</td><td>4</td><td>R-, G- und B-Werte, Alphawert</td></tr> </table>

Gut Ich denke das ist nun soweit klar. Nur leider .. gibt es noch eine Möglichkeit, Farben anzugeben, Ich hoffe du bist nicht jetzt schon überfordert ;-) Man kann auch ...

<h3>Farben hexadezimal darstellen</h3>

Das Hexadezimalsystem sollte dir ein Begriff sein, falls nicht oder nicht ganz, lies HIER etwas darüber nach. Es funktioniert im Endeffekt genauso wie mit den RGB-Werten, nur dass diese Hexadezimal und mit einem "#" vornedran geschrieben werden. Auch hier geht das ganze von 0 - 255, allerdings nicht durch Komma getrennt. 255 ist hexadezimal geschrieben "FF", du hast also die Möglichkeit, 0 - FF anzugeben (also Zahlen von 0 - 9 und Buchstaben von A - F, mehr dazu in dem Link den Ich 3 Zeilen weiter oben stehen hab). Beispiel für hexadezimale Darstellung:

<div style="border: 2px solid #444444; border-radius: 10px; box-shadow: 3px 3px 5px #000000; padding: 7px"> <pre> background(#FF0000); //Ergibt Rot background(#00FF00); //Ergibt GrÃ¼n background(#0000FF); //Ergibt Blau background(#FFFF00); //Ergibt Gelb background(#FF7700); //Ergibt in etwa Orange background(#FFFFFF); //Ergibt WeiÃ background(#000000); //Ergibt Schwarz /* Weitere Beispiele, versuche selbst, welche Farbe bei folgenden Codes herauskommt, indem du die Zeilen kopierst */ background(#AE42C0); background(#41C8FD); background(#123ABC); background(#A9B8C7); //Auch hier hast du wieder die MÃ¶glichkeit, mit //dem Alphawert zu arbeiten, sieh her: background(#FD467C, 100); background(#43ED8B, 50); background(#52A8CD, 250); </pre> </div>

Für welche der vielen verschiedenen Farbangaben du dich entscheidest, bleibt dir überlassen :-)

Jetzt wo wir das Koordinatensystem kennen, und wissen, wie wir Farben verwenden müssen, können wir zu den verschiedenen Formen übergehen, angefangen mit Linien, Punkten, Rechtecken und Kreisen. Das kommt dann in meinem nächsten Blogeintrag dran. Außerdem werden wir uns ansehen, wie wir AntiAliasing einschalten bzw. abstellen, und wie wir die Strichdicke beeinflussen.

Beste Grüße Marius

Processing - Das Koordinatensystem, Farben

Kommentare

Kommentar schreiben