Triangular Mesh
Ein Netz aus Dreiecken in verschiedenen Grautönen sieht aus wie zerknittertes Papier oder ein Gebirge aus der Luft. Dreiecksnetze sind aber mehr als Dekoration: Jede 3D-Figur in einem Computerspiel besteht aus Dreiecken. Die Grafikkarte kann eigentlich nur eines – sehr viele Dreiecke sehr schnell füllen.
Wir bauen das Netz in zwei Schritten: erst die Punkte, dann die Dreiecke dazwischen.
Vorwissen: zweidimensionale Felder,
Objekte und die Methode linie aus Tiled Lines.
Die Punkte
Die Punkte liegen in Zeilen. Damit später gleichmäßige Dreiecke entstehen können, ist jede zweite Zeile um einen halben Abstand nach rechts versetzt – so wie die Steine in einer Mauer. Danach wackeln wir jeden Punkt ein wenig zufällig hin und her.
Jeder Punkt hat eine x- und eine y-Koordinate. Wir speichern ihn als Objekt
der Klasse Vector2 aus der Scratch-Bibliothek:
| Aufruf | Bedeutung |
|---|---|
new Vector2(x, y) |
ein neuer Punkt |
p.getX(), p.getY() |
seine Koordinaten |
p.distance(q) |
der Abstand zum Punkt q |
Alle Punkte zusammen stehen in einem zweidimensionalen Feld
Vector2[][] punkte – eine Zeile im Feld ist eine Zeile auf der Leinwand.
a) Setze WACKELN auf 0. Jetzt siehst du das Gitter ohne Zufall. Erkennst du
die versetzten Zeilen?
b) Die erste Spalte beginnt bei x = −225, also außerhalb der Leinwand.
Warum ist das sinnvoll? Tipp: Schau dir an, was mit WACKELN = 0.4 am
linken Rand passiert, wenn du −225 durch −175 ersetzt.
c) Was würde passieren, wenn WACKELN größer als 0.5 wäre?
Die Dreiecke
Zwischen zwei Zeilen liegt ein Streifen aus Dreiecken. Nimmt man die Punkte beider Zeilen abwechselnd – einen von oben, einen von unten, wieder einen von oben … – entsteht eine Zickzack-Folge. Je drei aufeinanderfolgende Punkte dieser Folge bilden ein Dreieck:
o1 o2 o3 Zickzack: u1 o1 u2 o2 u3 o3 ...
\ / \ / \
\ / \ / \ Dreiecke: (u1 o1 u2)
u1-----u2-----u3 (o1 u2 o2)
(u2 o2 u3) ...Weil jede zweite Zeile versetzt ist, muss man bei jeder zweiten Zeile mit dem oberen Punkt anfangen statt mit dem unteren.
Bleibt das Füllen. Der Stift kann keine Flächen füllen, also malen wir das Dreieck aus wie mit einem Filzstift: Von einer Ecke A ziehen wir Linien zu vielen Punkten auf der gegenüberliegenden Seite BC – so dicht, dass keine Lücke bleibt. Ein Punkt auf der Strecke von B nach C ist
B + (C − B) · anteil mit anteil zwischen 0 und 1.
a) Die Zickzack-Folge einer Zeile hat 20 Punkte. Wie viele Dreiecke entstehen daraus? Und wie viele im ganzen Bild?
b) In dreieck steht t += 1. Ändere es auf t += 5 und auf t += 0.2.
Was siehst du, und was bedeutet das für die Laufzeit?
c) (int) (Math.random() * 16) * 17 ergibt 16 verschiedene Grautöne. Welche
sind das? Warum gerade 17?
d) Lass die Umrandung weg. Wirkt das Bild dann flacher oder räumlicher?
Tipp zu c)
(int) (Math.random() * 16) ist eine ganze Zahl von 0 bis 15. Was ergibt
15 · 17?
Weiterspielen
Licht von oben. Statt zufälliger Grautöne: Mach jedes Dreieck umso heller, je weiter oben es liegt – mit ein wenig Zufall dazu. Das Netz bekommt dann eine Richtung, als würde es von oben beleuchtet.
Die y-Koordinate des Schwerpunkts eines Dreiecks ist der Mittelwert der drei y-Koordinaten.
Farbpalette. Lege ein Feld mit vier oder fünf Farben an, die gut zusammenpassen, und wähle für jedes Dreieck zufällig eine davon.
Wellen. Verschiebe die Punkte nicht zufällig, sondern mit einer
Sinuswelle: y + Math.sin(x / 40) * 15. Kombiniere Welle und Zufall.
Nach dem Tutorial Triangular Mesh von Generative Artistry.