Navigation überspringen

Übungen zu Grundlagen

Zeichnen

Fragen

  1. Wo ist (0 | 0) im Koorindatensystem bei Processing?
  2. Was ist bein Befehl?
  3. Wie ist ein Befehl aufgebaut?
  4. Was ist der Unterschied zwischen einem Befehl und einer Funktion?
  5. Welche einfachen Formen kannst du mit Processing zeichnen?
  6. Gib den Code an, den du benötigst, um eine Linie zu zeichnen, die bei (0|0) startet und bei (25|50) endet.
  7. Wenn ich zwei Formen an der selben Stelle zeichne und sie sich überlappen, welche Form ist dann die obere? Die ich zuerst gezeichnet habe oder die ich als zweites gezeichnet habe?
  8. Was legt der Zeichenmodus fest?
  9. Wie lange gilt der Zeichenmodus, wenn ich einen Zeichenmodus z.B. mihilfe von rectMode() festlege?
  10. Gibt den Code an, der nötig ist um ein Rechteck mit folgenden Eigenschaften zu zeichenen:
    • Position: P(10, 15)
    • Breite: 20
    • Höhe: 60
    • Modus: CORNER
  11. Wie hoch und wie breit ist das gezeichnete Rechteck?
    rectMode(CORNERS);
    rect(45, 50, 65, 75);
  12. Farben und Graustufen werden mithilfe von Zahlen angegeben. Wie groß, dürfen diese Zahlen maximal sein? Was passiert, wenn die Zahl höher ist?
  13. Macht es es einen Unterschied, an welcher Stelle in meinem Code ich den Befehl background() verwende? Warum?
  14. Je nachdem, wie viele Zahlen ich z.B. im Befehl fill() angebe, erhalte ich eine andere Art von Farbe. Wie viele unterschiedliche Möglichkeiten habe ich, Zahlen anzugeben und welche Art von Farbe erhalte ich jeweils?
  15. In welcher Reihenfolge kann man die 3 Grundfarben einem Befehl background, fill oder stroke übergeben?
    • Grün, Rot, Blau
    • Gelb, Blau, Rot
    • Rot, Gelb, Blau
    • Blau, Grün, Rot
    • Rot, Grün, Blau
  16. Wenn ich eine Farbe z.B. mit fill() festlege - wie lange gilt diese Farbe dann?

Aufgaben

1. Formen

Zeichne die folgenden Figuren zunächst auf Papier und schreibe dann die entsprechende Befehlsfolge auf.

Haus Halbkreis Stern Gesicht
Haus Halbkreis Stern Gesicht

Zeichne die Figur ...

  • indem du Grundformen kombinierst.
  • mit Hilfe von beginShape und endShape.
Zeichne die Form mithilfe eines Segments Zeichne die Figur mit Hilfe von beginShape und endShape. Zeichne die Figur Gesicht Grundformen.
Achte darauf auf die Reihenfolge der Befehle, damit alle Teile sichtbar sind.

2. Farben

Zeichne folgende Figuren:

Halb-halb Gesicht Mund Regenbogen
Halb-Halb Gesicht Gesicht 2

Regenbogen

Arbeite ausschließlich mit fill und schalte die Kontur mit noStroke aus.

Text-Ausgabe

Fragen

  1. Mit der Funktion stroke() kann die Farbe eines Texts verändert werden - Wahr oder Falsch?
  2. Mit welchem Operator können 2 Strings aneinandergereiht werden?
  3. Mit welchen Funktionen kann man Text in Processing ausgeben (in der Konsole oder in  dem Anwendungsfenster)?
    • screen()
    • println()
    • consoleWrite()
    • write()
    • print()
    • text()
  4. Mit welchem Befehl kann man die Farbe des Textes ändern?

Aufgaben

1. Text-Mauszeiger
An der aktuellen Mausposition soll der Schriftzug "maus" erscheinen (mittig über Maus, Schriftgröße 20).

2. Text mit Schatten
Schreibe ein Programm, bei dem in der Mitte des Bildschirms dein Name in weiß steht und leicht schräg versetzt darunter dein Name nochmal in schwarz und leicht transparent - so, dass es aussieht, als wäre der zweite Text ein leichter Schlagschatten. Welchen Text musst du zuerst zeichenen?

3. Ecken
Schreibe ein Programm, bei dem in der oberen linken Ecke "OBEN LINKS" steht, in der oberen rechten Ecke "OBEN RECHTS" usw. Dabei soll der Text mithilfe von textAlign auch jedes Mal so ausgerichtet werden, dass z.B. der Text "OBEN LINKS" auch nach oben und links ausgerichtet ist, der Text "OBEN RECHTS" nach oben und rechts, usw.

Interkation

Fragen

  1. Was ist der Unterschied zwischen dem statischen und dem aktiven Modus in Processing?
  2. Wie kommt man in Processing in den aktiven Modus?
  3. Was darf man im aktiven Modus NICHT machen?
    • Befehle außerhalb von setup, draw oder anderen Funktionen schreiben
    • Zuerst draw und danach erst setup schreiben
    • Nur eines von beiden (setup oder draw) verwenden - man muss immer beides verwenden
  4. Wie oft bzw. wie lange wird draw ausgeführt?
  5. Mit welcher von Processing zur Verfügung gestellten Variablen, kann die X-Position der Maus im Vergleich zur ihrer Position im vorherigen Frame (vorheriger Aufruf von draw()) ausgelesen werden?
  6. Die Koordinaten von mouseX und mouseY werden auch außerhalb des Zeichenfensters aufgezeichnet. Wahr oder falsch?
  7. Welche der beiden Aussagen ist korrekt?
    • Die Hintergrundfarbe muss in draw mithilfe von background festgelegt werden, da sonst kein Hintergrund gezeichnet wird und ich die Bilder überlagern.
    • Es reicht die Hintergrundfarbe in setup einmal festzulegen und diese gilt dann für alle Bilder, die in draw gezeichnet werden, solange bis eine andere Hintergrundfarbe festgelegt wird.

Aufgaben

1. Mauskoordinaten
Schreibe ein Programm, dass ständig die aktuelle x-Koordinate der Maus auf der Konsole ausgibt. Das sieht z.B. so aus:

69
71
72
72
72

2. Interaktive Linie
Programmiere eine Linie, deren eines Ende der Maus folgt.

3. Wachsendes Quadrat
Programmiere ein Quadrat in der Mitte des Bildschirms, dessen Höhe & Breite den x-Koordinaten der Maus entspricht.

4. Fadenkreuz
Zeichne zwei Linien, die parallel zur x- bzw. y-Achse sind und immer der Maus folgen. Der Schnittpunkt liegt genau auf dem Mauszeiger. Programmiere zunächst eine der beiden Linien, dann wird es dir leicht fallen, die zweite hinzuzufügen.

5. Linie und Kreis
Zeichne eine Linie, die parallel zur y-Achse verläuft und immer der Maus folgt. Im Bereich zwischen der Linie und dem linken Rand soll mittig ein Kreis gezeichnet werden, der den Bereich zwischen linken Rand und Linie ganz ausfüllt.

6. Symmetrische Linie
Programmiere eine Linie, deren eines Ende der Maus folgt, das andere Ende liegt immer punktgespiegelt auf der anderen Seite des Mittelpunkts.

7. Rechteck-Ecke
Zeichne ein Rechteck in die Mitte des Fensters, wo immer eine Ecke der Maus folgt.

Tipp: Überlege, welcher Zeichenmodus für Rechtecke hier am besten geeignet ist (es ist nicht CENTER)

8. Position zu Graustufe
Ein mittig positioniertes Quadrat soll seinen Grauwert ändern, je nachdem, wo sich die Maus befindet. Ist die Maus ganz links, ist das Quadrat schwarz. Ist sie recht, wird das Quadrat weiß.

Hinweis: Bei einer Division mit einer ganzen Zahl (z.B. 10) müsst du 10.0 schreiben, um zu signalisieren, dass das Ergebnis eine Kommazahl sein soll (sonst wird das Ergebnis zu einer ganzen Zahl gerundet).

9. Quadrat erscheinen lassen
Schreibe ein Programm, bei dem zunächst nichts zu sehen ist. Wenn man eine Taste auf der Tastatur klickt, soll in der Mitte des Fensters ein Quadrat erscheinen. Wenn mit der Maus geklickt wird, soll das Quadrat wieder verschwinden.

Variablen

Fragen

  1. Wie lange ist eine Variable gültig, die in einer Funktion definiert wurde?
  2. Was geschieht bei der Deklaration einer Variablen und was bei der Initialisierung?
  3. Kann man eine Variable mehrmals intialisieren? Begründe deine Antwort.
  4. Was bedeutet es, wenn ein Variable global ist?
  5. Wo sollten globale Variablen im Code stehen?
  6. Nenne 3 Konventionen für Variablennamen und gib jeweils ein negativ Beispiel für einen Variablennamen an, der sich nicht an diese Konvention hält.
  7. Warum müssen Konstanten im selben Schritt deklariert und initialisiert werden?
  8. Welches Schlüsselwort muss ich verwenden, um eine Konstante anzulegen?
  9. Strenggenommen braucht man Konstanten nicht, da man den Wert auch einfach in einer "normalen" Variablen speichern und verwenden kann, ohne ihn zu verwenden. Warum ist es dennoch sinnvoll Konstanten für Werte zu verwenden, die sich nicht ändern? Nenne mind 2 Gründe.
  10. Was ist ein Literal?

Aufgaben

1. Durchschnitt
Erzeuge drei Variablen a, b und c vom Typ float. Setze a und b auf beliebige Werte, z.B. auf 1 und 2. In Variable c soll der Durchschnitt von a und b berechnet werden. Gib c mit println() auf der Konsole aus.

2. Variablen für Position
Zeichne ein 30x30-Quadrat an der Position (50, 50). Ersetze die Position durch zwei Variablen x und y. Setze die Variablen auf verschiedene Werte und teste, ob dein Quadrat an der richtigen Stelle gezeichnet wird.

3. Variablen für Position 2
Erstelle zwei Variablen x und y und belege sie mit jeweils 10. Zeichne ein 30x30-Quadrat an ebendiese Position. Zeichnen ein zweites Quadrat an eine Position, die 50 Pixel weiter rechts und 50 Pixel weiter unten liegt. Benutze für das zweite Quadrat auch die beiden Variablen!

Variablen für Position 2

4. Smiley
Erstelle zwei Variablen x und y und belege sie mit jeweils 50. Zeichne einen Smiley aus entsprechenden Grundformen. Verwende für die Positionen der Formen immer die Variablen x und y zusammen mit Addition/Subtraktion. Ändere aber nie die Werte von x und y.

Smiley

Ersetze jetzt die Variablen x und y gegen mouseX und mouseY und überführe das Programm in den aktiven Modus (mit setup und draw). Der Smiley sollte der Maus folgen.

5. Dreisatz
In dem folgenden Programm hast du Preis (in Euro) und Größe (in Gramm) einer Müslipackung gegeben und (nur) die Größe einer zweiten Müslipackung. Unter der Voraussetzung, dass beide Müsli gleich viel kosten, ergänze den Code so, dass der Preis für die zweite Packung ausgerechnet und ausgegeben wird.

float muesliGroesse1 = 700;
float muesliPreis1 = 3.99;
float muesliGroesse2 = 500;
float muesliPreis2 = 0; // Ersetze die 0 durch eine Rechnung

println(muesliPreis2);

Um zu sehen, ob dein Programm korrekt ist, teste es mit Werten mit offensichtlichem Ergebnis, z.B.

float muesliGroesse1 = 1000;
float muesliPreis1 = 2;
float muesliGroesse2 = 500;

Datentypen

Fragen

  1. Was sind Bits und warum bilden sie die Grundlage von Datentypen?
  2. Warum gibt es für eine Kategorie von Daten verschiedene Datentypen? Zum Beispiel gibt es 4 verschiedene Datentypen für Ganze Zahlen - warum?
  3. Was ist der Unterschied zwischen float und double?
  4. Welchen Wertebereich hat der Datentyp boolean?
  5. Ist für Processing 'a' und "a" dasselbe? Begründe deine Antwort.
  6. Mit welchem Operator kann ich mehrere Strings (Zeichenketten) miteinander kombinieren?
  7. Wie lautet der Datentyp für einzelne Zeichen?

Aufgaben

1. Mausposition ausgeben
Schreibe ein Programm, das in jedem draw-Zyklus die aktuelle Mausposition in folgender Weise ausgibt (eine Zeile pro Zyklus):

x=48 y=47
x=48 y=52
x=48 y=56
x=48 y=60
x=52 y=65
x=52 y=65
x=55 y=70

Tipp: Verlangsame den draw-Zyklus mithilfe von frameRate().

2. Halbe Pixel?
Kopiere folgendes Programm

float x = 0;

void draw() {
   background(255);
   ellipse(x, 50, 30, 30);
}

Ergänze den Code, so dass x bei jedem draw-Zyklus um 0.5 erhöht wird. Wie verhält sich der Kreis?

3. Zeichenverkettung
Kopiere folgendes Programm:

String message = "la";

void setup() {
   println(message);
}

void draw() {
}

Ergänze den Code, so dass bei bei jedem draw-Zyklus genau eine neue Zeile auf die Konsole geschrieben wird, so dass die Konsole nach Zyklen wie folgt aussieht:

la
la la
la la la
la la la la



Lokale Variablen

Fragen

  1. Wie lange ist eine Variable gültig, die innerhalb einer Funktion deklariert wurde?
    • bis zum Ende des Programms
    • bis zum Ende des nächsten Durchlaufs der draw-Funktion
    • bis zum Ende der Funktion
  2. Wie wird der Bereich bezeichnet, in dem eine Variable gültig ist und verwendet werden kann?
  3. Was genau passiert, wenn sich zwei Variablen überschatten? Worauf muss man achten, wenn man Überschattung vermeiden möchte?

Aufgaben

Du kannst bei den folgenden Aufgaben lokale Variablen nutzen (musst du aber nicht).

1. Zwillinge
Programmiere ein Programm, mit 2 Kreisen, einem schwarzen und einem weißen. Der weiße Kreis soll immer an der Position es Mauszeigers sein. Der schwarze Kreis soll punktsymmetrisch in Relation zum Mittelpunkt des Fensters dem weißen Kreis gegenüber liegen.

Zwillinge

2. Mitte
Programmiere ein Programm, in dem von der oberen linken Ecke aus eine Linie zur Position des Mauszeigers gezeichnet wird. An der Stelle des Mauszeigers soll ein weißer Kreis mit dem Durchmesser 10 gezeichnet werden. Ein weiterer Kreis soll auf der Mitte zwischen der oberen linken Ecke und dem Mauszeiger gezeichnet werden.

Mitte

Systemvariablen

Fragen

  1. Was sind Systemvariablen?
  2. Was passiert, wenn du eine Variable anlegst, die den selben Namen wie eine Systemvariable hat? Tip: Probiere es mal aus ...
  3. Welche 2 Dinge sollte man im Bezug auf Systemvariablen niemals machen? Warum?

Aufgaben

1. Zeichen-Ticker
Zeichne das Zeichen der zuletzt gedrückten Taste in die Mitte des Fensters.

2. Mitte
Zeichne einen Kreis genau in die Mitte des Fensters (Größe 111 x 77). Verwende dazu width und height. Wenn du die Fenstergröße änderst, sollte der Kreis immer in der Mitte bleiben, ohne dass du den Ellipse-Befehl änderst.

Fenstermitte

3. Zähler
Mithilfe von frameRate() und frameCount kannst du einen Sekundenzähler realisieren. Bei Mausklick soll der Zähler auf 0 springen

Syntax und Konventionen

Fragen

  1. Was ist der Unterschied zwischen Syntax und Konvention?
  2. Warum ist es wichtig, sich an den Syntax einer Sprache zu halten?
  3. Warum ist es wichtig sich an Konventionen zu halten?
  4. Wie sollen Variablen, Konstanten und Funktionen gemäß der Konventionen geschreiben werden? Ordne die Begriffe Variablen, Konstante und Funktionen der jeweiligen Schreibweise zu.NUR_GROSSBUCHSTABEN (Unterstrich zwischen 2 Wörtern)
    • kleinerAnfangsbuchstabe  (neue Wörter mit Großbuchstaben)
    • meistensInVerbform  (kleiner Anfangsbuchstabe, neue Wörter mit Großbuchstaben)
  5. Welches dieser Worte ist korrekt in Camel Case geschrieben?
    • my-favorite-number
    • MY_FAVORITE_NUMBER
    • myfavoriteNumber
    • myFavoriteNumber
  6. Wann sollte Code eingerückt werden?Sämtlicher Code, der sich innerhalb von geschweiften Klammern befindet.
    • Sobald eine neue Funktion oder Kontrollstruktur (if, ...) geschrieben oder aufgerufen wird.
    • Groß- und Kleinschreibung ist bei der Programmierung von Java irrelevant. Wahr oder falsch?

Aufgabe

1. Schelchter Code, guter Code
Damit Code funktioniert und von guter Qualität ist, muss er sich an gewisse Syntax-Regeln, Stilvorgaben und Konventionen halten. Untenstehend siehst du einen Programmcode von miserabler Qualität, welcher im akutellen Zustand auch nicht funktioniert. Passe den Code so an, dass ...

  • er wieder funktioniert und macht, was er soll
  • er eine hohe Qualität hat, indem er sich an die Stilvorgaben und Konventionen hält
float x1; float x2; float x3;
final float speed=3; final int r = 10;
boolean left1=true;boolean left2=true;boolean left3=true;
void setup () {
size(200,200);
x1 = random(50,width-50);x2=random(50,width-50);x3=random(50,width-50);}
void Draw() {
background(50); fill(200,50,50);
ellipse(x1,width*0.25,r*2,r*2); ellipse(x2,width*0.5,r*2,r*2); ellipse(x3,width*0.75,r*2,r*2);
move-balls(); }
/* move balls
void move-balls() {
if (x1+r>width){left1=true;}
if (x1-r<0){left1=false;}
if (left1){x1-=speed;}
else{x1+=speed;}
if (x2+r>width){left2=true;}
if (x2-r<0){left2=false;}
if (left2){x2-=speed;}
else{x2+=speed;}
if (x3+r>width){left3=true;}
if (x3-r<0){left3=false;}
if (left3){x3-=speed;}
else{x3+=speed;}
}

Arithmetische Operatoren

Fragen

  1. Liefern folgende Rechnungen dasselbe Ergebnis? Begründe!
    • println(4/2);
    • println(4.0/2);
  2. Gegeben ist folgender Code. Welchen Wert hat z?
    • double x = 29;
      double y = 3;
      double z;
      z = x % y;
  3. Was beschreibt der Begriff "Ringeigenschaft" in Bezug auf den Modulo-Operator?
  4. Gegeben ist folgender Code. Welchen Wert hat x?
    • x = 10;
      x /= 2;
  5. Welche Ausgabe liefert folgender Code? Warum werden 2 unterschiedliche Zahlen ausgegeben?
    • int eins = 10;
      println(eins++);
      int zwei = 10;
      println(++zwei);
  6. Welche Ausgabe liefert folgender Code?
    • int age = 15;
      println("Ich bin " + 2 * ++age   + "Jahre alt");
  7. Wie wird festgelegt, in welcher Reihenfolge Operatoren angewendet werden?
  8. Erkläre die Begriffe Prefix und Postfix.

Aufgaben

1. Muster
Schau dir den Code an. Welche Ausgabe liefert der Code? Überprüfe deine Annahme, indem du den Code in Processing ausführst.

int x = 0;
int y = 0;

void draw() {
   line(x, 0, x, y);
   x++;
   y++;
}

Verändere den Code um jeweils eines der folgenden Muster zu erzeugen:

Muster

2. Animation mit Modulo
Die Systemvariable frameCount zählt von Beginn deines Programms an, wieviele Frames bereits vergangen sind, d.h. die Variable enthält 0, 1, 2, 3 etc. Verwende frameCount zusammen mit dem Modulo-Operator, um einen Ball immer wieder von links nach rechts fliegen zu lassen. Dein draw() besteht dabei lediglich aus zwei Code-Zeilen.

3. Pulsierender Cursor
Verwende den Modulo-Trick aus der vorigen Aufgabe, um an die Stelle der Maus einen pulsierenden Cursor zu stellen.

Typumwandlung

Fragen

  1. Was passiert bei einem impliziten Cast? Nenne ein Codebeispiel
  2. Was passiert bei einem expliziten Cast? Nenne ein Codebeispiel
  3. Innerhalb der Gruppe der primitven Datentypen kann ich jeden Datentyp in jeden anderen Datentyp umwandeln. Wahr oder falsch?
  4. Welches Ergebnis liefert folgende Rechenaufgabe? Rechne es nicht aus, sondern überlege dir im Kopf erst deine Antwort und überprüfe dann das Ergebnis
    • int foo = 5;
      int bar = 3;

      int ergebnis = foo / bar;
    • Begründe, warum es zu dem Ergebnis kommt.

Mathematische Funktionen und Konstanten

Fragen

  1. Die Funktion cos() gibt Werte im Bereich von ?? bis ?? zurück. (Fülle die Lücken)
  2. Bogenmaß und Grad sind zwei Möglichkeiten dasselbe zu messen - in diesem Fall z.B. Winkel. Dabei entspricht TWO_PI im Bogenmaß genau ?? in Gradangabe. (Fülle die Lücke)
  3. Welchen Datentyp geben die Math-Funktionen ceil() und floor() zurück?
  4. Was für einen Wert gibt die Funktion random(zahl1, zahl2) zurück?
    • wert >  zahl1 && wert <  zahl2
    • wert >= zahl1 && wert <  zahl2
    • wert >  zahl1 && wert <= zahl2
    • wert >= zahl1 && wert <= zahl2

Made with eXeLearning (New Window)