Processing - Variablen, Datentypen, Operatoren

<style type="text/css"> b#u_operator{border: 2px solid #888888; background-color: #FFFFFF; color: #000000; border-radius: 7px; padding: 2px 7px 2px 7px; margin: 5px 2px 2px 2px;} </style>

Hi,

jetzt wird's langsam richtig spannend. In Kürze wirst du phantastische Effekte zustande bringen können. Das können wir nur dadurch erreichen, indem wir das Programm dynamisch gestalten und mit Variablen arbeiten. Variablen - merk dir das gut, denn damit wirst du ab sofort täglich zu tun haben, ein Programm ohne Variablen macht schon fast gar keinen Sinn.

Doch wollen wir uns zuallererst einmal ansehen ..

<h3>Was Variablen sind</h3>

Wie immer ist für mich schwierig, etwas zu erklären, ohne zu wissen, welchen Kenntnisstand du ungefähr hast, besonders was Programmierung angeht. Variablen, was stellt man sich darunter vor? Variablen -> variabel, also flexibel, veränderbar. Wollen doch mal sehen, wie Wikipedia Variablen erklärt:

<div style="border: 2px solid #666666; border-radius: 10px; box-shadow: 1px 1px 2px #000011; padding: 7px;">In der Programmierung ist eine Variable im allgemeinsten Sinne einfach ein Behälter für Rechnungsgrößen („Werte“), die im Verlauf eines Rechenprozesses auftreten. Im Normalfall wird eine Variable durch einen Namen bezeichnet und hat eine bestimmte Adresse im Speicher des Rechners.</div>

Damit ist eigentlich alles gesagt. Aber was stellt man sich darunter vor? Ich versuche es einmal mit eigenen Worten zu erklären. Stell dir eine Variable als eine leere Hülle vor, oder eine Schachtel. Du kannst die Schachtel nun mit beliebigen Dingen füllen. Du hast beim Start des Programmes keine Schachteln, die musst du dir erstellen. Das bedeutet, du kannst zu Anfangs deine Schachteln oder Kartons bereitstellen und mit Sachen befüllen, du kannst auch während das Programm ausgeführt wird immer wieder Dinge aus der Schachtel nehmen, Dinge hinzufügen oder alles aus der Schachtel herausnehmen. Deine Schachteln sind immer beschriftet, sodass du gleich weißt, wo du was machen / herausnehmen oder hineinlegen sollst. Am Beispiel von Variablen könnte man das nun so erklären: Du deklarierst eine Variable (deklarieren bedeutet, dass du dir die Variable schon einmal zur Verfügung stellst, ganz gleich, was du nun jetzt oder später noch damit hast, sie muss aber auf jeden Fall da sein). Dieses deklarieren geschieht in etwa so: Du legst fest, welche Art von Werten die Variable aufnehmen kann, und wählst einen Namen für diese Variable. Du kannst immer nur bestimmte Werte in Variablen speichern, so wird dann zwischen den verschiedenen sogenannten "Datentypen" unterschieden. Du kannst die Variable nun deklarieren, und Ihr gleich zu anfangs einen Wert zuweisen, oder auch später, wie du möchtest.

Ich zeige dir das einmal anhand dreier simpler Codezeile:

<div id="id_lightbox">
    <div id="id_box_header">
        <span id="id_box_title">Sourcecode</span>
    </div>
    <div id="id_box_main">

<pre> <span style="color: #CC6600;">int</span> Zahl; Zahl = 4; <span style="color: #CC6600;">int</span> Zahl2 = 12; </pre>

    </div></div>

Damit kannst du noch nicht viel anfangen, aber dir wird gleich einiges klar werden, wenn wir das Beispiel von diesem Code anhand einer Grafik deutlich machen:

Lies bitte zuerst diesen Wikipedia Eintrag zu Datentypen durch, besonders der Absatz "Elementare Datentypen" ist interessant.

Wenn du das gelesen hast, können wir hier weitermachen. Ich stelle dir einmal die 3 gebräuchlichsten Datentypen vor, die für den Anfang am öftesten vorkommen werden, nämlich int, float und string. Klingt seltsam, und was bedeutet das? int steht für Integer, also Ganzzahl. Variablen die mit diesem Datentypen deklariert werden, können Ganzzahlige Werte annehmen. Dann haben wir noch float, um Fließkommazahlen zu speichern, also Kommazahlen eben. Und dann noch String (zu Deutsch "Zeichenfolge"), um Text aufzunehmen. Die schreibweise ist hierbei relativ leicht, du suchst dir den Datentyp aus, legst einen Namen fest und übergibst einen Wert mit dem Zuweisungsoperator "=". Bei int und float schreibst du als Wert einfach die Zahl. Bei Strings schreibst du als Wert den Text, eingeschlossen in zwei Anführungszeichen, das ist wichtig. Sehen wir uns noch die Schreibweise an, Ich zeige dir ein Stück Code, welcher relativ einfach zu verstehen ist. Danach gehen wir auf die Operatoren ein, damit wir damit auch ordentlich was machen können :-)

<div id="id_lightbox">
    <div id="id_box_header">
        <span id="id_box_title">Sourcecode</span>
    </div>
    <div id="id_box_main">

<pre> <span style="color: #CC6600;">int</span> Zahl = 12; <span style="color: #CC6600;">float</span> Kommazahl = 5.21; <span style="color: #CC6600;">float</span> Kommazahl2; <span style="color: #CC6600;">String</span> zeichenfolge = <span style="color: #006699;">"Hallo"</span>; <span style="color: #CC6600;">String</span> Zeichenfolge2; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(300, 300); Kommazahl2 = 56.074; zeichenfolge2 = <span style="color: #006699;">"Noch ein Text"</span>; <span style="color: #CC6600;">int</span> NeueZahl = 82; } </pre>

    </div></div>

Du siehst, es ist ganz einfach. Bevor wir nun gleich zu den Operatoren kommen, nun noch eine Schreibweise, du hast nämlich auch die Möglichkeit, mehrere Variablen getrennt durch Komma in einer Zeile zu deklarieren. Dabei kannst du ihnen aber keinen Wert zuweisen:

<div id="id_lightbox">
    <div id="id_box_header">
        <span id="id_box_title">Sourcecode</span>
    </div>
    <div id="id_box_main">

<pre> <span style="color: #CC6600;">int</span> Zahl, Zahl2, Zahl3; <span style="color: #CC6600;">float</span> Kommazahl1, Kommazahl2; <span style="color: #CC6600;">String</span> text1, text2; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(300, 300); Zahl = 3; Zahl2 = 99; Zahl3 = 32423; Kommazahl1 = 43.01; Kommazahl2 = 0.002; text1 = <span style="color: #006699;">"Das ist ein Text"</span>; text2 = <span style="color: #006699;">"Das ist noch ein Text"</span>; } </pre>

    </div></div>

Nun zu den ..

<h3>Operatoren</h3>

Operatoren kennst du, jeder kennt Operatoren. Damit meine Ich speziell Rechenoperatoren. Du kennst Rechenoperatoren schon, es gibt aber auch Vergleichs- oder Zuweisungsoperatoren. Und das kommt jetzt dran. Fangen wir an mit den

<h3>Rechenoperatoren</h3>

+ Logisch, Plus ist zum addieren da (2 + 5 = 7) - Minus zum subtrahieren (abziehen) (7 - 2 = 5) Mal zum multiplizieren (2 5 = 10) / Teilen, also dividieren (10 / 5 = 2) % (modulo) Der Rest einer Division ==> 10 / 5 = 0 (also 10 geteilt durch 5 und 2, Rest 0, bedeutet 5 passt in 10 zwei mal rein, du hast keinen Rest) oder ==> 10 % 4 = 2 (10 geteilt durch 4 = 2 Rest 2, 4 passt in 10 zwei mal rein, du hast einen Rest von 2)

Sollte dir klar sein, brauchen wir nicht weiter ausschmücken, das kennst du. Was auch interessant ist, du kannst mit Klammern arbeiten, genauso wie damals (oder jetzt) in der Schule. Beispiel:

2 + 5 2 = 12 (2 + 5) 2 = 20

Nichts leichter als das, du kannst damit beliebig lange Rechenoperationen durchführen, Ich will es dir anhand eines einfachen Codes einmal zeigen:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 3px 3px 5px #000011; padding: 7px;"> <pre> <span style="color: #CC6600;">int</span> Ergebnis = ((2 + (2 * 4) * 4) - (12 / 2)) * 4; <span style="color: #CC6600;">println</span>(Ergebnis); </pre> </div>

Ergibt 112. Ich zeig' das kurz: 2 4 = 8 8 4 = 32 32 + 2 = 34 12 / 2 = 6 34 - 6 = 28 28 * 4 = 112;

Aber das nur als Beispiel ;-) Zu weiteren mathematischen Spezialfunktionen kommen wir gleich. Sehen wir uns erst noch Vergleichsoperatoren an.

<h3>Vergleichsoperatoren</h3>

Vergleichsoperatoren sind, wie der Name schon sagt, zum Vergleich zweier Werte da. Beispiel: Ist 5 gleich 5? Ist 7 größer als 5? Ist 7 größer oder gleich 5? Ist 5 kleiner als 7? Sowas zum Beispiel. Was soll Ich dazu sagen, Ich darf wohl davon ausgehen, dass du das kannst. Hier noch eine Tabelle:

<style type="text/css">table#tbl_vergleichsoperatoren td{padding: 5px;}</style>

<table id="tbl_vergleichsoperatoren" border="1" style="border-collapse: collapse;"> <tr><th>Operator</th><th>Erklärung</th><th>Beispiel</th></tr> <tr><td>==</td><td>Ist gleich</td><td>5 == 7 | trifft nicht zu</td></tr> <tr><td>&gt;</td><td>Größer als</td><td>5 &gt; 7 | trifft nicht zu</td></tr> <tr><td>&lt;</td><td>Kleiner als</td><td>5 &lt; 7 | trifft zu</td></tr> <tr><td>&gt;=</td><td>Größer oder Gleich</td><td>5 &gt;= 7 | trifft nicht zu</td></tr> <tr><td>&lt;=</td><td>Kleiner oder Gleich</td><td>5 &lt;= 7 | trifft nicht zu</td></tr> <tr><td>!=</td><td>Ist NICHT</td><td>5 != 7 | trifft zu</td></tr> </table>

Das werden wir noch weiter vertiefen, wenn wir zu den Fallbedingungen kommen, also Wenn-Dann Abfragen. Im nächsten Artikel mehr dazu.

<h3>Zuweisungsoperatoren</h3>

Zuweisungsoperatoren sind dazu da, um Variablen einen Wert zuzuweisen. Das machst du mit dem "="-Zeichen, wie du bereits weißt. Beispiel: int Zahl = 12; <== Variable "Zahl" wird der Wert 12 zugewiesen.

Inkrementieren und Dekrementieren Inkrementierenbedeutet, eine Variable(natürlich nur Zahlen) um genau 1 zu erhöhen. Beispiel:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 3px 3px 5px #000011; padding: 7px;"> <pre> <span style="color: #CC6600;">int</span> Zahl =12; Zahl = Zahl + 1; <span style="color: #7E7E7E;">//Du kannst auch schreiben:</span> Zahl += 1; <span style="color: #7E7E7E;">//Oder einfach:</span> Zahl++; </pre> </div>

Welche Schreibweise du wählst, liegt bei dir, aber Zahl++ ist weniger zum schreiben und sieht halt einfach geheimnisvoller aus ;-) Dasselbe funktioniert beim Dekrementieren, natürlich wird dann immer um 1 verringert, schau:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 3px 3px 5px #000011; padding: 7px;"> <pre> <span style="color: #CC6600;">int</span> Zahl =12; Zahl = Zahl - 1; <span style="color: #7E7E7E;">//Du kannst auch schreiben:</span> Zahl -= 1; <span style="color: #7E7E7E;">//Oder einfach:</span> Zahl--; </pre> </div>

Eigentlich ganz leicht. Das Inkrementieren wirst du die erste Zeit sicherlich verwenden, das kann Ich dir versprechen. Es gibt auch noch logische Operatoren, diese kommen dann aber erst mit den Fallbedingungen zum Einsatz.

Bevor Ich mit meinem Artikel fertig bin, will Ich dich noch auf etwas hinweisen. Wie du Funktionen Werte gibst, weißt du ja mittlerweile (Beispiel: size(300, 300);). Stell aber sicher, dass du auch den richtigen Datentyp übergibst. size(300.0, 300.0); wäre zwar dasselbe, würde aber nicht funktionieren, da Funktion "size()" einen Integer-Datentyp erwartet, und keine Fließkommazahl. Warum sage Ich dir das? Das sage Ich dir, weil es eine Möglichkeit gibt, einen Datentyp an einen anderen anzupassen. Klar, du wirst einen String(also Text) nicht in eine Zahl umwandeln können, aber du kannst den Wert eines float-Datentyps in integer wandeln.

size(int(300.0), int(300.0));

würde funktionieren, die Kommastellen werden einfach abgehackt.

Im nächsten Artikel will Ich dir Zufallszahlen und Fallbedingungen zeigen, wenn du das hast, weißt du schon eine Menge, sodass du nach dem nächsten Artikel mit Sicherheit schon schöne Dinge mit Processing anstellen kannst, es wird also spannend :-)

Bis dahin viel Spaß beim Lernen Marius