10.5.3 Projekt: Schneckenausflug

Es gibt ein Problem:

Für unser Programmierprojekt würde das bedeuten, dass eine eigene Bild-Datei nur dann von unserem PC in das p5js-Blockly-Programm geladen werden kann, wenn wir einen Button in das Programm einbauen und mit Hilfe des Lade-Dialogs das Bild laden. Das ist mühsam und unpraktisch, vorallem wenn mehr als ein Bild in einem Programm verwendet werden soll.

Ja, das wäre möglich! Aber, wenn jeder Dateien auf unseren Server laden darf, dann könnte die ganze Welt ungefragt Dateien hochladen. Bald würden Hacker-Seiten auf dem Server liegen und man wäre indirekt verantwortlich für Hacker-Angriffe in der ganzen Welt.

Aus diesem Grund muss man sich auf Programmier-Seiten ein eigenes Konto anlegen und anmelden, wenn man eigene Dateien hochladen möchte. Zum Beispiel muss man auf der Seite https://editor.p5js.org/ ein Konto anlegen und kann dann dort seine Projekte zusammen mit eigenen Bilddateien in der Cloud speichern und verwenden.

Es gibt jedoch die Möglichkeit ein Bild in ein eigenes Programm zu laden, ohne dass man aufwendig die Möglichkeit schaffen muss, ein Konto auf einem Server anzulegen.

Das Maskottchen für das Linux-Betriebssystem ist der Pinguin Tux. Das folgende Bild ist eine png-Grafikdatei, mit welcher Tux angezeigt werden kann.

Mit der Anweisung 'bincat tux.png' kann man sich in ptuX das Bild im Binär-Code anzeigen lassen:

Das sind ganz schön viele 1en und 0en. Diese Binärfolge könnte man als Text in ein eigenes Programm einfügen und als Bild anzeigen lassen, ohne dass man eine Datei laden müsste.

Diese Idee wird so ähnlich tatsächlich umgesetzt!

Mit einem Trick kann die Menge an benötigten Zeichen deutlich verkleinert werden. Mit der 8-Bit-ASCII-Codierung kann einer Folge von 8 Bits ein Zeichen zugeordnet werden. Damit könnte man jeweils 8-Bit als ein einziges Zeichen ausgeben. Wenn man das für alle Bits des Bildes macht, hätte man nur ein Achtel so viele Zeichen wie im Binärcode.

Es gibt im ASCII-Code viele Sonderzeichen. Diese für die Codierung zu verwenden ist problematisch. Daher hat man eine Code-Tabelle mit nur einer begrenzten Anzahl von einfachen Zeichen entwickelt: die 6-Bit Base64-Codierung.

Das Padding-Zeichen '=' wird verwendet um den Code aufzufüllen, falls die Anzahl an 1en und 0en nicht zu den Regeln der Codierung passt: Base64-Codierung.

Die Bit-Folge für ein Bild kann in eine Base64-Codierung umgewandelt und die Base64-Zeichenfolge in ein Programm eingefügt werden. Das Programm kann so ein Bild darstellen, ohne dass eine externe Bild-Datei geladen werden muss.

Für die Encodierung eines Bilds in die Base64-Codierung gibt es viele Online-Tools.

Ein Beispiel für eine vertrauenswürdige Seite ist folgende: https://www.base64-image.de/

Analyse:

• Die Seite ist nicht werbeverseucht.
• Für diese Seite gibt es eine Datenschutzerklärung.
• Es ist ein Impressum vorhanden.
• Die Analyse der Seite in den Entwickler-Tools (Taste F12 - Sources) zeigt, dass außer den verwendeten Schriftarten (fonts.googleapis.com, fonts.gstatic.com) keine Dateien von fremden Servern geladen werden.

Codierung der Schnecken-Grafik

Wir nutzen hier einen eigenen Base64-Encoder.

• Lade folgende Grafik-Datei auf deinen Computer, indem du mit der rechten Maustaste auf die Grafik klickst und dann 'Bild speichern unter...' anklickst. (Der genaue Wortlaut kann sich von Browser zu Browser unterscheiden).

• Lade die Datei schnecke.png ins folgende Tool, indem du auf "Bild-Datei auswählen ..." klickst.
• Kopiere den Base64-Code in den Arbeitsspeicher (Strg-A = alles markieren, Strg-C = in den Arbeitsspeicher kopieren).

• Öffne den p5.js-Blockly-Editor, indem du auf folgenden Link klickst: Editor öffnen.

• Stelle folgendes Programm zusammen und klicke dann auf 'Code ausführen'.

  • Den Block 'preload()' findest du in der Kategorie 'p5-Funktionen'.
  • Die Bild-Blöcke findest du in der Kategorie 'Grundformen'.

Im Block 'preload()' werden die Bilder geladen. Das Programm läuft erst weiter, wenn ein Bild erfolgreich geladen wurde. Kann es ein Bild nicht erfolgreich laden, bleibt das Programm stehen. Da der Text 'base64' kein Bild darstellt, bleibt das Programm stehen.

• Lösche den Text 'base64' im Bild-Block.
• Füge den Base64-Code für das Bild 'schnecke.png', den du im Base64-Encoder erzeugt hast, anstelle des Textes 'base64' hinter 'Bild im Base64-Format' ein und drücke dann die Enter-Taste.
• Klicke auf 'Code ausführen'. Du solltest folgendes sehen:

Falls etwas nicht geklappt hat, kannst du folgende Datei herunterladen: schnecke01.p5xml und dann im p5js-Blockly-Editor laden.

Das Bild kann in seiner Größe skaliert werden und auch die Bildposition kann angepasst werden.

• Baue das Programm dazu wie folgt um:
  • Die benötigten Blöcke findest du in der Kategorie 'p5-Helfer'.