Processing-IDE (also dem Programm selbst)

Beispielsketche MENU > File >  Examples

Die minimalste Anwendung benötigt die Funktion setup() sie wirdnur einmal beim Start aufgerufen

und draw() sie wird 60 mal proSekunde aufgerufen.

Untergeordnete Seiten (1):
Computer für alle!

Programmieren mit Processing

• Einführung
• Programm
  • Programm Struktur
  • Schleifen
    • for() Schleife
    • while() Schleife
  • Funktionen
  • Variablen und Datentypen
  • Strings
  • Mathematische Operationen
  • Rechen Funktionen
  • Trigonometrische Funktionen
  • Zufallszahlengenerator
• Zeichenfläche
• Zeichen Elemente
  • Punkt point()
  • Linie line()
  • Rechteck rect()
  • Viereck quad()
  • Dreieck triangle()
  • Kreis, Ellipse ellipse()
  • Bogen arc()
• Farben
• Graustufen
  • Hintergrund background()
  • Vordergrund, Füllfarbe fill()
  • Linienfarbe stroke()
• Eigenschaften (Attributen)
  • smooth()
  • strokeWeight() / ..Cap() / ..Join()
  • rectMode()
  • ellipseMode()
• Freie Formen vertex()
• Kurven curveVertex()

Grundlagen  http://www.creativecoding.org/

Processing – Nützliches, Tipps und Tricks (Teil 1)

Ich möcht dir ein paar nützliche Dinge mit Processing zeigen. Das betrifft nicht nur die IDE und spezielle Codes, sondern auch mathematische Tipps. Zugegeben, die IDE (also das Programm in welches du deinen Code reinhackst und über STRG+R ausführst) ist wirklich mehr als klein gehalten, und es gibt auch keine Autovervollständigungen oder sowas wie IntelliSense und eine direkte Projektverwaltung ist auch nicht mit drin, aber abgesehen von dem was Processing nicht kann sehen wir uns lieber an was es kann, denn das ist mehr als auf den ersten Blick vielleicht zu erwarten ist.
Du hast dich vielleicht schonmal gefragt wie Ich den Processing-Code in meinen Beispielen farblich so korrekt in meine Artikel einbringe.

Tja, das tolle ist, dass sich der    Processing-Code als HTML kopieren    lässt.

Für Leute die selbst Tutorials zu Processing schreiben ist diese Funktion ein wahrer Segen und auch für solche die Ihren Code einfach anderen zeigen möchten ist es praktisch. Markiere mit der Maus einfach die gewünschte Textpassage oder mit STRG+A den kompletten Code und wähle dann im MENU > Edit > Copy as HTML, alternativ drücke die Tastenkombi [STRG+Shift+C]. Ein kleiner Bug ist, dass diese Funktion manchmal den Geist aufgibst, das siehst du dann wenn unten im schwarzen Fenster irgendwas in roter Schrift steht, kommt aber in den seltensten Fällen vor und nach einem Neustart von Processing funktioniert es wie gehabt.

Negative in Positive Zahlen umkehren, oder Positive in Negative

Eine weitere coole Sache ist, wie Ich finde, die Funktion :abs:, mit dieser kann jede negative Zahl in eine positive gekehrt werden. So wird aus -17 dann 17, aus -7823 wird 7823 und so weiter. Umgekehrt funktioniert das mit der abs()-Funktion nicht, positive Zahlen lassen sich nicht in negative umkehren. Dafür gibt’s aber einen anderen Trick, kennst du vielleicht noch aus der Schule. Man rechnet einfach die gewünschte Zahl mal minus 1. Beide Möglichkeiten demonstriere Ich dir anhand eines kleinen Beispiels:

void setup(){  int a, b, c, d;  a = -8;  b = 12;  c = -884;  d = 9;  println("a: " + a);  println("b: " + b);  println("c: " + c);  println("d: " + d);  a = abs(a);  b = b * -1;  //Dasselbe wie eine Zeile darüber nur mit kürzerer Schreibweise:  c *= -1;  d = abs(d);  println("-----------");  println("a: " + a);  println("b: " + b);  println("c: " + c);  println("d: " + d);}

Schau dir die Ausgabe im schwarzen Fenster unten gut an -du wirst scrollen müssen-, dann wird dir einiges klar werden, schwer ist es eigentlich nicht. Wichtig ist soetwas zum Beispiel wenn du willst dass ein Objekt -beispielsweise ein Rechteck oder eine Ellipse- sobald es an eine Wand oder ein anderes gewünschtes Objekt stößt die Richtung umkehrt und “abprallt”, in einem der letzten Artikel habe Ich das schon eingesetzt.

Was wirklich blöd ist, wenn du deinen Code schreibst und dich nach einiger Zeit selbst nicht mehr auskennst, weil das ein unstrukturiertes Durcheinander ist und die Zeilen nicht alle sauber eingerückt sind. Zum Glück stellt uns Processing auch dafür eine Möglichkeit zur Verfügung, die

Auto-Formatierung

MENU > Edit > Auto Format - - Mit dieser Funktion wird dein Code automatisch korrekt eingerückt und formatiert. Dafür drücke einfach zwischendurch mal [STRG+T], schon ist dein Code wieder sauber formatiert.

Sketch im Vollbildmodus laufen lassen

Schonmal versucht ein Projekt im Vollbildmodus laufen zu lassen? Klar, du kannst den Sketch öfter starten und die Breite und Höhe durch ausprobieren ermitteln und demnach anpassen. Viel einfacher geht das jedoch ohne lästiges ausprobieren, indem du einfach auf die vordefinierten Variablen screen.width und screen.height zurückgreifst und diese als Parameter an die Funktion :size: übergibst. Mehr kannst du in der Referenz unter :screenwh: nachlesen. screen.width und screen.height haben als Wert automatisch immer die Breite und Höhe des gesamten Bildschirms, also keine PI mal Daumen Angaben mehr.

Apropos PI mal Daumen, wusstest du dass Processing auch eine

PI Konstante … Konstanten?!

 PI kennst du sicherlich, dieses 3,14159…. Damit kannst du spezielle Kreis-Berechnungen und einiges mehr anstellen. Aber nicht nur das, Processing hat noch mehr auf Lager, denn außer :pi: gibt es noch :quarter_pi:, :half_pi: und :two_pi:. QUARTER_PI ist ein Viertel von PI, HALF_PI die Hälfte von PI und TWO_PI das doppelte von PI. Damit kannst du dir wieder eine Zeile Code sparen in welcher du PI erstmal zur Hälfte, einem Viertel oder einem Doppelten umrechnen musst. Wieso PI-Konstante und nicht PI-Funktion? Ganz einfach, PI ist ein konstanter Wert und keine Funktion in der noch extra etwas berechnet werden müsste. Gehen wir näher auf die Bedeutung von Konstanten ein, eine Konstante ist wie eine Variablen deren Wert nicht geändert werden kann. Wenn du in eigenen Programmen Konstanten verwenden willst geht das auch, du kannst diesen zu Anfangs einen Wert zuweisen der aber im weiteren Programmablauf an keiner Stelle im Code mehr geändert werden kann. Natürlich kann diese Variable von jeder Stelle aus im Code verwendet werden, das schon, aber ändern kannst du sie nicht mehr, und wenn du es versuchst wird das Programm nicht starten weil eine kluge Entwicklungsumgebung bei solchen Sachen sehr pingelig ist  Variablen sind dynamisch, also variabel und Konstanten sind feste, unveränderbare Werte, konstant eben. Auf die Bedeutung dieser und einiger weiterer Spezialbegriffe werde Ich in einem der kommenden Artikel noch zu sprechen kommen, Ich habe vor eine Art Glossar für Fachbegriffe im Zusammenhang mit Processing zu erstellen. Ich werde dabei auf die jeweiligen Stellen in der Processing-Referenz verweisen oder auf Wikipedia verlinken und auch mit eigenen Worten die Begriffe erläutern und hier und dort meinen Senf dazukommentieren. Wo wir gerade vom Kommentieren sprechen, du weißt sicherlich bereits dass du in Processing

Zeilen auskommentieren

kannst, aber Ich finde das dauert immer ewig. Man muss wenn man eine Zeile auskommentieren möchte an den Zeilenanfang springen und dann “//” eingeben, bei mehreren Zeilen dann davor ein “/*” und ans Ende ein “*/”. Einfacher geht das finde Ich, wenn man die zu auskommentierenden Codepassagen einfach mit der Maus markiert und dann im MENU > Edit > Comment/Uncomment  wählt. Normaler Code wird dann auskommentiert, umgekehrt, also wenn die Zeilen bereits auskommentiert sind, werden sie wieder zu normalen Codezeilen. Zumindest bei mehrzeiligen Codeteilen lohnt sich hier der Griff zur Maus den Ich als Programmierer zugegeben doch eher meide.  

Haufenweise Beispiel-Sketche

Ich habs vor kurzem schon angesprochen und du wirst es vielleicht auch schon entdeckt haben, Processing bringt eine beträchtliche Reihe an Beispiel Sketchen mit, an denen du dich orientieren kannst. Zu finden sind diese im MENU > File > Examples > Basics.  Einfach draufklicken, dauert eventuell ein paar Sekunden bis das Fenster aufgeht. Dort sind massig Beispielprojekte die du öffnen und ausführen kannst. Anfangs eine sehr spannende Sache um auch mal zu sehen was mit Processing alles möglich ist. Du kannst dir aus den geöffneten Sketchen Codepassagen und Algorithem ansehen und herauskopieren, besser ist es aber sicherlich -so hab Ich das gemacht- wenn du dir anschaust was der Sketch macht (einfach mit STRG+R ausführen) und dann versuchen das nach eigenem ermessen nachzuprogrammieren. Aus diesen Beispiel-Projekten kannst du dir viele Ideen für eigene Projekte holen. Es macht echt Spaß, wühl dich mal durch.  

Gespeichert … oder doch nicht?

Wenn du Processing startest bekommt der Sketch zunächst einen temporären Dateinamen bestehend aus dem Wort sketch, dem aktuellen Monat, den Tag (als Zahl) und einen Buchstaben, also wenn für den heutigen Tag bereits ein Sketch so abgespeichert wurde “a”, dann “b”, dann “c” und so weiter. Wenn Ich bei mir jetzt in diesem Moment Processing starte habe Ich zwischen dem weißen Codefenster und dem Menü einen Tab in dem folgendes drinsteht: sketch_may09b. Aber ganz egal was dort steht (wieso hab Ich jetzt so weit ausgeholt O.o), du wirst vielleicht bemerkt haben dass wenn du Code eintippst dahinter immer dieses Paragraphen-Zeichen (§) auftaucht. Hast du dich mal gefragt wofür das ist? Falls du nicht von selbst drauf kommst, dieses Zeichen gibt an, dass das Programm (also dein Sketch) so wie es jetzt ist noch nicht abgespeichert wurde. Wenn du also tippst und zwischendurch speicherst, verschwindet dieses §-Zeichen. Sobald du aber auch nur eine Taste drückst wird es wieder angezeigt, da der Sketch mit exakt diesem Inhalt wie er in dieser Sekunde ist noch nicht abgespeichert wurde. So hast du immer im Blick ob dein Sketch gespeichert ist oder nicht. Wenn das §-Zeichen angezeigt wird und du versuchst, Processing zu beenden, wirst du durch einen Dialog gefragt ob du noch abspeichern möchtest. Wird das §-Zeichen nicht angezeigt und du schließt Processing, taucht dieser Dialog nicht auf da ja scheinbar vor kurzem gespeichert und in der Zeit bis zur Schließung von Processing nichts mehr am Code hinzugefügt oder verändert wurde, dein Projekt ist also in jedem Fall vor Datenverlust geschützt (es sei denn du bekommst einen Bluescreen, der Strom ist auf einmal weg,

Zu Tipps und Tricks für Processing gibt’s demnächst noch einen Teil (oder mehrere, mal schauen), hoffe Ich konnte dir heute wieder was nützliches beibringen.