Schlagwort-Archiv: smooth

Simpler Taschenlampen-Effekt mit Processing

Hi,

heute möchte Ich dir zeigen wie man ganz simpel den Effekt eines Lichts (zum Beispiel das einer Taschenlampe..) mit Processing realisiert. Ich mache das in diesem Beispiel nur mit Kreisen. Man kann es sich vorstellen, dass man einen Kreis (ellipse()) erstellt und diesen mit weißer Farbe füllt. Das wäre dann erstmal lediglich ein durchgehend weißer Kreis. stroke(), also einen sichtbaren Rand, lassen wir hier weg. Der Effekt tritt letzlich dann durch Transparenz hervor. Stell dir vor wir machen einen Kreis den wir mit Weiß füllen und die Deckkraft sehr weit heruntersetzen. In einer Schleife werden weitere Kreise (an selber Stelle) hinzugefügt, die immer kleiner werden, und die Deckkraft indes stetig erhöht. Schwarz macht dabei als Hintergrund einen recht guten Eindruck, aber da kannst du noch experimentieren. Wollen wir uns nun zuerst das Grundgerüst ansehen, für das ganze drumherum sind eine Größe des Fensters von 300×300, ein unsichtbarer Cursor und ein schwarzer Hintergrund angedacht, der smooth()-Effekt rundet den Sketch optisch noch ab.

void setup()
{
  smooth();
  background(0);
  size(300, 300);
  noCursor();
}

int inner_radius = 10;
int c_radius = 300;
int distance = 5;
float stroke_weight = 0.5;
boolean bstroke = false;

void draw()
{
  background(0);
  noStroke(); //Damit kein sichtbarer Rand gezeichnet wird
  for (int i = 0; i < c_radius; i+=distance)
  {
    fill(#FFFFFF, i/inner_radius);
    strokeWeight(stroke_weight);
    stroke(#000000);
    if (bstroke == false)
    {
      noStroke();
    }
    ellipse(mouseX, mouseY, c_radius - i, c_radius - i);
  }
}

Hier eine Erklärung zu den Variablen: Die inner_radius Variable regelt die Stärke des weißen lichts, oder anders gesagt den Alphawert. c_radius gibt die größe des kompletten Lichts an. distance beschreibt die Distanz zwischen dem einen und dem nächsten Ring. stroke_weight und bstroke (hier noch nicht von Bedeutung) sind für später gedacht wenn wir über Tastendruck den Rand (sichtbar oder nicht, standardmäßig nicht sichtbar) und die Randdicke einstellen.

In void draw() siehst du zuallererst dass der Hintergrund bei jedem Durchlauf gefärbt wird, danach wird festgelegt dass wir keinen Rand angezeigt haben möchten (was man hier allerdings auch gerne weglassen kann wenn man es dafür in setup() schreibt). In einer Schleife machen wir die Kreise, dabei orientieren wir uns an einem Maximum, was hier der Radius angibt. Die Schritte, also die Distanz von einem Ring zum nächsten wird über den step-Parameter am Ende der Zeile, also als letzten Parameter der for-Schleife angegeben, also i+distance. Hier nochmal veranschaulicht was mit der Distanz gemeint ist:

In der Schleife wird dann zuerst die Füllfarbe mit fill() angegeben. Hier haben wir weiß als Farbe, als zweiten Parameter stellen wir den Alpha-Wert ein, die Transparenz quasi. Die Schleife durchläuft von Null bis c_radius, also von 0 bis 300, das heißt nicht dass die Schleife 300mal durchlaufen wird, dazu komm Ich gleich ;-). inner_radius ist 10. Nehmen wir also die Schleife genauer unter die Lupe um zu sehen welche Werte wir nach und nach für i / inner_radius bekommen, dabei nicht zu vergessen dass wir aber nicht tatsächlich 300 Durchläufe haben, da wir ja nicht jedesmal um +1 hochzählen sondern um distance, und da ist der Wert 5. 300 / 5 ergibt 60. Wir bekommen nach und nach folgende Werte als Alpha-Wert für die Füllfarbe der immer kleiner werdenden Kreise:

Durchlauf 1, i = 0: 0
Durchlauf 2, i = 5: 0
Durchlauf 3, i = 10: 1
Durchlauf 4, i = 15: 1
Durchlauf 5, i = 20: 2
Durchlauf 6, i = 25: 2
Durchlauf 7, i = 30: 3
Durchlauf 8, i = 35: 3
Durchlauf 9, i = 40: 4
Durchlauf 10, i = 45: 4
Durchlauf 11, i = 50: 5
Durchlauf 12, i = 55: 5
Durchlauf 13, i = 60: 6
Durchlauf 14, i = 65: 6
Durchlauf 15, i = 70: 7
Durchlauf 16, i = 75: 7
Durchlauf 17, i = 80: 8
Durchlauf 18, i = 85: 8
Durchlauf 19, i = 90: 9
Durchlauf 20, i = 95: 9
Durchlauf 21, i = 100: 10
Durchlauf 22, i = 105: 10
Durchlauf 23, i = 110: 11
Durchlauf 24, i = 115: 11
Durchlauf 25, i = 120: 12
Durchlauf 26, i = 125: 12
Durchlauf 27, i = 130: 13
Durchlauf 28, i = 135: 13
Durchlauf 29, i = 140: 14
Durchlauf 30, i = 145: 14
Durchlauf 31, i = 150: 15
Durchlauf 32, i = 155: 15
Durchlauf 33, i = 160: 16
Durchlauf 34, i = 165: 16
Durchlauf 35, i = 170: 17
Durchlauf 36, i = 175: 17
Durchlauf 37, i = 180: 18
Durchlauf 38, i = 185: 18
Durchlauf 39, i = 190: 19
Durchlauf 40, i = 195: 19
Durchlauf 41, i = 200: 20
Durchlauf 42, i = 205: 20
Durchlauf 43, i = 210: 21
Durchlauf 44, i = 215: 21
Durchlauf 45, i = 220: 22
Durchlauf 46, i = 225: 22
Durchlauf 47, i = 230: 23
Durchlauf 48, i = 235: 23
Durchlauf 49, i = 240: 24
Durchlauf 50, i = 245: 24
Durchlauf 51, i = 250: 25
Durchlauf 52, i = 255: 25
Durchlauf 53, i = 260: 26
Durchlauf 54, i = 265: 26
Durchlauf 55, i = 270: 27
Durchlauf 56, i = 275: 27
Durchlauf 57, i = 280: 28
Durchlauf 58, i = 285: 28
Durchlauf 59, i = 290: 29
Durchlauf 60, i = 295: 29

Der Kreis ganz in der Mitte hat somit maximal einen Alphawert von 29. Die Farbe und der Alphawert werden in der ersten Zeile in der Schleife festgelegt, gefüllt wird mit weiß, der Alphawert wird mithilfe der Schleifenvariable (i) dynamisch generiert. Danach noch Strichdicke und -farbe, was aber vorerst nicht von Belang ist, da bstroke auf false gesetzt ist und somit in der nächsten Zeile noStroke() aufgerufen wird. Das wird nachher interessant, wenn wir den Radius, den Alphawert, den (un-)sichtbaren Rand und die Distanz per Tastendruck ändern werden.

Jetzt wird noch die ellipse() gezeichnet, diese folgt der Maus. Die Größe der Kreise wird dynamisch festgelegt durch c_radius minus i.

Das wärs eigentlich schon, und das Ergebnis sollte nun so aussehen:

Nun kannst du noch einstellen dass über Tastendrücke bestimmte Aktionen erfolgen, Ich habe mir hierfür folgendes ausgedacht:

void keyPressed()
{
  /*
  [+] und [-] drücken, um die Stärke des Lichts zu bestimmen.
  Das heißt der Alphawert wird variiert
  */
  if (key == '+' && inner_radius > 1) {
    inner_radius--;
  }
  if (key == '-') {
    inner_radius++;
  }
  //Tasten [k] und [g] um die größe des kompletten Radius des Lichts zu ändern
  if (key == 'g') {
    c_radius++;
  }
  if (key == 'k') {
    c_radius--;
  }
  //Tasten [m] und [n] um die Distanz zu variieren, ein interessanter Effekt wie Ich finde
  if (key == 'm' && distance > 1) {
    distance--;
  }
  if (key == 'n') {
    distance++;
  }
  //Tasten [s] und [w] um die Strichdicke des Rands zu verändern
  if (key == 's' && stroke_weight > 0.2) {
    bstroke = true; 
    stroke_weight-=0.1;
  }
  if (key == 'w') {
    bstroke = true; 
    stroke_weight+=0.1;
  }
  //[x] drücken, bstroke wieder auf false zu setzen
  //sodass kein Rand gezeichnet wird
  if (key == 'x') {
    bstroke = false;
  }
  //Um alles auf die ursprünglichen Werte zurückzusetzen
  if (key == 'd')
  {
    distance = 5;
    c_radius = 300;
    inner_radius = 10;
    stroke_weight = 0.5;
  }
}

Beschreibung ist als Kommentar beigefügt. Unser kompletter Code für dieses Projekt sieht nun so aus:

void setup()
{
  smooth();
  background(0);
  size(300, 300);
  noCursor();
}

int inner_radius = 10;
int c_radius = 300;
int distance = 5;
float stroke_weight = 0.5;
boolean bstroke = false;

void draw()
{
  background(0);
  noStroke();
  for (int i = 0; i < c_radius; i+=distance)
  {
    fill(#FFFFFF, i/inner_radius);
    strokeWeight(stroke_weight);
    stroke(#000000);
    if (bstroke == false)
    {
      noStroke();
    }
    ellipse(mouseX, mouseY, c_radius - i, c_radius - i);
  }
}

void keyPressed()
{
  /*
  [+] und [-] drücken, um die Stärke des Lichts zu bestimmen.
  Das heißt der Alphawert wird variiert
  */
  if (key == '+' && inner_radius > 1) {
    inner_radius--;
  }
  if (key == '-') {
    inner_radius++;
  }
  //Tasten [k] und [g] um die größe des kompletten Radius des Lichts zu ändern
  if (key == 'g') {
    c_radius++;
  }
  if (key == 'k') {
    c_radius--;
  }
  //Tasten [m] und [n] um die Distanz zu variieren, ein interessanter Effekt wie Ich finde
  if (key == 'm' && distance > 1) {
    distance--;
  }
  if (key == 'n') {
    distance++;
  }
  //Tasten [s] und [w] um die Strichdicke des Rands zu verändern
  if (key == 's' && stroke_weight > 0.2) {
    bstroke = true; 
    stroke_weight-=0.1;
  }
  if (key == 'w') {
    bstroke = true; 
    stroke_weight+=0.1;
  }
  //[x] drücken, bstroke wieder auf false zu setzen
  //sodass kein Rand gezeichnet wird
  if (key == 'x') {
    bstroke = false;
  }
  //Um alles auf die ursprünglichen Werte zurückzusetzen
  if (key == 'd')
  {
    distance = 5;
    c_radius = 300;
    inner_radius = 10;
    stroke_weight = 0.5;
  }
}

Wenn du möchtest kannst du hier und da mit den Werten noch herumexperimentieren, spezielle lights und ambient lights hinzufügen oder die Farbe des Lichtes verändern.
Tipp: Verändere in der ersten Zeile in der Schleife die Farbe und lass sie zufällig aussehen:

    fill(random(255), i/inner_radius);

Oder bunt:

    colorMode(HSB);
    fill(random(255), random(255), random(255), i/inner_radius);

Oder … oder … dir wird schon was einfallen :-)

Mein fertiges Ergebnis kannst du dir auf OpenProcessing.org noch reinziehen, dafür klicke hier.

Bis demnächst
Marius

Proportional Editing

Hi,

heute will Ich dir das Proportional Editing zeigen. Um dir das am besten nahe zu bringen machen wir das anhand einer Plane. Dazu löschen wir den Default Cube ([X][Enter]) und erstellen eine Plane ([Shift]+[A]->Mesh->Plane) und vergrößern diese ([S][3][Enter]). Geh damit in den Edit-Mode. Nun [W]->Subdivide, und das insgesamt 4 mal ausführen. Jetzt wähle eines der Vertices in der Mitte aus, so macht sich der Effekt den Ich dir gleich zeige, gut bemerkbar. Drehen wir uns die Ansicht nun noch leicht schräg von oben. Ziehe nun mit [G][Z] das einzelne Vertice nach oben. Nichts neues für dich, du siehst was passiert und bist sicher nicht überrascht. Brich den Vorgang also mit [Esc] ab.
Aber jetzt zum wesentlichen. Drücke die Taste [O] (nicht Null). Unten in der Leiste taucht ein neues Menü auf, die Fallof types. Alternativ drücke in der Leiste auf die runde Kugel und wähle “Enabled”.
Grabbe das einzelne Vertice nun erneut, was stellst du fest? Genau, auf den ersten Blick sieht es zum einen schonmal viel cooler aus. Scrollst du während des grabbens noch das Mausrad, vergrößert sich der Radius der Vertices, die die Bewegung des einzelnen Vertices “nachahmen”. Im folgenden Video gehe Ich nacheinander einmal alle Optionen durch:

Du siehst, es ist ganz einfach und bietet noch viel mehr Möglichkeiten zur Verformung und Modellierung deiner Meshes. Du solltest das am besten selbst einmal ausprobieren, dazu nimm dir einfach Testprojekte vor.

Merke dir noch: Je mehr du die Vertices unterteilt hast (Subdivide) desto glatter und weicher wird das Ergebnis. Doch je mehr Vertices desto länger auch die Renderzeit und desto weniger flüssig die Navigation ;-)

Bis dahin viel Spaß beim ausprobieren
Marius

Schnelles Arbeiten mit Blender [2] – Shortcuts nutzen lernen

Hallo,

weiter geht’s mit meinem nächsten, zweiten Teil, in dem es darum gehen wird, Blender fast ausschließlich über ShortCuts (Tastenkürzel) bedienen zu können. Hierbei will Ich dir zeigen, welche Tastenkombinationen du geschickt auf vielerlei Anwendungsbereiche anwenden kannst. Die gängigen Tasten zum grabben (Taste [G] zum verschieben), skalieren (Taste [S] zum vergrößern / verkleinern) und rotieren (Taste [R] zum rotieren, drehen) sollten dir mittlerweile geläufig sein, sodass der 3D-Manipulator bei dir in der Regel schonmal nicht zum Einsatz kommen wird, oder?! Ebenso kennst du sicher die Tasten [X], [Y] und [Z] für die Richtungsangaben im 3D-Koordinatenraum, welche du während einer Transformation (Rotieren, Skalieren, Verschieben) verwenden kannst. Falls du damit noch Probleme hast, hier eine Anleitung dazu:

Objekte transformieren

Starte ein neues Blender Projekt, lass den Würfel aber stehen. Vergrößere den Würfel, mit Ausnahme der Z-Achse, sodass er lediglich breiter und länger, jedoch nicht höher wird. Die Tastenkombination hierfür ist einfach (der Würfel muss ausgewählt sein): [S][Shift]+[Z] und die Maus bewegen, zum skalieren. Das bedeutet, dass jede Achse außer der, die nach [Shift] gedrückt wurde (also [Z]), skaliert wird. PS: Wenn Ich eine Tastenkombination (in den eckigen Klammern) darstelle, bedeutet ein Plus dazwischen, dass die Taste vor, und die Taste nach dem “+” zusammen gedrückt sein müssen (Wie hier eben Shift und Z). Ist dort kein “+”, können die Tasten nacheinander gedrückt werden. Möchtest du nur eine Richtung transformieren, reicht es, einfach die Transformationstaste ([S], [G] oder [R]) und danach die Richtungstaste ([X], [Y] oder [Z]) zu drücken.

Noch drei wichtige Optionen zur Transformation:
Du hast zudem noch die Möglichkeit, die Stärke der Transformation zu beeinflussen. Genauer gesagt gibt es dero drei. Die Taste muss dabei gedrückt sein, solange die Maus bewegt wird. Wird die Taste (zu denen wir gleich kommen) losgelassen, wird die Maus wieder normal bewegt. Drückst du, während du die Maus gedrückt hältst um die Stärke zu bestimmen (also Position beim Verschieben, Radius / Grad beim Rotieren oder Größe beim Skalieren) die Taste [Strg], hast du den sog. “Clipping”-Effekt. Das bedeutet, dass die Transformation anstatt um Pixel um Blendereinheiten vollzogen wird.
Einer weitere Möglichkeit bietet die Taste [Shift], mit der die Maus beim bewegen langsamer ist, sodass sich Objekte oder Vertices bei der Transformation um ein vielfaches exakter Positionieren lassen.
Und zu guter letzt besteht noch die Möglichkeit, auf Mausbewegungen gänzlich zu verzichten, indem einfach ein Zahlenwert eingetragen wird (zum Beispiel [S][X][2.5] um den Würfel in X-Richtung um 2,5 Blendereinheiten zu skalieren).

Zum Abschluss dieser kurzen Einleitung, versuche an dem Würfel (im Object Mode oder im Edit Mode mit einem Face/Vertice/Edge) folgende Tastenkombinationen.

  • [R][x][90]
  • [S][Shift]+[Y][0.25]
  • [G][Shift]+[Z]
  • [S][Z][3]

So nun aber genug damit. Ich schlage vor, wir wechseln mit unserem Würfel nun in den Edit-Mode. Wie immer sind alle Vertices ausgewählt. Ändern wir das und drücken [A]. Extrudieren kannst/kennst du sicher auch schon, das erledigst du mit der Taste [E]. Nochmal kurz erklärt: Wenn du extrudierst (bei einer Fläche macht ein Extrudieren am meisten Sinn) erstellst du dieselben Vertices / Edges / Faces wie die, die du extrudierst. Meist wird der Vorgang mit [Esc] abgebrochen, damit die extrudierte Fläche (oder Ecke oder Kante) an derselben Position ist wie die zu extrudierende. Dann kannst du Du den neuen Bereich erweitern, das heißt Verschieben, Vergrößern, Verkleinern oder Rotieren (ein skalieren oder rotieren ist meist erst nach einem Verschieben sinnvoll). Sieh dir folgendes Bild an:


Originalgröße

Welche Schritte waren wohl nötig, um das zustande zu bringen? In einfachen Worten: Oberste Fläche auswählen, extrudieren ([E]), abbrechen ([Esc]), skalieren ([S][0.5]), extrudieren, abbrechen, grabben ([G][Z]).
Dafür müsste man also die Maus nicht einmal bewegen, es reicht, mit der Maus die obere Fläche auszuwählen, und dann folgende Tasten zu drücken: [E][Esc][S][0.5][Enter][E][Esc][G][Z][2][Enter]. Du siehst, mit Tastenkombinationen lässt sich auf jedenfall gleich viel schneller arbeiten. Versuche es selbst an einigen Objekten.

Praktisch sind auch einige Menüpunkte, die du im Edit-Mode links in der Leiste der Mesh-Tools findest. Noch praktischer ist, dass viele dieser Funktionen auch über Tastenkürzel erreichbar sind. So musst du beispielsweise nicht extra links in der Leiste scrollen, um die Subdivide (oder Subdivide Smooth) zu suchen, sondern kannst Sie bequem nutzen, indem du (im Edit-Mode) einfach Taste [W] drückst. Dort findest du gleichzeitig viele andere Funktionen. Darunter auch Select Inverse (auch über [Strg]+[I] erreichbar), damit kannst du die Auswahl der ausgewählten Vertices umkehren, das heißt ausgewählte Vertices werden deselektiert, während die, die nicht ausgewählt waren, selektiert werden.

Suchst du eine bestimmte Funktion, kennst aber dessen Namen nicht? Dann rufe die Suche auf, indem du die Leertaste drückst, und gib einen Suchausdruck ein. In Autodesk Maya ist das ein wenig eleganter gelöst.
Mit [F3] siehst du die letzten Aktionen, die am Objekt vorgenommen wurden. Mit [F12] wird eine Szene gerendert.
Ob und welche Tastenkombination es für Funktionen gibt siehst du, wenn du die Maus einige Sekunden über den Button hältst, dann klappt ein Tooltip Infofeld auf. Dort siehst du immer den Namen, eine Beschreibung die erklärt, wofür die Funktion gut ist, den dazugehörigen Shortcut und den Befehl für das Phyton Skripting.

Auch ist Interessant ist, wenn Du einen Rechtsklick auf einen Button ausführst. Du hast die Möglichkeit, den Shortcut zu ändern und den Button vom jeweiligen Panel zu entfernen. Zudem kannst Du dir die Phyton Referenz ansehen, oder eine andere Beschreibung dafür vergeben.

Jetzt bin Ich doch ein wenig vom Thema abgeschweift ;-) Jedenfalls gibts es etliche Tastenkombinationen. Die ganze Liste findest du in den User Preferences ([Strg]+[Alt]+[U]) unter dem Punkte “Input”.

Die ganzen vielen Tastenkombinationen eignest du dir am schnellsten an, indem du einfach übst, sie sooft es geht zu verwenden. Du wirst sehen, damit wird es sich mit der Zeit viel schneller arbeiten lassen, viele langatmige Suchaktionen bleiben dir damit erspart. Nutze auch das Suchfeld und merke dir die Namen der Funktionen (und natürlich immer die dazugehörigen Tastenkombis). Bevor sich dieser Artikel nun dem Ende zuwendet, hier noch einige wichtige, sinnvolle oder wenigstens interessante Tastenkombinationen:

Tastenkombination Anwendungsbereich Funktion
Alt + B Generell Nur selektierter Bereich sichtbar
B Generell Vertices / Objekte selektieren
C Generell Objekte mit Pinsel auswählen
X Generell Objekt(e) löschen
W Generell Menü mit gebräuchlichsten Funktionen aufrufen
T Generell Tool-Shelf / Mesh-Tools ein-/ausblenden
N Generell Transform Menü
Shift + D Generell Objekt(-Teile) kopieren
E Edit-Mode Extrudieren
Linksklick / Enter Generell Aktion bestätigen
Rechtsklick / Esc Generell Aktion abbrechen
STRG + Alt + U Generell User Preferences öffnen
STRG + U Generell Benutzereinstellungen speichern
A Generell Alle sichtbaren Objekte de-/selektieren
Z Generell Wechsel zwischen Shading-Ansicht (Solid und Wireframe)
Alt + Z Generell Wechsel zwischen Shading-Ansicht (Solid und Textured)
Shift + Mausrad Generell Rauf / Runter scrollen
Strg + Mausrad Generell Links / Rechts scrollen
Shift + Mausrad gedrückt Generell World bewegen
Strg + Mausrad gedrückt Generell Zoom
Alt + C Generell Convert To
Strg + T Object Mode Constraint

Noch ein praktischer Shortcut ist [Strg]+[Tab], damit bestimmst du den Mesh Select Mode, also das was du unten normalerweise per Maus einstellst, um auszuwählen ob du Vertices, Edges oder Faces bearbeiten willst.

Achja, eines noch zum Schluss: Wenn du während du ein Objekt ausgewählt hast [Shift]+[D] drückst, kopierst du ein Objekt. Das neue Objekt ist eine Kopie des Objekts, doch vom Ausgangsobjekt vollkommen unabhängig.
Drückst du [Alt]+[D], erreichst du beinahe denselben Effekt. Das neue Objekt ist auch hier wieder eine Kopie, besitzt jedoch in etwa die Funktion eines Array-Objekts. Das kopierte Objekt ist abhängig vom Eltern-Objekt (also das Ausgangsobjekt). Von den mit [Alt]+[D] kopierten Objekten kann immer nur das Objekt, das im Object-Mode ausgewählt wurde, im Edit-Mode bearbeitet werden. Die Änderungen werden auf alle anderen übertragen :-)

Im nächsten, letzten Teil der “Schnelles Arbeiten mit Blender”-Reihe will Ich dir noch einige Kleinigkeiten zur Bedienung und Funktionsweise zeigen.

Bis dahin viel Spaß mit Blender
Marius

processing

Processing – Fallbedingungen (If-Then-Else) und Zufallszahlen

Hallo,

endlich weißt du was Variablen sind (Behälter, in denen beliebig Werte abgelegt oder herausgenommen werden können), und damit bist du schon ein ganzes Stück weiter. Heute möchte Ich dir zeigen, wie man mit Fallbedingungen arbeitet. Aber .. Was sind Fallbedingungen?

Fallbedingungen

Mit sog. Fallbedingungen kannst du den Programmablauf ändern, das heißt bei bestimmten eintretenden oder nicht eintretenden Ereignissen, passiert dies und das. Beispiel: Wenn die X-Mausposition kleiner oder gleich 100, mache schwarzen Hintergrund, ansonsten mache weißen Hintergrund. So in etwa. Es ist immer dieses Wenn … Dann …
Und wie das ganze Programmiertechnisch aussieht, dazu kommen wir jetzt.
“Wenn” übersetzt ins Englische bedeutet “if”. Da das eine Befehlsanweisung ist, musst du hier wieder Anfang und Ende des Anweisungsblock durch geschweifte Klammern definieren. Wir fragen im Code etwa so ab:

WENN(Dies passiert)
{
//Dann führe diesen Code aus
}

also quasi:

if(Bedingung erfüllt)
{
//Führe diesen Code aus
}

Im letzten Artikel hab’ Ich dir zudem Vergleichsoperatoren gezeigt, wie schon angesprochen, kommen die bei den Fallbedingungen zum Einsatz.
Doch halt, natürlich können wir mit so einem Wenn-Dann nicht nur Zahlen und Rechnungen abfragen. Was so eine Anweisung wirklich erwartet, ist der boolesche Wert true.
Ein boolscher Wert kann genau 2 Zustände annehmen, nämlich true oder false, also Wahr oder Falsch.
Dafürt gibt es den Datentyp boolean(ausgesprochen etwa “buhlien”).
Beispiel: 5 kleiner 7 -> trifft zu, 5 ist in der Tat kleiner als 7, der Vergleich ergibt also true.
So ist es immer und überall, und das nicht nur bei Rechenoperationen, sondern zum Beispiel auch beim Vergleich zweier Texte oder sonst etwas.
Aber sehen wir uns doch jetzt endlich mal den Code an für ein einfaches Beispiel, nämlich das von vorhin.
Ich möchte folgendes: Wenn die X-Position der Maus größer oder gleich der Hälfte der Breite des Fensters entspricht, möchte Ich einen weißen Hintergrund, andernfalls einen schwarzen Hintergrund.
Wo schreiben wir den Code? Hierbei ist eigentilch egal, ob wir ihn in draw() setzen oder ins mouseMoved()-Event, denn draw() wird ständig ausgeführt, mouseMoved() immer dann, sobald(solang) die Maus bewegt wird. Aber schau es dir an:

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(255);
}

void draw()
{
  
}

void mouseMoved()
{
  background(255);
  if(mouseX >= width / 2)
  {
    background(0);
  }
}

Gar nicht schwer, oder? Du siehst, die Hintergrundfarbe wird, egal wo die Maus ist, am Anfang immer auf Weiß gesetzt. Ist die Maus über der Hälfte der Breite des Fensters, wird der Hintergrund nachträglich auf Schwarz gesetzt.
Es ist einfach, du schreibst die Abfrage(if), stellst die Bedingung (in Klammern, bei unserem Beispiel wird abgefragt ob mouseX >= Hälfte der Breite des Fensters) und führst bei true den Code aus.
Ah, da hab’ Ich was für dich, um dir das mit der Bedingung klar zu machen, sieh mal:

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(255);
}

void draw()
{
  
}

void mouseMoved()
{
  background(255);
  if(mouseX >= width / 2)
  {
    background(0);
  }
  println(mouseX >= width / 2);
}

Fällt dir was auf? Schau unten in der IDE im schwarzen Fenster nach ;-)
Du weißt nun, ist eine Bedingung erfüllt, wird Code ausgeführt. Doch was, wenn die Bedingung false ergibt? Dafür gibt es auch was: WENN [...] DANN [...] ANDERNFALLS [...]. Ins englische übersetzt als else.
Wenn Taste Q gedrückt wird, schreibe einen Text, wenn nicht, schreibe anderen Text. Beispiel:

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(255);
}

void draw()
{
  
}

void keyPressed()
{
  background(255);
  fill(0);
  if(key == 'q')
  {
    text("Juhu, Q wurde gedrückt", 100, 100);
  }
  else
  {
    text("Es wurde nicht " + key + " gedrückt", 100, 100);
  }
}

Soweit nicht soo schwer, oder? Und wenn wir nun noch mit Variablen arbeiten, können wir auch schon ein paar tolle Ergebnisse erzielen. Stell dir vor du willst eine einfache Linie zeichnen, die sich vertikal von links nach rechts bewegt. Hat die Linie den Rand erreicht, soll sie wieder bei 0 starten:

Sourcecode
void setup()
{
  size(300, 100);
  smooth();
  background(255);
  //Zu Anfangs den Wert von x setzen
  x = 0;
}

int x;

void draw()
{
  //Hintergrund Weiß
  background(255);
  //Zeichenfarbe Schwarz
  stroke(0, 230);
  //Strichdicke 3Pixel
  strokeWeight(3);
  //Linie (in X-Richtung den Wert vin Variable X)
  line(x, 0, x, height);
  //X um +1 erhöhen
  x++;
  //Wenn x größer oder gleich Breite des Fensters,
  //setze x auf Null
  if(x >= width){x = 0;}
  //Füllen mit Schwarz (Rechteck)
  fill(0);
  //Rechteck zeichnen
  rect(5, 0, 50, 12);
  //Mit weiß füllen (für die Schrift)
  fill(255);
  //Text ausgeben (welchen Wert hat x)
  text("x = " + x, 10, 10);
}

Cool nicht wahr :-)
Und damit nicht genug, denn es ist auch möglich, auf mehrere zu prüfen. Beispiel:
WENN Mausposition X kleiner als 100 UND Mausposition Y kleiner als 100, mache Hintergrund auf Schwarz, ANDERNFALLS mache Hintergrund auf Weiß. Das Beispiel versuchen wir einmal, zuvor aber noch etwas zu …

Logische Operatoren

Logische Operatoren wären UND, ODER und NICHT. Das Zeichen für UND ist hierbei &&. Das Zeichen für ODER ist ||. Um einen Ausdruck oder eine Bedingung zu negieren, setzt du einfach ein Ausrufezeichen (!) davor.
Doch schau dir den Code an:

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(255);
}

void draw()
{
}

void mouseMoved()
{
  //Wenn MausX kleiner oder gleich 100 UND
  //MausY kleiner oder gleich 100, DANN ..
  if (mouseX <= 100 && mouseY <= 100)
  {
    background(0);
    fill(255, 0, 0);
  }
  else
  {
    background(255);
    noFill();
  }
  //Damit man auch sieht, wo 100 und 100 ist,
  //zeiche Ich ein Rechteck:
  stroke(0);
  rect(0, 0, 100, 100);
}

Gar nicht so schwer, stimmt’s? Wollen wir uns zuletzt noch ein Praxisbeispiel ansehen. Danach zeige Ich dir noch Zufallszahlen. Aber nun zum praktischen Beispiel. Nehmen wir eine Ellipse. Wenn Taste “a” gedrückt wird, soll diese horizontal von links nach rechts fliegen, jeweils an den Wänden abprallen und zurückfliegen. Drückst du “+”, bzw. “-” soll so die Geschwindigkeit reguliert werden. Drücke die Taste “0″, um die “Kugel” an den Anfangspunkt zu setzen. Befindet sich die Maus im Bereich der Ellipse, kannst du die Kugel herumziehen, lässt du die Maus los, fliegt sie weiter. Aber schau selbst:

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(255);
  x = 50;
  y = height / 2;
  ballSize = 50;
  speed = 2.0;
  richtungX = 1;
  richtungY = 1;
  lock = false;
  drag = false;
}

//X- und Y-Koordinaten des Balles und die Größes festlegen,
//außerdem die Richtung in die er sich bewegt
int x, y, ballSize, richtungX, richtungY;
//Geschwindigkeit
float speed;
//Variablen um anzugeben, ob der Ball herumgezogen wird
boolean lock, drag;

void draw()
{
  background(255);
  noStroke();
  fill(0);
  //Ellipse wird gezeichnet
  ellipse(x, y, ballSize, ballSize);
  //wenn der Ball nicht gezogen wird, soll er
  //von allein weiterwandern
  if(lock == false){x += speed * richtungX;}
  //Wenn der Ball an der Wand abprallt, richtung ändern
  if(x >= width - ballSize / 2 || x <= ballSize / 2)
  {
    //Einfaches Prinzip wie damals in der Schule, 
    //Zahl mal -1 ändert jeweils das Vorzeichen, also
    //aus Plus wird Minus, aus Minus wird Plus
    richtungX *= -1;
  }
}

void keyPressed()
{
  //Wenn + gedrückt wird, erhöhe speed
  if(key == '+' && speed <= 7.0)
  {
    speed += 0.5;
  }
  if(key == '-' && speed >= 0.5)
  {
    //Wenn - gedrückt wird, verringere speed
    speed -= 0.5;
  }
  if(key == '0')
  {
    //Wenn Null (0) gedrückt wird, setze Ellipse auf
    //Startposition zurück
    x = 27;
    y = height / 2;
  }
}

void mouseDragged()
{
  //Wenn sich Maus innerhalb des Balles befindet, dann...
  if(mouseX <= x + ballSize / 2 && mouseX >= x - ballSize / 2 &&
     mouseY >= y - ballSize / 2 && mouseY <= y + ballSize / 2)
  {
    //.. setze Variable drag auf true.
    drag = true;
  }
  //Wenn drag true ergibt, dann..
  if(drag)
  {
    //..sperre automatische Bewegung der Kugel und..
    lock = true;
    //..setze Werte von x und y auf Mausposition
    y = mouseY;
    x = mouseX;
  }
}

void mouseReleased()
{
  //Wird die Maus losgelassen, ist der verschiebevorgang beendet,
  //und die Kugel fliegt allein weiterhin von links nach rechts, 
  //bzw von rechts nach links, je nachdem.
  lock = false;
  drag = false;
}

Cool oder =D
Eigentlich alles gar nicht soo schwer, gute Mathematikkenntnisse schaden nie, und bei Processing ist das sogar beste Voraussetzung, um bessere Ergebnisse zu erzielen. Bevor Ich diesen Artikel abschließe, möchte Ich dir noch Zufallszahlen zeigen. Zufall übersetzt heißt random. Und damit kannst du Zufallszahlen generieren. Random ist immer vom Datentyp float, also Kommazahl.
Müssen wir Werte übergeben? Aber ja. Insgesamt zwei, nämlich einen Minimalwert und einen exklusiven Maximalwert, zwischen dem eine zufällige Zahl generiert werden soll. Das heißt du möchtest eine zufällige Zahl, diese soll aber auf jeden Fall zwischen 10 und zwanzig liegen? Dann schau her, der schlichte Befehle dafür lautet

random(minimum, maximum);

Und um dazu gleich ein Beispiel zu geben:

Sourcecode
void setup()
{
  size(200, 200);
  smooth();
  background(255);
}

void draw()
{
  
}

void mouseClicked()
{
  float zufall = random(10, 20);
  background(255);
  fill(0);
  textSize(15);
  text(zufall, 100, 100);
}

Du brauchst nichts weiter tun, als mit der Maus zu klicken, es wird dann immer eine neue Zufallszahl generiert und ausgegeben. Wenn die Zahl von Null bis irgendwas generiert werden soll, kannst du dir einen Parameter sparen, dann wird die Zahl immer von Null bis zum Maximum generiert, Höchstwert immer exklusive, das bedeutet der Höchstwert wird nie generiert werden. 20 exklusive bedeutet demnach zwischen 0.000 und 19.999. Ich denke aber, du willst lieber eine gerade Zahl haben, also ohne Kommastellen, nicht wahr? Du “konvertierst” den Wert einfach in int. Ich zeige dir mal was Ich meine:

Sourcecode
void setup()
{
  size(200, 200);
  smooth();
  background(255);
}

void draw()
{
}

void mouseClicked()
{
  int zufall = int(random(10000));
  background(255);
  fill(0);
  textSize(30);
  text(zufall, width / 2 - 25, height / 2);
}

Ich denke das ist soweit klar, wird Zeit dass wir damit auch was anfangen können. Mal folgender Code, dort wird nun jeweils ein Rechteck zufälliger Größe über das andere gezeichnet, an zufälligen Stellen und mit zufälliger Füllfarbe:

Sourcecode
void setup()
{
  size(200, 200);
  smooth();
  background(0);
}

void draw()
{
  noStroke();
  int rndColorR, rndColorG, rndColorB, rndX, rndY;
  rndColorR = int(random(255));
  rndColorG = int(random(255));
  rndColorB = int(random(255));
  rndX = int(random(25, 150));
  rndY = int(random(25, 150));
  stroke(rndColorB, rndColorB, rndColorR);
  fill(rndColorR, rndColorG, rndColorB);
  rect(random(-50, width), random(-50, height), rndX, rndY);
}

Willst du das Bild nun auch noch speichern, gibt es dafür einen wirklich sehr simplen einfachen Befehl. Schreibe nur save und übergib den Namen für das Bild. Sehen wir uns den Code doch einmal an:

Sourcecode
void setup()
{
  size(200, 200);
  smooth();
  background(0);
}

void draw()
{
  noStroke();
  int rndColorR, rndColorG, rndColorB, rndX, rndY;
  rndColorR = int(random(255));
  rndColorG = int(random(255));
  rndColorB = int(random(255));
  rndX = int(random(25, 150));
  rndY = int(random(25, 150));
  stroke(rndColorB, rndColorB, rndColorR);
  fill(rndColorR, rndColorG, rndColorB);
  rect(random(-50, width), random(-50, height), rndX, rndY);
}

int zaehler = 0;
void mousePressed()
{
  noLoop();
  save("Zufall-" + zaehler + ".png");
  zaehler++;
}

void mouseReleased()
{
  loop();
}

Wird die Maus gedrückt, wird die Variable zaehler um 1 erhöht, der Durchlauf(draw()) unterbrochen, das Bild gespeichert. Wird die Maus losgelassen, läuft draw() weiter. Ja, da sind 2 Befehle die du noch nicht kanntest, nämlich noLoop() um die Ausführung von draw() zu unterbrechen, und loop() um die Ausführung fortzusetzen.
Die Bilder werden dann im Verzeichnis, in dem das Projekt liegt, gespeichert.

Folgendes Beispiel zeigt, wie Punkte zufälliger größe und zufälligen Graustufen an zufällige Positionen des Fensters gezeichnet werden. Klickedie rechte Maustaste, um das Fenster zu leeren:

[expand title=">> Code ausklappen<<"]

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(0);
}

void draw()
{
  strokeWeight(random(7));
  stroke(random(255));
  point(random(width), random(height));
}

void mouseClicked()
{
  if(mouseButton == RIGHT){background(0);}
}

[/expand]

Sieht doch für das bisschen Code gar nicht mal schlecht aus, nicht wahr :-)
Wie Ich versprochen habe, brauchst du nicht viel Code, um interessante Effekte zu zaubern, du musst lediglich die gegebenen Befehle an den richtigen Stellen einzusetzen wissen. Ein letztes Beispiel möchte Ich dir noch zeigen:
Es wird von rechts nach links jeweils eine Linie gezeichnet, eine vertikale Linie. Dabei soll sie jeweils eine zufällige Länge(in dem Fall Höhe) haben. Sind die Linien bei kleiner Null angelangt, geht’s von vorne los. Du hast einen weißen Hintergrund und schwarze Linien, damit der Effekt noch besser rüberkommt, zeichne Ich vor der schwarzen immer noch eine weiße Linie, das wird erst beim zweiten Durchlauf sichtbar, aber das siehst du gleich. Schau her, kopier den Code und führe Ihn bei dir aus:

Sourcecode
void setup()
{
  size(300, 300);
  smooth();
  background(255);
  x = width + dicke;
  dicke = 7;
  //frameRate legt fest, wieviele Frames pro sekunde 
  //gezeigt werden. Standardwert ist 60
  frameRate(32);
}

int x, dicke;
void draw()
{
  //Endpunkte von Linien Eckig
  strokeCap(SQUARE);
  //Strichdicke festlegen
  strokeWeight(dicke);
  //Strichfarbe Weiß
  stroke(255);
  //Linie um beim nächsten durchlauf das "übermalen" zu simulieren
  line(x - dicke, 0, x - dicke, height);
  //Strichfarbe Schwarz
  stroke(0);
  //Linie die sich von rechts nach links bewegt, und
  //dabei vertikal eine zufällige Länge hat
  line(x, height - 50, x, height - 50 - int(random(1, height - 60)));
  //Variable x verringern, damit sich die Linien
  //nach links bewegen
  x -= dicke;
  //Wenn die Linie bei kleiner 0 angekommen ist...
  if(x < 0 - dicke * 2)
  {
    //..dann fang von vorne an
    x = width + dicke;
  }
}

Und wenn du anstatt stroke(0); nun stroke(random(255)); schreibst, hast du sogar zufällige Graustufen. Oder gar stroke(random(255), random(255), random(255)); für völlig Bunte Linien :-)
Ändere auch in void setup() einmal den initialwert für die Variable “dicke” um dir das mal anzusehen, spiele auch mit der frameRate herum. Auch sieht es interessant aus, wenn du frameRate auf 60 setzt, stroke weiter auf Null lässt und dicke auf 1 stellst, dann bekommst du so etwas:


Originalgröße

Probiere mit random und den Fallbedingungen ein wenig herum, und schau, was alles möglich ist. Es ist wirklich einfach. Tausche Codezeilen um herauszufinden, welchen Effekte diese Umstellung ergibt. Gestalte es dynamischer oder mach beim Beispiel von eben die länge der Linien abhängig vom Größenunterschied zwischen mouseX und pmouseY, und und und… Alles ist möglich, du kannst nichts kaputtmachen, lerne die gegebenen Befehle an den richtigen Stellen einzusetzen, um noch bessere Animationen und Bilder zu machen..

Für diesen Teil, also was Fallbedingungen (Wenn – Dann – Ansonsten ..) und Zufallszahlen angeht, bin Ich hiermit fertig. Im nächsten Artikel zeige Ich dir noch Schleifen, auch ein interessantes und vor allem wichtiges Thema in der Programmierung. In den nächsten Artikeln zeige Ich dir spezielle Befehle wie dist oder map, außerdem mathematische Funktionen wie PI, pow(), abs(), cos() und so weiter, es bleibt weiterhin spannend und mit jedem Artikel biete Ich dir mehr Wissen und somit mehr Möglichkeiten, mit Processing umzugehen und immer bessere Ergebnisse zu erzielen :-)

Bis dahin viel Spaß beim Lernen und noch einen schönen Tag
Marius

processing

Processing – Wiederholung, spezielle Befehle, setup() und draw()

Hi,

heute werden wir ein paar Wiederholungen machen, spezielle Befehle und konstante kennenlernen, zuerst werden wir uns aber auf die zwei wichtigsten Funktionen konzentrieren, nämlich …

void setup() und void draw()

Das haben wir uns nocht nicht angesehen, dabei wirst du bei der Programmierung mit Processing ständig mit diesen beiden Funktionen arbeiten.

>> void setup()
Die Befehle in dieser Funktion werden zu Anfangs einmal ausgeführt. Das bedeutet das Programm wird ausgeführt, diese Funktion wird ein mal aufgerufen, die Befehle darin werden abgearbeitet und danach wird nie wieder auf diese Funktion zurückgegriffen.

>> void draw()
Die Befehle in dieser Funktion werden, nachdem setup() aufgerufen wurde, kontinuierlich ausgeführt, immer und immer wieder. Das Programm wird ausgeführt, Funktion setup() wird aufgerufen, danach draw(), die dann läuft bis das Programm beendet wird.

Doch was sind Funktionen? Ich habe dir bereits einige gezeigt, zum Beispiel line() oder point() oder ellipse(), auch das sind Funktionen. Allerdings sind das von Processing fertige Funktionen, du müsst nur die Werte übergeben, Processing wertet diese aus und arbeitet mit den Werten, die du übergeben hast.
Diese beiden Funktionen setup() und draw() arbeiten ähnlich, allerdings musst du hier keine Werte übergeben, sondern du schreibst die Befehle, die in der Funktion beim Aufruf dann ausgeführt werden.

Doch was bedeutet dieses »void«? Eine void-Funktion hat keinen Rückgabewert, das ist der Unterschied. Ich kann mir vorstellen dass du nicht wirklich was damit anfangen kannst, aber das kommt alles noch in den nächsten Artikeln. Vorwiegend interessiert uns nur, was diese beiden Funktionen bedeuten, und wie man diese anwendet.

Bei einer Funktion ist es so: Du gibst den modifier an(hier void), danach den Namen der Funktion, dann 2 runde Klammern(setup() und draw() erwarten keine Parameter, daher steht auch nix zwischen den Klammern).
Und dann öffnen wir die Funktion mit einer geschweiften Klammern und schließen die Funktion auf diese Weise auch wieder. Die geschweiften Klammern definieren Anfang und Ende der Funktion, alles was hier dazwischen steht, also die Befehle die du schreibst, werden ausgeführt. Schau her:

void setup()
{
  //Befehle, die zu Anfangs 1x ausgeführt werden
}

void draw()
{
  //Befehle, die kontinuierlich ausgeführt werden
}

In der Funktion setup() legst du die wichtigsten Sachen fest, wie zum Beispiel die Größe des Fensters, ob smoothing aktiviert ist, Strichdicke und Zeichenfarbe oder Füllfarbe, eventuelle initialisierung der Variablen, dazu kommen wir noch, und so weiter.

Interessant ist folgendes: du schreibst deine Befehle in Funktion draw(), diese werden von oben nach unten abgearbeitet. Nach { geht’s los, bei } endet alles und es wird wieder alles von neuem berechnet. Stell dir vor, du zeichnest eine Ellipse. Du schreibst lediglich diesen einen Befehl. Dieser Befehl wird dann immer wieder ausgeführt, und eine Ellipse wird über die andere gezeichnet. Setze am Anfang den Befehl background ein, somit wird bei jedem erneuten Abarbeiten der Funktion der Hintergrund neu gezeichnet, alles was vorher da war verschwindet, und alles wird neu gezeichnet. Wie gesagt, von oben nach unten. So ist es auch, wenn du einen Teil einer Form über eine andere zeichnest. Der Befehl weiter unten landet in der Ausgabe dann weiter oben, Ich zeige dir das mal:

void setup()
{
  size(300, 300);
  smooth();
  background(255);
  strokeWeight(2);
}

void draw()
{
  background(255);  //Damit der Hintergrund immer wieder
                  //neu gezeichnet wird
  fill(255, 0, 0);
  ellipse(100, 100, 100, 100);
  fill(0, 255, 0);
  rect(100, 100, 100, 100);
}

Du erhältst:


Originalgröße

Tauschen wir nun die Befehle, wird logischerweise zuerst das Rechteck, danach die Ellipse gezeichnet, das heißt die Ellipse überdeckt dann das Rechteck:

void setup()
{
  size(300, 300);
  smooth();
  background(255);
  strokeWeight(2);
}

void draw()
{
  background(255);  //Damit der Hintergrund immer wieder
                  //neu gezeichnet wird
  fill(0, 255, 0);
  rect(100, 100, 100, 100);
  fill(255, 0, 0);
  ellipse(100, 100, 100, 100);
}

Entsprechend auch die Ausgabe:


Originalgröße

Ganz einfaches und logisches Verfahren. Hier noch eine Beispielgrafik, wie die Funktionen arbeiten:


Originalgröße

Ich denke das ist soweit klar, spiele ein wenig damit herum, viel wirst du aber ohne Variablen oder Ereignisse noch nicht machen können. Das kommt im nächsten Artikel.

Sehen wir uns noch einige unabkömmliche Befehle und Konstanten an.

Spezielle Befehle, Konstanten

Zuerst Konstanten. Konstanten haben immer feste Werte. Diese kannst du nicht verändern, aber sie abrufen. Stell dir vor, du definierst zu Anfangs die Größe des Fensters, und nun möchtest du eine Linie von links nach rechts bis zum Ende des Fensters, und von oben nach unten dasselbe, also quasi ein Kreuz. Das ist sicherlich nicht weiter schwierig:

void setup()
{
  size(300, 300);
  smooth();
  background(255);
  strokeWeight(2);
  stroke(0);
  line(0, 150, 300, 150);
  line(150, 0, 150, 300);
}

Fertig. Dafür müssen wir das eigentlich nicht extra in void draw() schreiben, es verändert sich ja nichts und alles muss nur einmal gezeichnet werden. Aber zum Beispiel, der Code den wir hier haben, funktioniert tadellos, sodass du ein Kreuz, bestehend aus 2 Linien, ins Fenster zeichnest. Wunderbar. Aber nehmen wir an du stellst nach einer Weile fest, dass du doe Größe des Fensters nun doch lieber kleiner oder größer hättest. Dann müsstest du extra alles im Code erneut anpassen, was sich -wie hier- auf die Breite oder Höhe, beziehungsweise jeweils die Hälfte des Wertes, bezieht. Und das wird viel Arbeit, je größer der Code ist desto mehr hast du zu tun. Wäre es da nicht praktisch, einfach immer einen Werte zu wissen, an dem man sich orientieren kann? Breite und Höhe, zu englisch wäre das width und height. Und mehr ist es auch nicht, diese konstanten enthalten als Wert die am Anfang an size übergebenen Parameter für Breite und Höhe. Mit folgendem Code bekommen wir genau das gleiche hin, nur bist du hier schon um einiges flexibler. Du kannst dann die Größe oben bei size() verändern wie du möchtest, das Kreuz passt sich immer an:

void setup()
{
  size(300, 300);
  smooth();
  background(255);
  strokeWeight(2);
  stroke(0);
  line(0, height / 2, width, height / 2);
  line(width / 2, 0, width / 2, height);
}

Mehr ist es nicht. Merke dir, width und height. Es gibt auch noch screen.width und screen.height, für die Höhe und Breite des gesamten Bildschirms. Es gibt noch weitere konstanten, die zeige Ich dir gleich.
Zuvor aber noch zu zwei wichtigen Befehlen, nämlich

println() und print()

Mit println() bzw. print() kannst du Ausgaben erzeugen. Du hast sicherlich bemerkt, dass du in der IDE unten ein schwarzes kleines Fenster hast:


Originalgröße

Hier wird das, was du an println() bzw. print() übergibst, ausgegeben. Du hast mittels dieser Befehle die Möglichkeit, Text auszugeben, der dann in ebendiesem schwarzen Fenster landet. Die Schreibweise ist denkbar einfach, du tippst den Befehl und setzt in Klammern den Text, welcher ausgegeben werden soll. Da wir hier mit Strings arbeiten (String = Zeichenfolge) gehört das in Anführungszeichen:


Originalgröße

Nichts leichter als das. Du hast möglicherweise auch schon den Unterschied zwischen println() und print() erkannt. Wenn nicht: println() macht nach jeder Ausgabe automatisch einen Zeilenumbruch, print() tut das nicht.

Sehen wir uns weitere Konstanten an, da wären noch PI, HALF_PI, QUARTER_PI und TWO_PI. Was Pi( π ) ist kennst du sicher. Nun haben wir einige Konstante zusammen, wollen wir diese einmal ausgeben, um deren Wert zu erhalten:


Originalgröße

Du siehst die Ausgabe, in Anführungszeichen unseren Text, der dann verknüpft wird mit dem “+”-Zeichen. Dan hängen wir noch die Konstanten an.
Konstante werden immer GROß geschrieben. Warum width und height nicht? Ganz einfach, weil der Wert in gewisser Weise ja auch variabel ist, je nachdem welche Größe wir an size übergeben. PI z.B. jedoch ist konstant, dieser Wert ändert sich nicht. Benutzt du später im Code Konstante die du selbst deklariert hast, schreibe diese bitte auch in dieser Notation.

Jetzt hast du wieder einige Schlüsselbefehle kennengelernt. In den nächsten Artikeln legen wir mit der Programmierung los. Das wird dir Spaß machen, da bin Ich sicher. Ich zeige dir, wie genau das mit den Strings funktioniert, außerdem noch andere Datentypen. Bis dahin sieh dir die im unteren Kasten geposteten Links an. Im kommenden Artikel zeige Ich dir noch, wie du auf Ereignisse reagierst, damit zum Beispiel etwas passiert, wenn du die Maus bewegst oder eine Taste drückst. Darauf gehe Ich nicht soo im Detail ein, mehr dazu gibt es wie immer in der Processing.org Referenz nachzulesen, zudem sind die Funktionsnamen für Ereignisse sehr sprechend.

Grüße
Marius