Erstellen von Medien – Serlo „Mathe für Nicht-Freaks“

Bilder und Animationen erstellen

Diagramme mit Inkscape erstellen

Oberfläche des Programms „Inkscape“

Für die Erstellung von mathematischen Abbildungen und Diagrammen bietet sich das Tool Inkscape an. Dieses Tool bietet sich an, wenn man Diagramme von Vektoren oder Veranschaulichungen von Konzepten erstellen möchte. Hilfe findest du unter den folgenden Links:

• Offizielle Hilfe zu Inkscape
• Inkscape Video Tutorial

Folgende Abbildungen wurden mit Inkscape erstellt:

• 
  Addition zweier Vektoren
• 
  Illustration zum Epsilon-Delta-Kriterium der Stetigkeit
• 
  Veranschaulichung des Assoziativgesetzes
• 
  Beispiel einer Menge

Diagramme automatisch mit Python/Matplotlib erstellen

To-Do:

Mithilfe des eingefügten Beispieles aufzeigen, dass bei komplexeren Diagrammen/Grafiken das automatisierte Plotten mit Python/Matplotlib sinnvoll sein kann. Dabei will ich beispielhaft den Code erklären, der zur unten stehenden Grafik geführt hat.

V=R^2 mit Untervektorraum und vielen Nebenklassen v+U

Animationen als animierte Gifs erstellen

Folgende Abbildungen wurden als animierte gifs mit Hilfe der Programmiersprache Python erstellt:

• 
• 

Der dazugehörige Code ist auf meiner Github-Page zu finden: SerloAnimations

Die Grundidee bei der Animationserstellung ist die, dass man automatisch jedes Frame einer Animation erstellt und diese hintereinander abgespielt werden. Man kann zum Beispiel das Python Package matplotlib nutzen, um die einzelnen Frames zu erstellen und das Package imageio um diese zu einer gif-Datei hinzuzufügen.

Das folgende Minimalbeispiel zeigt Schritt für Schritt den Aufbau einer einfachen Animation:

Laden benötigter Packages und Definition des Zeitparameters

import matplotlib.pyplot as plt  # Package for plotting
import numpy as np               # For manipulating arrays
import imageio                   # For writing/reading images
import os                        # For deleting temp. files
timeaxis = np.linspace(-1,1,10)   # timeaxis = [-1.0 ... 1.0] in 10 steps
fps = 10                         # 10 frames per seconds animation speed

Wir definieren das Array 'timeaxis' mit 10 Einträgen von -1 bis 1, damit wir später für jeden der 10 Frames den Inhalt abhängig davon verschieden plotten können. Wir wollen die Funktion sin(x) plotten, wobei die Amplitude der Sinusfunktion sich linear von -1 bis 1 ändert.

Erstellen eines Plots pro Frame und Hinzufügen zu animiertem gif

writer = imageio.get_writer('MinimalExample1.gif', mode='I', fps=fps)

for t in timeaxis:  # loop over time, t goes from -1 to 1
    ### This is the actual plot ######
    fig, ax = plt.subplots(figsize=(5,3), dpi=75)  # definition of a new figure fig and plotaxis ax
    ax.set_xlim(0,2*np.pi); ax.set_ylim(-1,1)      # definition of plot limits
    x = np.linspace(0,2*np.pi,100)                 # definition of x values from 0 to 2pi in 100 steps
    ax.plot(x, t*np.sin(x))                        # plotting of t*sin(x) with t as the amplitude
    ##################################
    
    plt.savefig('tmp.png')                         # save plot as temporary file
    plt.close(fig)                                 # delete fig object for resetting of plot area
    image = imageio.imread('tmp.png') 	           # reading in the temporary file
    writer.append_data(image)                      # append plot to the animated gif

os.remove('tmp.png')                               # remove leftover temporary file
writer.close()                                     # close gif writer object

Das Ergebnis wird im obigen Beispiel als MinimalExample1.gif abgespeichert und sieht so aus:

Plot der Funktion t*sin(x), wobei sich t während der Animation linear von -1 bis 1 ändert.

Komplexere Plots

Ausgehend vom obigen Minimalbeispiel ist es möglich, beliebige Animationen zu erstellen. Das Grundprinzip, dass der Inhalt sich abhängig von einem Zeitparameter ändert, kann vielseitig benutzt werden.

• Plots können sich in Abhängigkeit des Parameters während der Animation ändern
• Die Position von Objekten kann verändert werden
• Die Sichtbarkeit von e.g. Text kann moduliert werden
• Die Richtung und Länge von Vektoren kann sich ändern

Sollen sich verschiedene Dinge im Plot zu unterschiedlichen Zeiten ändern, können mehrere Zeitparameter eingeführt werden. Auch nicht-lineare Änderungen des Zeitparameters über die Animation hinweg sind denkbar.

Alles, was mit Hilfe von matplotlib geplottet werden kann, kann mit diesem Ansatz animiert werden.

Animationen als animierte Svgs erstellen

Der oben beschriebene Ansatz mit animierten gifs hat Nachteile:

• Animierte gifs haben eine große Dateigröße, obwohl ihr Inhalt sehr redundant ist
• Sie sind nicht editierbar. Für Änderungen ist immer der Quellcode nötig
• Die Erstellung ist nicht interaktiv möglich, wie z.B. mit Inkscape, was die Hürden für Autoren erhöht.

Eine Alternative ist die Nutzung von animierten svgs. Svg ist ein Vektorgrafik-Format, das zum Beispiel mit Inkskape erstellt werden kann. Die Datei ist eine Textdatei mit einer geometrische Beschreibung des Bildinhalts, der erst bei der Darstellung in eine Pixelgrafik verwandelt wird. Eine bereits erstellte svg-Datei bei wikibooks kann heruntergeladen, mit Inkscape geöffnet und einfach editiert werden, um ein davon abgeleitetes Werk zu erstellen. Mit wenigen Zeilen zusätzlichem Code in der svg-Datei kann diese von einer statischen Vektorgrafik in eine Animation umgewandelt werden.

Die Nutzung dieser Technik bei Wikibooks ist eingeschränkt. Eingebettet erscheint nur eine statische Vorschau der Animation, wie folgendes Beispiel zeigt:

Hier ist nur eine statische Vorschau sichtbar. Bei zweimaligem Klicken wird das Original angezeigt und dann auch animiert.

Erst beim zweimaligen Klicken auf die Animation erscheint die originale svg-Datei als Animation. Nach dem Umzug von Mathe-für-nicht-Freaks zu Serlo wird es möglich, animierte svg-Dateien direkt anzuzeigen. Wegen der vielen Vorteile dieses Formates scheint es sinnvoll, neue Animationen als animierte svg-Dateien zu erstellen. Zur Nutzung in wikipedia/wikibooks wäre es sinnvoll, die Möglichkeit einer automatischen Konvertierung von svg nach gif zu recherchieren.

To-Do:

Möglichkeit zur Konvertierung von animierter svg nach gif untersuchen.

To-Do:

Beispiel für die Animation einer svg Datei, am Besten an einem mathematischen Beispiel, etwa anhand einer Grafik der komplexen Zahlen auf der Gausschen Zahlenebene.