Lernpfad:Einführung in Processing/16: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Jneug (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „{{NNavigation}} == tixy == Im Tauschordner findest du ein {{Processing}}-Projekt mit dem Namen <code>tixy</code>. Öffne das Projekt und sieh es dir an. Du s…“) |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 26: | Zeile 26: | ||
{{Hinweis| | {{Hinweis| | ||
Du kannst Funktionen wir <code>sin</code>, <code>cos</code>, <code>tan</code>, usw. verwenden.}} | Du kannst Funktionen wir <code>sin</code>, <code>cos</code>, <code>tan</code>, usw. verwenden.}} | ||
== Das Muster == | |||
<syntaxhighlight lang="java" line="1"> | |||
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); | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
Das obige Programm erstellt ein Karo-Muster und animiert es. | |||
{{Aufgabe:Start}} | |||
# 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 <code>rect</code> und <code>line</code> lassen sich durch Angabe einer dritten Koordinate auch in 3D-Darstellen. Lies für weitere Informationen in der Referenz nach. | |||
{{Aufgabe:End}} |
Version vom 4. Februar 2022, 00:36 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 Millisekunden.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
rect
undline
lassen sich durch Angabe einer dritten Koordinate auch in 3D-Darstellen. Lies für weitere Informationen in der Referenz nach.