Lernpfad:Einführung in Processing/16: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Jneug (Diskussion | Beiträge) |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 19: | Zeile 19: | ||
Die Funktion erhält vier ''Parameter'': | Die Funktion erhält vier ''Parameter'': | ||
# <code>t</code> ist die Zeit, die das Programm läuft in | # <code>t</code> ist die Zeit, die das Programm läuft in Sekunden. | ||
# <code>i</code> ist die Nummer des Kreises. Es gibt 16 Reichen und 16 Spalten. Der Kreis oben links hat die Nummer <code>0</code>, der Kreis links daneben <code>1</code>, und so weiter bis Nummer <code>255</code> unten rechts. | # <code>i</code> ist die Nummer des Kreises. Es gibt 16 Reichen und 16 Spalten. Der Kreis oben links hat die Nummer <code>0</code>, der Kreis links daneben <code>1</code>, und so weiter bis Nummer <code>255</code> unten rechts. | ||
# <code>x</code> - ist die Spaltennummer des Kreises (von <code>0</code> bis <code>15</code>). | # <code>x</code> - ist die Spaltennummer des Kreises (von <code>0</code> bis <code>15</code>). |
Version vom 4. Februar 2022, 12:42 Uhr
tixy
Im Tauschordner findest du ein Processing-Projekt mit dem Namen tixy
. Öffne das Projekt und sieh es dir an.
Du siehst eine Funktion dot
und zwei Reiter: tixy
und canvas
. canvas
soll nicht verändert werden, sondern nur die dot
Funktion.
Starte das Programm und schau dir das Ergebnis an. Lösche dann die Zeile return x%4 - y%4
und entferne den Kommentar //
aus der Zeile darüber. Studiere erneut das Ergebnis.
Das Programm arbeitet nach einem einfachen Prinzip:
- Die
dot
-Funktion gibt eine Zahl zwischen-1
und1
zurück (return
). - Der Betrag der Zahl bestimmt die Größe des Punktes (
0.5
und-0.5
bedeuten beide halbe Größe,-.25
und.25
bedeuten beide ein Viertel der Größe, usw.). - Negative Zahlen färben den Punkt rot, positive weiß.
Die Funktion erhält vier Parameter:
t
ist die Zeit, die das Programm läuft in Sekunden.i
ist die Nummer des Kreises. Es gibt 16 Reichen und 16 Spalten. Der Kreis oben links hat die Nummer0
, der Kreis links daneben1
, und so weiter bis Nummer255
unten rechts.x
- ist die Spaltennummer des Kreises (von0
bis15
).y
- ist die Zeilennummer des Kreises (von0
bis15
).
Arbeitsauftrag
Experimentiere mit der dot
-Funktion und versuche spannende Muster und Animationen zu erzeugen.
Du kannst Funktionen wir sin
, cos
, tan
, usw. verwenden.
Das Muster
float size = 50;
float x = 0;
float y = 0;
void setup() {
size(400, 400);
}
void draw() {
background(200);
float s = size+(size*sin(millis()/1000.0)*0.5);
for ( float i = 0; i < width/s; i+=1.0 ) {
for ( float j = 0; j < height/s; j+=1.0 ) {
fill(255);
stroke(0);
strokeWeight(2);
rect(x + i*s, x+j*s, s, s);
}
}
}
Das obige Programm erstellt ein Karo-Muster und animiert es.
Arbeitsauftrag
- Analysiere das Programm und erkläre seine Funktion. Nutze die Fachbegriffe, die du in diesem Lernpfad gelernt hast.
- Animiere das Muster. Du kannst das Programm beliebig modifizieren, aber du musst immer vom ursprünglichen Karo-Muster ausgehen. Sei kreativ!
- Schau dir für weitere Ideen die Processing Referenz an.
- Befehle wie line() lassen sich durch Angabe einer dritten Koordinate auch in 3D darstellen. Lies für weitere Informationen in der Referenz und bei Michael Kipp nach.