Verschieben, Drehen und Skalieren

Eine Transformation verschiebt, dreht oder vergrößert eine Form, indem sie die Koordinaten jedes Eckpunkts neu berechnet. So bewegt ein Spiel eine Figur und so zoomt eine Karte.

Alle drei Bewegungen lassen sich mit einer einzigen Rechenart ausdrücken, der Multiplikation mit einer Matrix. Das lernen Sie hier an einem Dreieck.

Ein Dreieck besteht aus drei Eckpunkten. Zum Verschieben addieren Sie zu jedem Punkt dieselbe Zahl in x und in y. Zum Skalieren multiplizieren Sie beide Koordinaten mit einem Faktor.

Die Form bleibt beim Verschieben gleich. Beim Skalieren mit 2 wird sie doppelt so breit und doppelt so hoch, wenn der Ursprung (0, 0) der feste Punkt ist.

Eine Matrix ist ein Raster aus Zahlen. Um auch das Verschieben als Matrix zu schreiben, bekommt jeder Punkt eine dritte Zahl: aus (x, y) wird (x, y, 1). Das sind homogene Koordinaten.

Dann ist die Matrix 3 mal 3. Jede Zeile der Matrix, Stelle für Stelle mit dem Punkt multipliziert und addiert, liefert eine neue Zahl des Punkts.

# Matrix mal Punkt, Zeile für Zeile.
m = [[2, 0, 3], [0, 2, 1], [0, 0, 1]]
p = [1, 1, 1]
x = m[0][0] * p[0] + m[0][1] * p[1] + m[0][2] * p[2]
y = m[1][0] * p[0] + m[1][1] * p[1] + m[1][2] * p[2]
print("Neuer Punkt:", x, y)
# Ändern Sie p auf [4, 0, 1] und starten Sie erneut.

NumPy ist die Bibliothek, die mit Zahlenrastern rechnet. Das Zeichen @ multipliziert eine Matrix mit einem Punkt. Der erste Befehl wendet die Matrix aus der Tabelle auf (1, 1, 1) an.

Er gibt [5 3 1] aus, wie Ihre Rechnung. Der zweite dreht (4, 0) um 90 Grad und gibt [0 4 1] aus: Der Punkt wandert von der x-Achse auf die y-Achse.

docker exec jupyter python3 -c "import numpy as np; m = np.array([[2, 0, 3], [0, 2, 1], [0, 0, 1]]); print(m @ np.array([1, 1, 1]))"

docker exec jupyter python3 -c "import numpy as np; d = np.array([[0, -1, 0], [1, 0, 0], [0, 0, 1]]); print(d @ np.array([4, 0, 1]))"

Zwei Matrizen lassen sich zu einer verketten: t @ d @ p dreht zuerst, weil d am nächsten beim Punkt steht, und verschiebt danach. Es wirkt immer die Matrix rechts zuerst.

Verschieben und Drehen sind nicht austauschbar. Der Punkt (1, 0) landet bei erst drehen, dann um (5, 2) verschieben bei (5, 3). Erst verschieben, dann drehen bringt ihn nach (-2, 6).

docker exec jupyter python3 -c "import numpy as np; t = np.array([[1, 0, 5], [0, 1, 2], [0, 0, 1]]); d = np.array([[0, -1, 0], [1, 0, 0], [0, 0, 1]]); p = np.array([1, 0, 1]); print(t @ d @ p, d @ t @ p)"

Der nächste Befehl zeichnet das Original als Umriss und das verschobene Dreieck gefüllt in dreiecke.png. Er gibt die neuen Ecken aus: [[10, 4], [18, 4], [10, 10]].

Die Datei zeigt zwei weiße Dreiecke auf Schwarz: oben links ein Umriss, rechts darunter ein gefülltes Dreieck derselben Form. Das Pixel an der Ecke (10, 4) ist weiß.

docker exec jupyter python3 -c "import numpy as np; from PIL import Image, ImageDraw; t = np.array([[0, 8, 0], [0, 0, 6], [1, 1, 1]]); m = np.array([[1, 0, 10], [0, 1, 4], [0, 0, 1]]); q = m @ t; b = Image.new('L', (24, 16), 0); d = ImageDraw.Draw(b); d.polygon([(0, 0), (8, 0), (0, 6)], outline=255); d.polygon(list(zip(q[0].tolist(), q[1].tolist())), fill=255); b.resize((240, 160), Image.NEAREST).save('dreiecke.png'); print(q[:2].T.tolist(), b.getpixel((10, 4)))"