Archiv der Kategorie: basics

Aufgaben zu den Basics


  1. Erkläre die Bedeutung folgender Symbole und Programmanweisungen:
    boolean    for    >=    %    int   <=    &&    char
    | |    ‚     {    ++    String    }    +=    „“    = –     ;    ==
    —    if    !=    -=    //    else    >    *    /* */    while    <    /
  2. Wieviel bit Speicher reserviert eine Variable vom Typ boolean?
    a) 32    c) 16
    b) 8      d) 1
  3. Was ist das Ergebnis des folgenden Programms?
    int a=0;
    for (int i=0; i<5; i++){
        a++;
        a += i+1;
    }a) 10    c) 20
    b) 15    d) 0
  4. Nimm 2 Variablen, x und y. Wir wollen nun die Ausganswerte vertauschen, also von x nach y und von y nach x übertragen. Welches der folgenden Programme macht das?
    1. x = y;
      y = x;
    2. tempX = x;
       tempY = y;
       x = tempX;
       y = tempY;
    3. y = x;
      tempX = x;
      x = tempX;
    4. tempX = x;
      x = y;
      y = tempX;
  5. Schreibe Programme, die folgende Ausgaben produzieren:
    Tipp: Verwende Schleifen und Modulo(%)
                  
  6. Schreibe Programme, die folgende Ausgaben produzieren:
    Tipp: Verwende sin() und cos()!
           
  7. Schreibe Programme, die folgende Ausgaben produzieren:
    Tipp: Verwende random() und noise()!
                     
  8. Schreibe Programme, die folgende Ausgaben produzieren:
       
  9. Schreibe den kürzest möglichen Code, der die folgenden Zahlenreihen ausgibt. Verwende dafür nur +, -, *, 0,
    und %.
    012340123401234
    000010000100001
    111101111011110
  10. Schreibe ein Programm, das den Mauszeiger auf einem 10 Punkte-Raster einschnappen lässt.
    Tipp: Verwende dabei die round() Funktion.
Advertisements

Bedingungen mit Switch – Case


Processing 2.0

Mit switch / case kann man wie mit if / else Bedingungen programmieren. Während bei Verzweigungen mit weniger als 3 Möglichkeiten if / else die richtige Wahl ist, verwendet man bei Verzweigungen mit vielem Möglichkeiten besser switch / case.

switch (Variable) {
case Wert der Variable:
Anweisung1;
break; //notwendig, sonst würde auch die Anweisung 2 ausgeführt!
case Wert der Variable:
Anweisung2;
break;
case Wert der Variable:
Anweisung3;
break;
default:
Anweisung4;

}

Interessant ist dabei, dass die Ausführung der Anweisungen separat mit dem Befehl break abgebrochen werden muss. Andernfalls werden alle weiteren Anweisungen ausgeführt, selbst wenn die Bedingungen dafür nicht erfüllt sind.

Die default: Anweisung kann optional verwendet werden, falls man eine Anweisung ausführen will, wenn alle anderen Bedingungen nicht erfüllt werden. Entspricht somit der else – Funktion.

Beispiel Mausposition 1: starte Applet

void setup() {
 size(500, 200);
}
void draw() {
 // Nicht im Android Modus
 //cursor(ARROW); //macht den Auszeiger in Form eines Pfeils sichtbar
 background(200);
 switch (round(mouseX/100)) {
 case 0:
 rect(0, 0, 100, 200);
 break;
 case 1:
 rect(100, 0, 100, 200);
 break;
 case 2:
 rect(200, 0, 100, 200);
 break;
 case 3:
 rect(300, 0, 100, 200);
 break;
 case 4:
 rect(400, 0, 100, 200);
 break;
 }
}

Beispiel Mausposition 2: starte Applet


void setup() {
  size(500, 200);
}
void draw() {
 // Nicht im Android Modus
 //cursor(ARROW);//macht den Auszeiger in Form eines Pfeils sichtbar
 background(200);
 switch (round(mouseX/100)) {
 case 0:
 rect(0, 0, 100, 200);
 case 1:
 rect(100, 0, 100, 200);
 case 2:
 rect(200, 0, 100, 200);
 case 3:
 rect(300, 0, 100, 200);
 case 4:
 rect(400, 0, 100, 200);
 } case
}

Um die Elementfolge von links nach rechts wachsen zu lassen, müsste man nur die case – Anweisungen in umgekehrter Reihenfolge platzieren.

Processing – Über dieses Weblog


Dieses Weblog gibt eine Einführung in die Programmierung mit Processing. Alle Artikel inkl. Quellcode werden gerade für Processing 2.0 überarbeitet.

Basics:

Advanced:

Div. Skripts

Android Apps mit Processing erstellen:

Kinect mit SimpleOpenNI:

Projekte:

Libraries

Für Kommentare, Anregungen und Verbesserungsvorschläge bin ich jederzeit dankbar!

Projektseite: http://processing.org/

Hier findest du neben dem Programm selbst auch noch viele Anwendungsbeispiele, die Programm – Referenz und einige gute Tutorials für den Einstieg in Processing.

Processing verwenden


Processing 2.0

Processing kann von der Projektseite heruntergeladen werden. Einfach auspacken und starten.

In Processing 2.0 gibt es rechts oben einen Modus – Wahlschalter. Dieser bietet nach der Installation 3 Möglichkeiten:

  1. JAVA … Es wird ein Java Programm erstellt, das auf unterschiedlichen Plattformen in einem eigenen Programmfenster läuft.
  2. ANDROID … Es wird ein lauffähiges Programm für Android Devices erstellt. Diese können entweder im Emulator oder auf dem Device ausgeführt werden. Damit dieser Modus funktioniert ist allerdings die Installation der Android SDK notwendig! Eine Anleitung findest du hier! Details
  3. JAVASCRIPT … In diesem Modus wird der Java Programmcode in Javascript Code konvertiert. Dieser wird dann direkt mit Browser angezeigt, und kann in jede Webseite integriert werden. Details

In allen 3 Modi wird der Programmcode im Programmfenster geschrieben und kann über die Play-Taste ausgeführt werden.

Das Terminal-Fenster unten kann für Textausgaben benutzt werden.

Die Export-Funktion erzeugt je nach Modus ein ausführbares Programm für Desktops, eine Android App oder eine HTML Datei mit Javascript Elementen.

Die Programmstruktur


Processing 2.0

Ein klassisches Processing-Programm besteht aus 2 Funktionen. setup() und draw(), wobei der Code in setup() einmalig und der Code in draw() kontinuierlich ausgeführt wird. Jeder Durchlauf von draw() zeichnet ein Frame in das Anwendungsfenster.

Beispiel: Applet starten

void setup() {
  size(300,300);
  /*legt dir größe
  des anwendungsfensters fest*/
}

void draw() {
  rect(50,50,100,100); // zeichnet ein rechteck auf den schirm
}

Processing basiert auf Java und übernimmt auch dessen Syntax.  Es wurde aber für eine bessere Usability bei grafischen Aufgaben um einige Elemente erweitert.

Kommentare: // einzeiliger Kommentar, /* */ mehrzeiliger Kommentar siehe Beispiel oben Anweisungstrennzeichen: „;“ – jede Programmanweisung sollte mit einem Strichpunkt abgeschlossen werden.

Funktionen: über sie kann man bestimmte Aktionen ausführen. Bsp: size(300,300). Funktionen werden immer von zwei runden Klammern gefolgt, innerhalb derer verschiedene Parameter zu finden sein können. Parameter können aber auch fehlen, Bsp: smooth();. Es ist auch möglich eigene Funktionen zu schreiben und diese dann in anderen Teilen des Programms aufzurufen, was die Übersichtlichkeit des Programmcodes deutlich erhöht.

Ausdrücke: Sind vielleicht aus der Mathematik bekannt und auch mit diesen zu Vergleichen. Ein Operator kombiniert dabei verschiedene Werte.

Bsp:

Ausdruck                    Wert
7                                       7
3+8                                 11
(12,8+179)*8         1534,4
7>5                               true
6<3                               false

Konsolenfenster: Um wichtige Werte auszugeben, die sich z.B. im Anwendungsfenster zu schnell ändern, kann man die Konsole benutzen. Bsp.: print(), oder println() Das folgende Beispiel gibt eine 10 im Konsolenfenster aus.

int x=10;
println(x);

Zusätzliche Leerzeichen sind egal. Siehe Beispiel oben.

Groß- Klein- Schreibung beachten!!!

Das Koordinatensystem


Processing 2.0

In Processing wird von jeder Anwendung ein Fenster erzeugt, dessen Größe von der Funktion size(x,y) bestimmt wird. Der erste Wert x steht für die Anzahl der horizontalen Pixel, der 2. Wert y für die Anzahl der vertikalen.

 size(640,480); //erzeugt somit eine Fenster mit 640*480 Bildpunkten 

Auch alle anderen Funktionen, nutzen ein Koordinatensystem. Jeder Punkt wird von einer x- und einer y- Koordinate bestimmt.

 point(200,200); //zeichnet einen Punkt auf 200 horizontal und 200 vertikal

Will man in 3D arbeiten, so kommt eine z-Achse hinzu. Siehe dazu: 3D Basics

Um das Programmfenster skalierbar zu machen verwendet man das Objekt frame. Dazu vielleicht später mehr. Durch die Zeile frame.setResizable(true); in setup() erhält man ein Programmfenster, das mit der Maus skaliert werden kann. Achtung funktioniert nur in Java Mode!

Einfache Formen


Processing 2.0

Punkt:

point(x,y);

Applet startenEin Punkt ist 1 Pixel groß und durch seine Position auf der x- und der y-Achse bestimmt.

Beispiel:Applet starten

point(10,20); //erster Punkt links oben, letzer
point(20,30);//rechts unten
point(30,40);
point(40,50);
point(50,60);

Punkte außerhalb des Displays werden nicht als Fehler behandelt, sondern einfach nicht angezeigt.

Übung: Schreibe ein Programm, das eine vertikale Linie aus Punkten von (10,10) bis (10,20) ausgibt.

Linie

line(x1,y1,x2,y2);

Zeichnet eine Linie von einem Anfangspunkt zu einem Endpunkt. Die Strichdicke kann nicht direkt in der Funktion line() eingestellt werden. Dafür gibt es die Funktion strokeWeight().

Beispiel: Applet starten

 strokeWeight(2);//legt die Linienstäre auf 2 Pixel fest

line(10,10,90,90); // zeichnet eine Line von (10,10) nach (90,90)

strokeWeight(4); line(90,10,10,90);

Dreieck

triangle(x1,y1,x2,y2,x3,y3);
Zeichnet ein Dreieck zwischen den 3 Eckpunkten. Dieses kann, wie auch andere 2-dimensionale Objekte gefüllt werden.  Dafür wird die Funktion fill() verwendet. Als Parameter für fill() kann entweder ein Grauwert (fill(255) wäre weiß), oder eine beliebige Farbe lt. RGB-Modell verwendet werden. fill(r,g,b), wobei r,g und b für die Rot, Grün und Blau-Werte von 0-255 stehen. Es können aber auch 2 Parameter angegeben werden, wobei der 2. für die Transparenz steht (0 – nicht durchsichtig, 255 völlig durchsichtig).

Siehe RGB Modell auf Wikipedia.

Beispiel: Applet starten

fill(227,16,16); //legt dir Füllfarbe für das
 // hintere Dreieck fest
 triangle(10,10,90,10,70,70); //hinten
 fill(255,230);//der 2. Wert definiert die Transparenz
 triangle(10,40,90,40,70,100);//vorne

Das Beispiel zeigt gut, dass jene Objekte, die im Code weiter unten generiert werden dann in der Darstellung im Vordergrund zu finden sind.

Viereck

quad(x1,y1,x2,y2,x3,y3,x4,y4);

Mit dieser Funkton lassen sich alle Arte von Vierecken erzeugen, auch Parallelogramme und irreguläre Vierecke.

Rechtecke

rect(x,y,width,height);

Rechtecke werden mit Hilfe des linken oberen Eckpunktes (x – und y- Koordinaten), der Breite und der Höhe bestimmt.

Übung: Erstelle ein Bild wie das unten. Verwende dafür die Funktionen size(), fill(), und rect().

Ellipse

ellipse(x,y,width,height);

Zeichnet Ellipsen und Kreise. Kreise entstehen dann, wenn widht und height gleich groß sind.

Übung: Erweitere die Abbildung oben mit ein paar runden Elementen.

Bezier

bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2);

Mit der Bezier- Funktion kann man Kurven erzeugen. Dies erfordert aber einige Übung. Prinzipiell funktioniert es wie die Vektor-Linienfunktion in Grafikprogrammen. Man definiert einen Punkt und lenkt durch einen 2. Punkt, der nicht Teil der Kurve ist die Linie ab.

Beispiel: Applet starten

 void setup () {
 size(640,480);
 }
 void draw (){
 bezier(100,100,mouseX,mouseY,mouseX,mouseY,400,100);
 } 

Hier kann mit der Maus cx1,cy1, cx2 und cy2 verändern und bekommt so einen Eindruck wie Bezier- Kurven entstehen.

Hintergrund

background();

Diese Funktion legt die Hintergrundfarbe fest. Sie kann genau wie fill() als Parameter einen Graustufenwert oder aber Werte nach RGB-Modell beinhalten.

Hinweis: Wenn man die RGB- Werte von bestimmten Farben sucht, kann man unter Tools>ColorSelektor ein Fenster aufrufen, dass die RGB Werte von individuell ausgewählten Farben anzeigt.

Sonstiges:

noFill() verhindert das Füllen von 2 und 3-D Objekten, es werden nur die Konturen angezeigt.

noStroke() verhindert das Anzeigen der Ränder von Objekten.

smooth() aktiviert das Antialiasing – Kanten werden geglättet. In Processing 2.0 standardmäßig aktiviert!

noSmooth() deaktiviert Antialiasing