Mit SVG und Javascript richtigen Strom erzeugen – eine grafische Animation des einschrittigen Übertrages nach Howard Aiken und Konrad Zuse.

Da am Ende etwas Buntes und Bewegliches herausgekommen ist, zeige ich es zuerst.

[iframe src=“https://www.uni-due.de/zim/burkhard.wald/svg2014/aiken6.svg“]

Die Herausforderung bestand darin, die grafischen Objekte mit elektrischen Eigenschaften zu versehen. Die Objekte sollen selbst wissen, ob sie sich berühren und sollen unter sich aushandeln, ob „Strom“ vom einem Objekt zu anderen übergeben werden soll. Und die Schaltelemente sollten natürlich im Bild anklickbar sein.

Am besten an dieser Stelle sollte ich mich entschuldigen, für die Möglichkeit, dass Sie als Leser und Betrachter das alles doch nicht so sehen und wahrnehmen, wie ich es mir gedacht habe. „Die Welt ist im Wandel“ könnte man mit der Elbenfürstin Galadriel aus der Tolkien-Welt sagen. In der Internet- und „Browser-Welt“ entstehen ständig neue Konzepte und Standards, die sich durchsetzen oder wieder im Nichts verschwinden. (Oder sie parken für einige Jahre oder Jahrzehnte in einer Warteschleife.) Um am Puls der Zeit zu sein, muss man daher immer die aktuellen Versionen der Web-Browser installiert haben. Mit meinem Artikel nutze ich ein Konzept und erzeuge zugleich eine Nachfrage nach der Unterstützung dieses Konzeptes.

Zunächst möchte ich aber erläutern, was die Zeichnung darstellt. Es geht um das maschinelle Addieren von Binärzahlen. Im Prinzip gehen Addiermaschinen – seien es mechanische, elektromechanische oder elektronische – ähnlich vor, wie wir es auch vom schriftlichen Addieren her kennen. Man stellt die Zahlen in einem sogenannten Stellenwertsystem dar, addiert dann zunächst die einzelnen „Stellen“ und muss eventuell noch pro „Stelle“ einen „Übertrag“ verarbeiten. Das ist unabhängig davon, ob man im Dezimalsystem, im Binärsystem oder in Hexadezimalsystem rechnet.

Schon die ersten Rechenmaschinen aus dem 17. Jahrhundert, die mit rotierenden Zahlenscheiben arbeiteten, brauchten eine besondere Vorkehrung um den Übertrag an die nächste Scheibe weiterzureichen. Eine besondere Schwierigkeit besteht in Situationen, wo ein Übertrag in einer Stelle, auch in der nächsten Stelle wieder einen Übertrag erzeugt. Nehmen wir z.B. die Addition 999999 + 1. Muss der Automat sich für diese Aufgabe mit den Überträgen von Stelle zu Stelle durchhangeln, oder kann er das in einem einzelnen Arbeitstakt bewerkstelligen?

Auch Howard Aiken und Konrad Zuse standen in der Mitte des letzten Jahrhunderts vor diesem Problem, als sie die ersten Computer konstruierten.

Der dargestellte Schaltplan geht auf Aiken zurück und ist dem Kapitel „Zuse, Aiken und der einschrittige Übertrag“ des Buches „Historische Notizen zur Informatik“ von Friedrich L. Bauer (ISBN: 978-3-540-85789-1) entnommen. Wir sehen die Addierschaltung für eine einzelne Stelle im Binärsystem. Es werden zwei Binärzahlen a und b addiert, die hier durch zwei Schaltergruppen a und b über Relais gesteuert werden. Die Relais sind auf der rechten Seite dargestellt. Am Anfang erhalten sie das Signal 0. Durch klicken auf die 0 wird zum Wert 1 umgeschaltet. Dann zieht das entsprechende Relais an. Außerdem kommt von rechts der Übertrag von der vorhergehenden Stelle des Binärsystems. Der Übertrag erfolgt in zwei Leitungen: Die untere ist genau dann stromführend, wenn ein Übertrag ankommt, und die obere genau dann, wenn kein Übertrag ankommt. Mit dem Schalter U kann man im Bild den Übertrag ein- und ausschalten. Dieser Schalter gehört nicht wirklich zu der Schaltung, die wir darstellen wollen. Er ist gewissermaßen ein Ersatz für die entsprechende (gleiche) Addierschaltung der vorhergehende Binärstelle. Unten links wird der Übertrag, der in der fokussierten Binärstelle berechnet wird, an die nächst höhere Stelle weitergeben. Durch klicken auf die beiden Eingänge für a und b und auf dem Schalter U kann man 8 verschiedenen Stellungen der Schaltung durchspielen. In der Mitte sieht man das Ergebnis der Summenberechnung für diese einzelne Binärstelle: Am Anfang ist es natürlich die 0.

Zuse verwendet in der Z3 eine Schaltung, die in jeder Stelle noch zwei weitere Relais benötigt.

[iframe src=“https://www.uni-due.de/zim/burkhard.wald/svg2014/z3.svg“]

Die Berechnung erfolgt in drei Schritten. Man beachte aber, dass auch hier wie bei Aiken, die Weitergabe des Übertrages nicht ein schrittweises Übertragen von Stelle zu Stelle ist. Nehmen wir eine Addition 1111 + 1 = 10000. Dann ergibt die xor-Verbindung von a und b in den ersten 4 Stellen jeweils den Relaisstand x=1. Kommt dann von rechts der Übertrag hinzu, wird er gleichzeitig an alle Stellen weitergeben und nicht Schritt für Schritt.

An einem Gymnasium in der Schweiz ist in einer Projektarbeit eine HTML-basierte Animation entstanden, die das Zusammenspiel mehrere Binärstellen darstellt. Siehe hier. Die Animation zeigt den „Stromfluss“ in Zeitlupe. In Wirklichkeit passiert das aber in Lichtgeschwindigkeit. Einen relevanten „Zeitverbrauch“ in der Schaltung hat man stattdessen durch die Trägheit der Relais. Das sollte man im Hinterkopf haben, wenn man diese und auch meine Schaltungen betrachtet.

Später kommt Zuse zu einer Schaltung mit Dioden. Das oben zitierte Buch stellt zwei Varianten gegenüber. In der ersten Publikation der Schaltung hatte sich offenbar ein Fehler eingeschlichen, welcher sich über mehrere Auflagen gehalten hatte. Das Informatik-Buch stellt die „richtige“ Schaltung daneben. Dummerweise ist auch diese Variante falsch.

Ich präsentiere eine 3. Variante, mit erneutem Anspruch auf Richtigkeit.

[iframe src=“https://www.uni-due.de/zim/burkhard.wald/svg2014/zuse3.svg“]

Kommen wir jetzt zu der Frage, wie die Bilder technisch realisiert wurden. Es lag nahe, für die Darstellung der Schaltpläne das XML-Format SVG für Vektorgrafik zu wählen. SVG wird heute von den aktuellen Versionen der Web-Browser unterstützt, sodass man kein besonderes Programm oder Plug-In zum Betrachten installieren muss. Die Browser verarbeiten die SVG-Datei in einer ähnlichen Weise, wie sie auch HTML-Dateien verarbeiten. Daher hat man hier die gleichen Möglichkeiten, mit Hilfe von Javascript als Programmiersprache Dynamik in ein Bild zu bringen. Das bedeutet:

Diese Möglichkeiten wollte ich nutzen, um zwei Ziele zu verfolgen:

Die Sache mit dem Strom schien zunächst nicht so schwierig zu sein. Was ist aber, wenn durch das Schalten eines Schalters ein Kontakt wieder gelöst wird? Dann müsste man die Stromübertragung zum Teil rückgängig machen. Man müsste also wissen, welches Objekt welchen anderen Objekten Strom übergeben hat; also eine Art Übertragungsrichtung. Ist das aber das richtige Konzept? Man kann sich Schaltungen vorstellen, die nach und nach den Strom auf weitere Objekte übertragen und dann schließlich auf ein Objekt stoßen, das schon über einem anderen Weg Strom bekommen hat. Wenn man jetzt etwas unterbricht, wie will man da noch eine Verlässlichkeit haben, welche Objekte wirklich vom Strom abgetrennt werden müssen und welche stromführend bleiben. Mein Fazit war „Strom übertragen“ geht gut, aber für „kein Strom“ kann man kein funktionierendes Übertragungskonzept ersinnen.

Um zu einer Lösung zu kommen, muss man sich einmal in richtigen Strom hineindenken. Die Weitergabe von Strom über einen leitenden Kontakt ist nicht ein einmaliges Event, sondern ein permanenter Vorgang. „Unterbrechen“ bedeutet daher nicht, dass eine Unterbrechung weitergeleitet werden muss, sondern dass die vorhandene Weiterleitung unterbrochen wird. Um dass zu erreichen habe ich mich entschieden, bei jeder Änderung in der Konstellation der Objekte (oder Schalterstellungen) erst einmal alles grundsätzlich wieder auf „aus“ zu setzen und jedes mal den Strom von den Stromquellen aus über die gegebenen Kontakte neu zu übertragen.

Es ist ein Datei mit Javascript-Code entstanden, die man in eine SVG-Datei einbinden kann. Hier ein kleines Beispiel für so eine SVG-Datei.

<?xml version=“1.0″ encoding=“UTF-8″?>
<svg version=“1.2″
baseProfile=“tiny“
viewBox=“0 0 20 4″
preserveAspectRatio=“xMidYMid“
fill-rule=“evenodd“ stroke-width=“0.05″
stroke-linejoin=“round“
xmlns=“http://www.w3.org/2000/svg“
xmlns:xlink=“http://www.w3.org/1999/xlink“
xml:space=“preserve“ onload=“init()“
>

<g visibility=“visible“ id=“Main“> </g>

<script type=“text/ecmascript“ xlink:href=“dynamische_schaltkreise.js“> </script>

<script type=“text/ecmascript“>
<![CDATA[

function init() {
var SP = new schaltplan(„Main“);
new quelle(SP,’W‘,3,3);
new schalter(SP,“a“,’O‘,“L“,3,3);
new verbindung(SP,“O“,5,2,6);
new verbindung(SP,“O“,5,4,6);
new schalter(SP,“b“,’W‘,“L“,13,3);
new dyn_text(SP,“O“,13,2,0,“0″,“1″);
SP.restart(); }
]]>
</script>

</svg>

Mit onload=“init()“ wird erreicht, dass als erstes nach dem Laden der SVG-Datei die Funktion init aufgerufen wird, in der wir den zu zeichnenden Schaltplan definieren müssen. Vorher haben wir einen leeren SVG-Gruppen-Knoten definiert, dessen Id „Main“ wir der schaltplan-Funktion übergeben. Hier ist das Beispiel im Bild. Es stellt eine einfache Wechselschaltung da, wie wir sie Zuhause in Diele, Keller oder Wohnzimmer haben. Logisch interpretiert ist es eine XOR-Schaltung.

[iframe src=“https://www.uni-due.de/zim/burkhard.wald/svg2014/wechsel.svg“]

Zum Weiterlesen empfehle ich den Programm-Code in der Javascript-Datei. Da ich damit rechnen muss, dass sich das einer anschaut, habe ich es mehrfach überarbeitet und glattgezogen und mit ausführlichen Erläuterungen versehen. Es ist eine „spannende“ Geschichte, in der es um Kommunikation und Vernetzung geht – wie aus dem prallen Leben. Der Programmierer und Blogger ist zufrieden und denkt sich: „Alles geschieht nach meinem Plan“. Im folgenden Bild sieht man ihn zusammen mit seinem Seelenverwandten Konrad Zuse.


(In Hünfeld, wo Zuse zuletzt gewohnt hat)

Weitere Anmerkungen

Instabile Schaltungen

Warum gibt es in der Natur Geräusche? Das ist gewissermaßen die Art der Natur mit instabilen Situationen klarzukommen: Die Natur macht daraus eine Schwingung. Ein einfaches Beispiel ist eine elektrische Klingel. Ein Magnet wird über einen Kontakt angesteuert. Zieht der Magnet an, wird die Stromzufuhr unterbrochen. Dann fällt der Magnet ab und der Stromkreis wird wieder geschlossen. In unserem Programm würde das zu einer Endlos-Schleife führen, mit der der Web-Browser als Interpreter des Programms nicht zurecht kommt.

Hazzards

Eine gewisse Unzuverlässigkeit von elektrischen Schaltungen ist in unserem Model ausgeklammert. Ein realer Schalter hat in der Phase des Umschaltens von 1 verbunden mit 2 zu 1 verbunden mit 3 eine kleine Übergangssituation, in der weder 1 mit 2 noch 1 mit 3 verbunden ist, oder in der gleichzeitig 1 mit 2 und 1 mit 3 verbunden ist. Man nennt das Hazzard oder Glitch. Hier sind zwei Schaltungen die prinzipiell gleich funktionieren. Man klicke vier mal auf den Schalter a: Dann nimmt die Schaltung vier verschiedene Konstellationen an. Die erste der Schaltungen hat aber die Eventualität in der Praxis nicht zu funktionieren. Beim zweiten Klick auf a könnte das Relais ungewollt abfallen. In der darauf folgenden Schaltung wird diese Unsicherheit überbrückt.

[iframe src=“https://www.uni-due.de/zim/burkhard.wald/svg2014/viertakter1.svg“ frameborder=“0″ scrolling=“no“]

[iframe src=“https://www.uni-due.de/zim/burkhard.wald/svg2014/viertakter2.svg“ frameborder=“0″ scrolling=“no“]

SVG in HTML einbetten

Zuletzt musste ich noch lernen meine SVG-Ergüsse in eine HTML-Dateien einzubetten. Bei den ersten Versuchen hat es problemlos geklappt, wenn ich einfach das <img>-Tag nahm, mit dem man auch Bitmap-Dateien einbindet. Doch da hatte ich noch keine Javascript-Dynamik in meinen Beispielen. Die Dynamik geht bei so eingebetteten Dateien leider verloren. Da die Inhalte unserer SVG-Dateien dynamisch mit einem Skript erzeugt werden, blieb ihre Darstellung folglich leer.

Die Lösung ist das <object>-Tag. Damit bindet man Medienobjekte ein, mit denen dann der Browser interagieren kann. Alternativ kann man auch das <iframe>-Tag verwenden. Für diesen WordPress-Blog hat sich das IFRAME als die praktikablere Lösung erwiesen. Das liegt aber daran, dass WordPress den HTML-Code nochmal filtert und verändert, um sein eigenes Konzept zu realisieren.

Lokalgeschichte

Auch an der Uni-Essen gab es einmal eine Zuse: eine Z25. Das war in vieler Hinsicht schon ein modernes Gerät auf der Basis von Transistorschaltungen. Sie konnte mit einem spezifischen Maschinencode aber auch schon mit der höheren Programmiersprache Algol programmiert werden. Als ich 1988 zum Rechenzentrum kam, Stand die Z25 ungenutzt im Rechnerraum an der Schützenbahn. Ich habe etwas recherchiert und mit pensionierten Kollegen gesprochen. Die Maschine wurde 1967 von der Abteilung Vermessungswesen der Ingenieurschule für Bauwesen mit Sondermitteln des Landes beschafft. Mit der Gründung der Gesamthochschule 1972 wurde die Fachhochschule in die Universität Essen integriert. Der Computer kam in die Henry-Dunant-Straße und wurde noch bis zum Ende der 70-er Jahre für die Programmierausbildung eingesetzt. Die immer noch funktionsfähige Maschine steht jetzt im Rechenmuseum Arithmeum der Universität Bonn und kommt bei Vorführungen zum Einsatz.

Beitrag veröffentlicht

in

, ,

von

Burkhard Wald

Schlagwörter:

, , , , ,