Lernpfad:Einführung in Processing/16: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Jneug (Diskussion | Beiträge) |
Jneug (Diskussion | Beiträge) |
||
Zeile 67: | Zeile 67: | ||
#* Befehle wie {{Processing Ref|line()}} lassen sich durch Angabe einer dritten Koordinate auch in 3D darstellen. Lies für weitere Informationen in der Referenz und bei [http://michaelkipp.de/processing/grafik3d.html Michael Kipp] nach. | #* Befehle wie {{Processing Ref|line()}} lassen sich durch Angabe einer dritten Koordinate auch in 3D darstellen. Lies für weitere Informationen in der Referenz und bei [http://michaelkipp.de/processing/grafik3d.html Michael Kipp] nach. | ||
{{Aufgabe:End}} | {{Aufgabe:End}} | ||
{{P5js|https://editor.p5js.org/Ngb/full/63nh3BJlD}} |
Version vom 4. Februar 2022, 12:22 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 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.