Inspiration
Als Einleitung in die Thematik der Geheimschriften und alternativen Schriftsysteme beschäftigte sich jede Person zunächst mit einem spezifischen Thema, das ausgearbeitet und anschließend dem Kurs präsentiert wurde.
Ich (Julian) setzte mich dabei mit dem Verschlüsselungssystem von **Giovanni Battista Porta** auseinander. Dabei handelt es sich um ein polyalphabetisches Substitutionsverfahren. Vereinfacht bedeutet das, dass jeder Buchstabe unseres lateinischen Alphabets durch einen anderen Buchstaben oder ein anderes Zeichen ersetzt wird, das zuvor fest zugeordnet wurde. So entsteht eine kryptische Nachricht, die nur mithilfe eines Lösungswortes und einer Zuordnungstabelle wieder entschlüsselt werden kann.
Die Porta-Scheibe ist ein haptisches Ver- und Entschlüsselungswerkzeug. Anders als bei der klassischen Verschlüsselung nach Porta werden dabei Buchstaben durch Symbole anstatt durch andere Buchstaben ersetzt.
Die intensive Auseinandersetzung mit diesem Verschlüsselungssystem brachte mich schließlich auf die Idee für dieses Projekt. Da ich schon immer eine große Begeisterung für kryptische Symbole, Formen und Zeichen hatte, wusste ich schnell, dass ich ein ähnliches Verschlüsselungssystem entwickeln möchte.
->hier zu sehen ist die Porta-Scheibe, eine Zuordnungstabelle, der Symbole und Buchstaben, sowie eine kleine Ansammlung an Symbolen und Schriftsystemen, welche unter anderem als Inspiration dienten.
Idee
Anstatt mir willkürliche Zeichen oder Symbole zu überlegen, die Buchstaben ersetzen, kam ich auf die Idee, das Material der Buchstaben selbst als Grundlage für ein neues Symbol zu verwenden.
Betrachtet man eine einfache Monospace-Fonts, lassen sich die Buchstaben in logische Bausteine zerlegen. Es entstehen unterschiedlich große Geraden und Bögen, die sich als Ausgangsformen für neue Schriftzeichen eignen. Die einfachen geometrischen Formen einer solchen Font vereinfachen dabei den Aufbau der neuen Symbolsprache.
Statt aus jedem einzelnen Buchstaben ein neues Zeichen zu entwickeln, sollte jedes Wort zu einem einzigen Symbol werden. Jeder Buchstabe wird dazu in Fragmente zerlegt, die anschließend zu einem neuen, zusammenhängenden Schriftzeichen rekonstruiert werden. Für diesen Ansatz war schnell klar, dass die gesamte Konstruktion vektorbasiert erfolgen muss.
Damit nicht bei jeder Verschlüsselung identische Zeichen entstehen, sollte jedes generierte Symbol anschließend individuell verändert werden können. Ähnlich wie bei Variable Fonts.
Ebenso wichtig war mir, die Kommunikation nicht ausschließlich digital stattfinden zu lassen. Die verschlüsselten Schriftzeichen sollen deshalb auf einen Bonstreifen gedruckt und physisch weitergegeben werden – inspiriert von den Briefchen, die früher heimlich im Unterricht weitergereicht wurden.
Damit die Nachricht anschließend wieder gelesen werden kann, enthält jeder Ausdruck einen QR- oder Barcode sowie einen Link zu einem Webentschlüsselungstool, über das sich die ursprüngliche Nachricht wieder sichtbar machen lässt.
Konzept
Das Projekt besteht aus mehreren aufeinander aufbauenden Bestandteilen, die zusammen ein vollständiges Verschlüsselungssystem bilden.
Ausgangspunkt ist eine Texteingabe, in die ein beliebiger Satz eingegeben werden kann. Jedes einzelne Wort wird anschließend vom Generator in ein neues, zusammenhängendes Schriftzeichen übersetzt. Die Grundlage dafür bilden die Fragmente der Buchstaben, aus denen das jeweilige Wort besteht.
Da die automatisch erzeugten Schriftzeichen nur als Ausgangspunkt dienen sollen, folgt anschließend ein Editor. Hier können die generierten Symbole individuell verändert und an die eigenen Vorstellungen angepasst werden. Dadurch entsteht bei jeder Verschlüsselung ein einzigartiges Ergebnis.
Nach der Bearbeitung werden alle Schriftzeichen vertikal untereinander angeordnet und auf einen Bonstreifen gedruckt. Neben den verschlüsselten Symbolen enthält der Ausdruck zusätzlich einen Barcode, sowie einen Link zum Webentschlüsselungstool.
Die verschlüsselte Nachricht kann anschließend physisch an eine andere Person weitergegeben werden. Mithilfe des Smartphones lässt sich der Barcode scannen, wodurch die ursprüngliche Nachricht im Webentschlüsselungstool wieder sichtbar wird.
Das Projekt verbindet dadurch digitale Generierung, individuelle Gestaltung und physische Kommunikation zu einem gemeinsamen Verschlüsselungssystem.
Prozess
Anfänglich arbeitete ich (Julian) an dem Projekt alleine. Obwohl sich die Idee und das Konzept bereits relativ früh entwickelt hatten, dauerte es lange, bis ich überhaupt mit dem Schreiben des Codes begann. Stattdessen beschäftigte ich mich intensiv mit der Recherche zum Aufbau, zur Struktur und zum Aussehen von Symbolen, Zeichen und verschiedenen Schriftsystemen. Diese Recherche bildete später die Grundlage für den Generator, der die neuen Symbole kreiert.
Bei der Umsetzung des Regelwerks, das grundlegend für den Generator ist, musste ich jedoch feststellen, dass ich mich zunehmend darin verrannt hatte. Die Umsetzung wurde immer komplexer und entfernte sich von dem, was ich eigentlich erreichen wollte. Deshalb setzte ich den bisherigen Stand auf Null und begann von vorne.
Zu diesem Zeitpunkt entschieden Jakob und ich, aus dem Projekt eine gemeinsame Arbeit zu machen. Diese Unterstützung kam mir besonders gelegen, da ich mich bis dahin nur wenig mit der Umsetzung der Entschlüsselung beschäftigt hatte. Da das Semester zu diesem Zeitpunkt bereits fortgeschritten war, teilten wir die weitere Umsetzung des Projekts nach unseren jeweiligen Stärken und Vorlieben untereinander auf.
Dadurch entstand eine Aufteilung der Aufgaben, bei der wir die einzelnen Bereiche des Projekts unabhängig voneinander weiterentwickeln und anschließend wieder zu einem gemeinsamen System zusammenführen konnten.
Umsetzung
Gesamtstruktur
Die hier dargestellte Struktur zeigt die einzelnen Phasen unseres Projekts. Diese wurden nicht nur während der Entwicklung und Umsetzung in dieser Reihenfolge durchlaufen, sondern stellen gleichzeitig den Ablauf/ die Navigation dar, welche/n man bei der Nutzung unseres Tools durchläuft.
Die Farbe „Grün“ steht für einzelne Screens beziehungsweise für die jeweiligen Phasen des Projekts. „Blau“ hinterlegte Elemente stellen codierte Aktionen dar, die zwischen den einzelnen Screens ausgeführt werden, aber nicht visuell dargestellt sind. Dazu gehören beispielsweise der Generator und die Erstellung des Barcodes.
„Dunkelgrau“ kennzeichnet Aktionen, die auf den einzelnen Screens und später auch in physischer Form ausgeführt werden können oder müssen, um das Projekt abzuschließen.
„Hellgrau“ steht für die einzelnen Features und Bearbeitungsmöglichkeiten, die innerhalb der Screens zur Verfügung stehen und teilweise auch in der späteren physischen Umsetzung eine Rolle spielen.
Generator
Der Generator hat die Aufgabe aus den Buchstaben eines Wortes Fragmente zu erstellen, die dann alle zusammen zu einem neuen Schriftsymbol umstrukturiert und konstruiert werden. Es wird ausschließlich mit SVGs gearbeitet. Herzstück des Generators ist ein Regelwerk. Als Ausgangspunkt für dieses Regelwerk wurde eine Studie zu den verschiedensten Schriftsymbolen, Logos und Zeichen durchgeführt um Gemeinsamkeiten zu finden, aus denen sich tatsächliche Regeln ableiten ließen. Diese habe Ich dann Strukturiert und das Regelwerk konstruiert.
Um weniger dem Zufall zu überlassen bzw. dem gerodeten Generator, habe ich selbständig festgelegt welche Fragmente sich aus den einzelnen Buchstaben ergeben und legte ein Archiv an in dem der einzelne Buchstabe und die jeweiligen Fragmente jeweils als eine eigene SVG- Datei abgespeichert sind. So konnte der generator auf das Material zugreifen, ohne dass sich Fehler in der Fragmentierucg ergaben. Da diese Fragmente die Grundlage für die neuen Schriftsymbole sind, musste die Basis klar und ohne Fehler sein.
Auf dem folgenden Schaubild ist die Struktur des Generators dargestellt, die einzelnen Schritte die Nacheinander ausgeführt werden, sowie die Kontrollpunkte, an welchen überprüft wird ob alle aufgestellten regeln eingehalten wurden. Falls dem nicht so war, wurde das Symbol neu angeordnet. zeil des Generators war es eine zusammenhängende SVG datei zu liefern, die im Editor, dem Nächsten Schritt weiterverarbeitet werden konnte.
Ich habe ebenfalls das Regelwerk als PDF hochgeladen, für alle die es interessiert.
Editor
Der Editor ermöglicht es, die vom Generator erstellten Schriftzeichen weiter zu bearbeiten. Uns war wichtig, dass jede Geheimbotschaft individuell auf ihre Ersteller:in oder ihre Empfänger:in zugeschnitten werden kann. Dadurch bekommt die Verschlüsselung auch auf gestalterischer und ästhetischer Ebene eine persönliche Note.
Bei der Auswahl der veränderbaren Variablen orientierten wir uns an den grundlegenden Möglichkeiten der Vektorbearbeitung. Ohne sich zu verkomplizieren, sollten die Bearbeitungswerkzeuge so gewählt sein, dass sie viele verschiedene Resultate hervorbringen können.
Zu den Variablen gehören die Entscheidung zwischen einer Fill-In- oder Outline-Darstellung, die Veränderung der Strichstärke (Stroke), das Verschieben von Vektorpunkten auf der horizontalen oder vertikalen Achse, das Abrunden der Kanten sowie die Veränderung der Größe. Dadurch kann ein und dasselbe generierte Zeichen auf unterschiedliche Weise weiterentwickelt werden.
Barcode
Die Arbeitsteilung der verschiedenen Code-Komponenten unseres Projekts bestand darin, dass Julian zunächst an dem Generator arbeitete und Jakob an einer Lösung für eine Entschlüsselung der Erstellten Nachrichten recherchierte. Anfangs kam die Idee, sich an QR-Codes zu orientieren, um auf den integrierten QR-Code Scanner von Smartphones zurückzugreifen. Da QR-Codes aber sehr klar als solche erkennbar sind und somit eine geheime Übermittlung von Nachrichten nicht mehr möglich ist, erschien ein klassischer Barcode, welchen man von herkömmlichen Kassenbons kennt, als bessere Lösung. Diese sind allerdings nicht direkt über die Kamera App scanbar, dazu später mehr.
Bei der Erstellung einer Nachricht mit dem Generator wird zeitgleich eine individuelle 4-stellige Nummer zugeordnet, welche beim Ausdrucken als zusätzlicher kleiner Zettel mit herauskommt. Praktisch ist hier die integrierte „partial cut“ Funktion des Bondruckers, welche mehrere Ausdrucke hintereinander möglich macht und die Ausdrucke an einer Ecke nicht ganz vollständig abschneidet. Also haben wir uns dazu entschieden, die verschlüsselte Nachricht zu drucken, gefolgt von dem Barcode mit einigen Zusatzinformationen wie Uhrzeit, Link zum Entschlüsselungstool, etc. Dieser zweite Ausdruck ist getarnt als kleiner Kassenbon. Der Barcode speichert lediglich die 4-stellige Nummer der erstellten Nachricht und nicht den Inhalt der Nachricht an sich.
Datenverarbeitung & Scanner
Sobald eine Nachricht ausgedruckt wurde, wird Nummer, Text und Grafik automatisch in einer Cloud gespeichert. Wir haben dafür supabase verwendet. Das ESC-PR Vector Encryption Terminal läuft lokal auf dem PC, lediglich die Cloud ist angebunden. Anders hingegen verhält es sich mit dem ESC-PR Vector Decryption Client, dem mobilen Entschlüsselungstool. Dieses muss vom Handy aus erreichbar sein, da auf die Kamera zum Entschlüsseln zugegriffen wird. Das Hosting erfolgt über GitHub-Pages. Das Tool hat lediglich zwei Funktionen: Barcode Scanner und Feed-Anzeige aller bisher erstellten Nachrichten.
Beim Öffnen wird direkt zu Beginn nach Erlaubnis zur Benutzung der Kamera gefragt, da dies die Kernfunktion der mobilen Seite ist. Der Barcode Scanner sucht nach Barcodes, welche 4-stellige Zahlen enthalten und diese werden mit der Tabelle in supabase abgeglichen. Gibt es einen Treffer, wird sowohl die zugehörige Nachricht als Klartext, als auch die Vektorgrafik geladen und angezeigt.
Zusammenführen aller Elemente
Die Gestaltung der Oberfläche des Terminals erfolgte gemeinsam. Nachdem wir einige Referenzen recherchierten und uns auf einen passenden grafischen Stil geeinigt haben, haben wir in Figma alle Screens vollständig erstellt. Anschließend hat Jakob diese komponentenbasiert umgesetzt, sodass wir auch nachträglich noch schnell Änderungen vornehmen konnten, weil zum Beispiel noch nicht ganz klar war, welche Farbe und Fonts verwendet werden sollen.
Vor dem Zusammenführen hatten wir drei Datenpakete:
- UI des Terminals und mobiler Seite
- Generator/Editor
- Barcode System
Diese wurden mit entsprechenden Markdown Dateien vorbereitet, um miteinander zu einer finalen Datei verbunden zu werden.
Fazit
Julian
Die größte Schwierigkeit für mich lag in der Ausformulierung des Regelwerks für den Generator. Ich hatte zwar eine klare Vorstellung davon, wie die Schriftzeichen grundsätzlich aussehen sollten, versuchte aber zunächst, zu viele Zusammenhänge zwischen den einzelnen Komponenten des Generators und dem Formvokabular abstrakt zu definieren. Dadurch wurde das Regelwerk immer komplexer und entfernte sich zunehmend von der eigentlichen Gestaltung der Zeichen.
Rückblickend wäre es sinnvoller gewesen, von Anfang an mit konkreten, selbst gestalteten Symbolen zu arbeiten, diese zu analysieren und daraus die Regeln abzuleiten. Das hätte mir viel Arbeitszeit und einige frustrierende Umwege erspart.
Auch das Programmieren selbst stellte eine Herausforderung dar. Obwohl Coding für mich nicht völlig neu war, fehlte mir die Erfahrung, ein solches System von Grund auf zu entwickeln. Diese Erfahrung wuchs zwar während des Projekts, verlangsamte die Umsetzung aber deutlich. Gleichzeitig habe ich dadurch viel über die Entwicklung solcher Systeme gelernt und die anfängliche Hürde, mit Code zu arbeiten, deutlich überwunden.
Jakob
Da ich erst sehr spät im Projekt dazugekommen bin, stand der Rahmen des Projekts bereits und ich wusste, wo genau ich unterstützen konnte. Daher waren meine Aufgaben relativ konkret. Die Recherche zu scanbaren Codes war interessant und die Verbindung von Drucker, Backend und UI Design hat enorm viel Spaß gemacht.
Ausblick
Wir können definitiv behaupten, dass wir mit dem, was unser Vector Encryption Tool geworden ist, zufrieden sind. Die jetzige Version ist allerdings auf die Nutzung mit einem Thermodrucker und einen dafür ausgelegten Arbeitsplatz konzipiert, weshalb es bisher noch nicht möglich ist, das Tool vollständig online zur Verfügung zu stellen.
Für eine zukünftige Weiterentwicklung würden wir uns noch intensiver mit anderen Möglichkeiten für den Editor beschäftigen und einige Komponenten des Systems verändern oder erweitern. Wir sehen beide großes Potenzial darin, das Projekt über den aktuellen Stand hinaus weiterzuentwickeln und daraus ein kleines, frei zugängliches Tool zu machen, das online von allen genutzt werden kann.
Video
