Schlagwort-Archiv: entwicklungsumgebung

processing

Processing – Formen, Strichstärke und Smoothing

Moin,

jetzt wird’s spannend, heute will Ich dir zeigen, wie du Formen auf den Bildschirm bekommst. Du merkst, momentan zeige Ich dir die Schlüsselbefehle, so richtig zur Programmierung und den tollen Effekten können wir erst kommen, wenn du die Befehle kennst, um Formen und andere Dinge auf den Bildschirm zu zaubern, macht ja ansonsten keinen Sinn. Zuvor will Ich aber nun auf das AntiAliasing zu sprechen kommen. In einem früheren Blogeintrag hab’ Ich dir bereits gezeigt, was das ist, aber wie du das im Code anwendest, dazu kommen wir jetzt.
Viel wird das ohnehin nicht, denn es ist wirklich einfach. Um Kantenglättung einzuschalten, reicht lediglich folgender Befehl:

smooth();

//Du kannst die Kantenglättung auch abschalten, mit dem simplen
//Befehl:

noSmooth();

Du siehst, es ist relativ einfach. Der Unterschied zwischen smooth(); und noSmooth(); wird dir später noch klar, wenn du ein paar Formen draufhast. Ich fange mit dem Punkt und den Linien an.

Punkte und Linien

Punkte und Linien .. klingt nicht schwer, oder? Ist es auch nicht, es ist denkbar einfach. Übersetzen wir wie immer diese beiden Wörter, so haben wir point und line. Und so lauten auch die Befehle. Doch … welche Argumente übergeben wir an diese Funktionen?
Angefangen mit dem Punkt, würde man eigentlich nicht mehr erwarten, als die X- und Y-Koordinaten des Fensters. Und genau so geht es auch (es gibt auch Z-Koordinaten, aber das kümmert dich momentan noch nicht). Schreibe also wie immer die Funktion, die Argumente dafür in Klammern dahinter. Um den Punkt besser sehen zu können, bestimmen wir vorher die Strichstärke. Dafür schreibe einfach strokeWeight(WERT); und übergebe als Wert die Strichstärke in Pixeln, Standard ist 1. Stellen wir das auf 5. Somit kannst du dir folgendes Beispiel dazu ansehen:

size(300, 300);
background(0);
stroke(255);
strokeWeight(5);
smooth();
point(50, 50);

Wir erhalten folgende Ausgabe:


Originalgröße

Mehr gibt es kaum zu sagen. Du rufst du Funktion point() auf und übergibst Ihr Werte, damit die Funktion damit auch was anfangen kann, und das wären eben die X- und Y-Koordinaten, an denen point den Punkt zeichnet.

Zeige Ich dir also nun, wie man eine Linie malt. Wir wissen, dafür brauchen wir lediglichdie Funktion &rqauo;line« aufrufen, auch dieser übergeben wir Werte. Aber welche, was muss man wissen, um eine Linie zeichnen zu können? Ich würde sagen, das wären die X- und Y-Koordinaten des Anfangspunktes und die X- und Y-Koordinaten des Endpunktes, die Linie wird also zwischen Start- und Endpunkt gezeichnet. Damit hätten wir insgesamt 4 Werte, sehen wir uns einmal den Code und die Ausgabe einiger Linien an:

size(300, 300);
background(0);
stroke(255);
strokeWeight(2);
smooth();
line(0, 0, 300, 300);
line(0, 150, 150, 300);
line(75, 225, 300, 0);
line(150, 0, 150, 300);

Wir erhalten die Ausgabe:


Originalgröße

Du brauchst also lediglich die beiden Start- und die beiden Endpunkte, zwischen diesen beiden Punkten wird dann die Linie gezeichnet. Ein letztes Beispiel noch:

size(300, 300);
background(0);
stroke(255);
strokeWeight(2);
smooth();
line(150, 50, 250, 250);
line(250, 250, 50, 250);
line(50, 250, 150, 50);

Probiere den Code bei dir in Processing aus, was für eine Ausgabe erhältst du?

Fahren wir mit Rechtecken fort. Auch dafür brauchen wir einen Startpunkt. Der Endpunkt definiert sich durch die länge und breite des Rechtecks.
Ganz recht, wir übergeben hier wieder 4 Werte, Startpunkt X, Startpunkt Y, Länge X und Länge Y. Und natürlich wieder in Klammern. Welchen Befehl brauchen wir? Rechteck -> Rectangle -> rect. Der Befehl dafür lautet rect. Ich will dir auch gleich ein Beispiel zeigen:

size(300, 300);
background(0);
stroke(255);
strokeWeight(2);
smooth();
noFill();
rect(10, 10, 140, 140);
rect(120, 50, 140, 80);
rect(68, 210, 200, 60);

Du erhältst folgende Ausgabe:


Originalgröße

Eigentlich nicht weiter schwierig, nicht wahr ;-) Mit dem »rect« Befehl lassen sich Rechtecke und Quadrater jeder Größe erstellen. Wobei .. du erhältst immer Rechtwinklige Vierecke, das ist ein wenig unflexibel, eine Raute oder ein Parallelogramm wirst du damit nicht hinbekommen, dafür gibt es den …

Quad-Befehl

Der Quad-Befehl ist um einiges flexibler als rect. Der Befehl quad erwartet für alle 4 Punkte jeweils X- und Y-Koordinaten, das wären dann insgesamt 8 Werte, die übergeben werden müssen. Das einzige wobei du hier achten musst, ist die Reihenfolge, aber du siehst gleich was Ich meine. Sehen wir uns den Befehl einfach mal an:

size(320, 320);
background(0);
stroke(255);
strokeWeight(2);
smooth();
noFill();
quad(100, 50, 200, 50, 250, 100, 50, 100);
quad(50, 120, 250, 120, 200, 170, 100, 170);
quad(100, 190, 200, 190, 250, 240, 50, 240);
quad(50, 260, 250, 260, 200, 310, 100, 310);

Die Ausgabe die wir erhalten, sieht so aus:


Originalgröße

Und was Ich mit der Reihenfolge meinte .. sehen wir uns mal an, was dabei herauskommt, wenn wir im ersten Befehl die 4 letzten Werte vertauschen:

//Wenn wir bei diesem Befehl:
quad(100, 50, 200, 50, 250, 100, 50, 100);
//Die letzten beiden Werte vertauschen:
quad(100, 50, 200, 50, 50, 100, 250, 100);

Und schon sieht die erste Form ganz anders aus:


Originalgröße

Versuch dich mit quad ein wenig, das braucht etwas “Eingewöhnungszeit”, bis man damit völlig zurechtkommt.
Ich mache trotzdem gleich mal mit meiner (für diesen Blogeintrag letzten) Form weiter, der …

Ellipse

Eine Ellipse zeichnest du wie ein Rechteck, du hast genau diesemben Parameter. Der Unterschied ist, dass die Ellipse Ihren Punkt in der Mitte hat, von diesem aus wird gezeichnet. Beispiel:

size(320, 320);
background(0);
stroke(255);
strokeWeight(2);
smooth();
noFill();
ellipse(50, 100, 25, 25);
ellipse(100, 100, 50, 50);
ellipse(200, 100, 100, 100);

Du siehst:


Originalgröße

Die beiden letzten Parameter, die die Größe der Ellipse bestimmen, das ist der Durchmesser, nicht der Radius ;-) Eigentlich auch nicht weiter schwierig.

Ich zeige dir zuletzt noch 4 Befehle, die Ich großartig nicht weiter erläutern werde:

//Keine Umrandung, z.B. bei Ellipsen
noStroke();

//keine Füllung:
noFill();


// <- Wenn du zwei "//" schreibst, kannst du kommentare
//    in deinen Code einfügen, das wird bei der
//    Ausführung des Programms ignoriert.

/* <- Du kannst auch "/*" anwenden, um mehrzeilige
      Kommentare zu schreiben, das ganze wird mit
      abgeschlossen mit einem -> */

Und das war’s auch schon wieder, beim nächsten mal zeige Ich dir noch spezielle Befehle, einiges an Wiederholung und vor allem die 2 wichtigsten Funktionen setup() und draw(). Das wird dann ein eher kurzer Artikel (glaub Ich, aber beim bloggen vergess’ Ich die Zeit immer ^^’). Dafür zeige Ich dir im übernächsten Artikel schon ein paar Möglichkeiten, dein Programm interaktiv zu gestalten, damit sich da auch mal was bewegt ;)

Befehle, die in diesem Artikel verwendet wurden, und weitere Links, die du dir ansehen solltest:
ellipseMode() rectMode() strokeCap() strokeJoin() ellipse() noSmooth() smooth() background() size() point() quad() rect() line() strokeWeight() fill() noFill() noStroke() stroke() //comment /* Multiline comment */
>> Du findest hier Befehle die Ich bereits im Artikel erläutert habe. Dazu kommen noch ein paar andere Befehle die z.B. Eigenschaften der schon gezeigten enthalten. Zum Beispiel strokeCap, um zu bestimmen, wie eine Linie endet und beginnt (Rund oder eckig) oder auch ellipseMode() bzw. rectMode, um den Startpunkt für das zeichnen der Form zu verändern.

Viele Grüße
Marius

processing

Processing – Das Koordinatensystem, Farben

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 ..

Farben

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

smooth();
size(300, 300);
strokeWeight(2);
stroke(255, 0, 0);
background(0, 255, 0);
fill(0, 0, 255);
ellipse(150, 150, 125, 125);

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:

stroke(255, 0, 0);
background(0, 255, 0);
fill(0, 0, 255);

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 ..

Der Alphakanal

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:

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

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

Muster Beispiel Anzahl Argumente Erklärung
befehl(Graustufen); fill(120); 1 Wert von 0 – 255
befehl(R, G, B); fill(255, 127, 0); 3 Jeweils von 0 – 255 für R, G und B
befehl(Graustufen, Alphawert); fill(120, 230); 2 Graustufen 0 – 255, Alphawert 0 – 255
befehl(R, G, B, Alphawert); fill(255, 255, 10, 255); 4 R-, G- und B-Werte, Alphawert

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 …

Farben hexadezimal darstellen

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:

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);

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

Processing – Jetzt geht’s los!

Hi,

zum Programmieren sucht man sich eine Programmiersprache, man braucht eine Entwicklungsumgebung, um den Code zu schreiben, der die Struktur und die Funktionsweise des Programmes definiert, außerdem eine gute Idee für ein Projekt. Vor allem aber braucht man Spaß an der Sache. Daher schlage Ich vor du machst dir die Arbeit beim Lernen mit Processing so angenehm wie möglich. Mach dir deine Lieblingsmusik an, hol dir was zu trinken oder zu futtern, sichere ggf. deinen Bestand an Kippen und mach’s dir schön bequem. Ich gehe davon aus, dass du Processing bereits geöffnet vor dir auf dem Bildschirm hast. Desweiteren gehe Ich davon aus, dass du reichlich Zeit und Spaß mitgebracht hast :-) Wenn dem so ist, können wir eigentlich nun loslegen.

Ich werde, was die Programmierung generell angeht, nicht auf alles im Detail eingehen, wie zum Beispiel Datentypen. Anstelle dessen werde Ich einige verweisende Links auf Seiten reinstellen, in denen alles schön erklärt wird. Auch muss gesagt sein, dass alles was Ich hier schreibe keinen fachmännisch professionellen Wert hat, Ich schreibe aus meiner Sicht, meinen Erfahrungen und meinen Kenntnissen, allerdings schreibe Ich auch nichts, wovon Ich keine Ahnung habe.

So, wo fangen wir an .. da Ich nicht weiß, was du alles weißt und was nicht, ist es schwierig für mich, einen Anfang zu finden.
Wir wissen, Processing ist eine Programmiersprache, mit der wir Grafiken, Animationen und Simulationen erstellen können, ausgegeben in einem Fenster oder im Browser auf deinem Bildschirm. Daher .. überlegen wir uns einmal, was beispielsweise so ein fertiges Bild für Eigenschaften haben könnte. Mir würde da spontan und zuallererst einfallen, dass das Fenster in dem sich das ganze abspielt, eine bestimmte Größe hat, natürlich. Desweiteren erwarte Ich auf diesem Bild Farben, das heißt -Vordergrundfarbe und .. ja, eine Farbe für den Hintergrund. Processing hat im großen und ganzen 3 Befehle für Farben, es gibt eine Hintergrundfarbe, eine Zeichenfarbe und eine Füllfarbe für Formen. Und die Formen die gezeichnet werden, werden sicherlich mit einer bestimmten “Strichstärke” gemalt. Und zu guter letzt noch etwas, das sich manche vielleicht schon gefragt haben: “Habe Ich in Processing die Möglichkeit, Anti-Aliasing(hier mehr dazu) anzuwenden?” Ich antworte: Aber ja, natürlich. Für alle die keine Lust haben, sich den ganzen Wikipedia Artikel durchzulesen: Anti-Aliasing bedeutet laienhaft ausgedrückt, dass der Stufeneffekt der bei abgeschrägten Linienübergängen entsteht, nicht so kantig, sondern “weich” gezeichnet wird. Hierzu hab’ Ich einmal eine Grafik erstellt, die den Unterschied ziemlich gut verdeutlicht


Größer ansehen

Soviel dazu, wir wissen nun, es gibt Farben, die Größe des Fensters, die Strichstärke und die Wahl, ob mit Anti-Aliasing gearbeitet wird. Bevor wir uns ansehen, wie das ganze im Code aussieht, wollen wir noch auf einige Basisformen zu sprechen kommen. Welche kennst du denn? Also Ich kenne da Kreise(Ellipse), Rechtecke(Quadrat), Linien, Punkte, Dreiecke und Vielecke. Und das mal abgesehen von 3-Dimensionalen Formen, auf die wir später irgendwann noch kommen, das dauert noch ;-)
Für’s erste haben wir einiges in Erfahrung bringen können, womit wir in unserem Programm arbeiten können. Wie schon angesprochen sind alle Befehle in Englisch, daher liegt es nahe, auch unsere eben genannten Schlüsselwörter zu übersetzen.

Bevor wir uns nun endlich daran machen, mit Code herumzuspielen, meinst du nicht, dass es noch etwas zu klären gibt? Fragst du dich nicht auch, wie das ganze funktionieren soll? Processing ist keine wirkliche Scriptsprache, eine Sprache für GUI-Anwendungen ist es genausowenig. Bei Scriptsprachen ist klar, man schreibt Code, meist sieht man davon jedoch nicht besonders viel, Anwendungen die mit Skriptsprachen erstellt wurden, arbeiten oftmals im Hintergrund. Oder in einer Konsole. Beispiel: PHP, JavaScript, Dos(Batch) oder Linux Shellscripte. Bei GUI Anwendungen ist es so, dass es Elemente gibt, die auf ein vorgefertigtes Fenster gezogen werden. Du ziehst aus der Toolbox ein Element wie beispielsweise einen Button oder ein Textfeld, suchst dir ein Event(Ereignis) aus, zum Beispiel “wurde geklickt” oder “hier wird die Maus bewegt” oder “hier wird Text eingegeben”, und dort hinterlegst du jeweils Code.
Processing jedoch … ist da irgendwie anders(wobei es auch hier “Events” gibt, um dein Programm dann interaktiv durch Benutzereingaben zu lenken, dazu kommen wir später irgendwann). Bei Processing hast du ein fertiges Fenster, bzw. es läuft im Browser(je nachdem, ob du es als Anwendung oder Applet exportierst).

Los geht’s
Wollen wir ganz einfach beginnen, indem wir zuallererst die Größe des Fensters im voraus setzen. Größe übersetzt bedeutet “size”. Wichtig an dieser Stelle ist noch folgende Notation: einzelne Wörter schreibt man klein, bei Wörtern die aus mehreren einzelnen Wörtern bestehen, schreibt man das erste klein, alle nachfolgenden beginnen groß (zum Beispiel strokeWeight). Daraus schließen wir, dass “size” klein geschrieben wird. Processing ist dabei pingelig, zwischen Groß- und Kleinschreibung wird also unterschieden!
Doch zurück, “size”. Woher will Processing mit “size” wissen, welche Größe wir für unser Fenster haben wollen? Genau, gar nicht, das müssen wir schon alles selbst festlegen. Das bedeutet Breite und Höhe des Fensters, also gemessen in Pixeln die Breite in X-Richtung, die Höhe des Fensters in Y-Richtung. Wie du das schon aus der Skala von der Schule her kennst(dazu kommen wir gleich). Wir müssen die Werte zur Größe des Fensters irgendwie an size übermitteln, damit Processing damit auch etwas anfangen kann. Diese Werte werden dabei immer als Argumente (Parameter) an die Funktion übergeben (size in diesem Fall). Keine Sorge, so wild ist das nicht. Zu Funktionen gibt’s noch einen eigenen Artikel, aber dir sei schon jetzt gesagt: Auch size ist eine Art Funktion. Diese Funktion erwartet eine bestimmte(oder auch eine variable) Menge an Argumenten, also Werte, die an die Funktion übergeben werden, damit die Funktion die Werte weiterverwenden und mit Ihr arbeiten kann. Argumente an Funktionen geben wir immer in runden klammern nach dem Namen der Funktion mit. Welche Breite, und welche Höhe wollen wir für unser Fenster? Ich sage spontan, es soll 400Pixel breit, und 300Pixel hoch sein.
Wir haben: Funktionsname (size) und Argumente (400, 300). Ans Ende JEDER Anweisung, also jedes Befehls, kommt ein Strichpunkt (Semikolon), also dieses Zeichen hier: “;”. Ganz wichtig, und niemals vergessen, immer dieses Semikolon hinter jeden Befehl.
Schau her:


Größer ansehen

Du kannst alle verfügbaren Befehle, die Processing anbietet, hier nachlesen, für “size” gibt es dort mehr nachzulesen. Kümmere dich an dieser Stelle jedoch noch nicht um das dritte Argument, welches die Funktion “size” aufnehmen kann. Vorerst ist klar, size braucht nicht mehr, als breite und höhe, logisch ;-)

Kommen wir also nun zum nächsten Punkt, legen wir die Hintergrundfarbe fest, welche standardgemäß auf Hellgrau festgelegt ist. Hintergrund -> zu Englisch “background”. Da liegt nichts näher, als wie auch bei size, als Argument eine Farbe zu übergeben, zum Beispiel “background(Schwarz);”. Ja, so in etwa könnte das aussehen. Da jedoch die Sache mit den Farben schon einiges mehr an Informationen wird, werde Ich dafür einen eigenen Artikel schreiben. Daher belassen wir es für’s erste, Ich weiß wir sind diesmal nicht besonders weit gekommen, doch du hast nun für den Anfang schon eine ganz ungefähre Vorstellung davon, wie wir Argumente an Funktionen übergeben, außerdem sind dir bereits einige Schlüsselwörter bekannt, auf die wir in den nächsten Artikeln näher eingehen werden. Für heute jedoch wurde genug gesagt, du bist bereit, beim nächsten mal tiefer in’s Thema einzutauchen.

Wir werden beim nächsten mal auf die Angabe und Parameterübergabe bzw. die Schreibweise der Farbwerte, sowie auf das Koordinatensystem eingehen :-)

Beste Grüße
Marius

processing

Processing – Erste Verwendung, IDE

Hi,

bevor du dich daran machen kannst, Processing zu verwenden, musst du Processing erstmal auf deinem Rechner haben. Dafür besuche die offizielle Seite Processing.org und klicke dort auf »Download Processing«. Du landest nun hier:


Größer ansehen

Du siehst, Processing ist für alle Plattformen verfügbar. Falls du das JDK bereits installiert hast, kannst du (für Windows) direkt auf “Windows without Java” klicken, andernfalls oder falls du dir nicht sicher bist, nur “Windows”. Lade dir das nun runter, momentan ist Version 1.5.1 aktuell.
Das tolle ist, du musst rein gar nichts installieren, lade dir das gapackte Archiv einfach nur herunter, und entpacke es. Öffne den entpackten Ordner “processing-1.5.1-windows -> processing-1.5.1″ und starte Processing.exe.
An dieser Stelle ein Tipp von mir(falls du Windows ab Vista oder höher nutzt): Entpacke das Archiv und schiebe den ordner dann nach C:\Programme. Starte von dort »Processing.exe« und klicke dann mit der rechten Maus in der Taskleiste auf den Processing.exe-Tab und wähle “Dieses Programm an die Taskleiste anheften”. Praktisch, wenn du vorhast, öfter mit Processing zu arbeiten ;)

Du hast also nun Processing gestartet, du siehst zuerst den Splash-Screen, bevor’s richtig los geht. Dieser sieht nach aktuellem Stand so aus:


Größer ansehen

Ist der Splash weg, erscheint die IDE(integrated development environment), also die Entwicklungsumgebung, quasi das Hauptprogramm eben. Hier spielt sich alles ab, hier schreibst du deinen Code. Ich will dich nun in diesem Artikel durch diese Entwicklungsumgebung führen. Also was die einzelnen Menüpunkte bedeuten, wie du deine Projekte speicherst (die Sketche, dazu gleich mehr) und ausführst.

Doch wieso brauchen wir dazu eine Entwicklungsumgebung? Generell bräuchten wir die gar nicht, wir könnten unseren Code genausogut auch in jeden x-beliebigen Editor tippseln. Der Vorteil einer Entwicklungsumgebung(IDE) ist vor allem der, dass wir hier Coden schreiben können, Schlüsselwörter werden dabei eingefärbt (Syntax Highlighting). Zudem lässt sich der Code dann über die Oberfläche direkt kompilieren und ausführen. Deine Projekte werden zentral gespeichert, du kannst sie von dort aus exportieren und hast es insgesamt auch einfacher mit der Verwaltung. Intern wird der Processing-Code in Java übersetzt. Deine Processing-Projekte werden Sketche genannt, du hast für die Verwaltung deiner Projekte(Sketche) ein Sketchbook. Wie gesagt, auf den Code gehen wir später in einem anderen (oder im nächsten, je nachdem wie’s läuft) Artikel näher ein. Wollen wir uns also einmal die IDE ansehen, das sollte bei dir so ziemlich genauso aussehen:


Größer ansehen

Du siehst, die IDE ist in englischer Sprache vorzufinden. Das sollte kein großes Problem darstellen, wer ein wenig Englisch kann, kommt damit bestens zurecht. Außerdem ist auch der Code -wie auch in beinahe allen Programmiersprachen- in Englisch, also gewöhn’ dich dran ;-)
Wollen wir uns die einzelnen Punkte einmal näher ansehen. Klicke die einzelnen Elemente an, um eine Info dazu anzuzeigen ;-)

File

  • New
  • Open …
  • Sketchbook
  • Examples…
  • Close
  • Save
  • Save as …
  • Export Applet
  • Export Application
  • Page Setup
  • Print
  • Preferences
  • Quit

Das ist für’s erste so das was du am öftesten brauchst.
Die Menüpunkte von “Edit” sind größtenteils selbsterklärend, dort findest du Dinge wie “Ausschneiden”, “Kopieren”, “Als HTML kopieren”, Code auskommentieren, Tab-Weite vergrößern/verkleinern, Suchen .. und so weiter, das übliche was man auch von anderen Editoren kennt :-)
Dann siehst du noch den Menüpunkt “Sketch”, da sind vorerst nur die ersten 3 Unterpunkte relevant:

  • Run
  • Present
  • Stop

Das war’s vorerst, der Rest ist momentan noch nicht von Bedeutung für dich. Wollen wir uns noch die Leiste darunter ansehen:


Größer ansehen

Gewöhne dir am besten an, deine Sketche mit dem Tastenkürzel STRG+S zu speichern und sie mit STRG+R auszuführen, geht schneller ;-)
Sieh dir hier mal ein Beispiel-Applet an. Keine Sorge, falls du den Code liest, den musst du nicht verstehen, dazu kommen wir noch, also immer mit der Ruhe ;-) Um einmal kurz zu veranschaulichen, wie simpel es ist, den Benutzer einfach nur etwas malen zu lassen, sieh’ dir das hier an.
Und Ich muss dazu sagen, du hast mit diesem Ergebnis hier sogar noch die Möglichkeit, die Farbe zu ändern (jenachdem ob linke oder rechte Maustaste gedrückt ist, wird anders gemalt), mit drücken von “x” das Feld zu leeren und mittels der Tasten “+” und “-” die Pinseldicke zu verändern. Doch genug davon, wir machen das Schritt für Schritt. Die IDE kennst du nun größtenteils, alles muss man nicht wissen, viel gibt es ohnehin nicht, und das ist auch gar nicht nötig, denn alles spielt sich ja im Code ab, richtig?! ;) Und zu eben diesem will Ich in meinen nächsten Artikeln zu sprechen kommen, indem Ich dich Stück für Stück an Processing heranführe. Das ganze gestalte Ich also so eine Art Tutorial-Reihe, wobei’s nicht nur sachlich sondern auch locker und spaßig zugehen soll ;-)

Bis dahin..
Marius :-)