{"id":695,"date":"2021-12-28T13:26:25","date_gmt":"2021-12-28T13:26:25","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=695"},"modified":"2024-06-24T17:33:33","modified_gmt":"2024-06-24T17:33:33","slug":"liniengrafiken-aus-fotos-als-vektorfelder","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/liniengrafiken-aus-fotos-als-vektorfelder\/","title":{"rendered":"Liniengrafiken aus Fotos als Vektorfelder"},"content":{"rendered":"

Verschiebt man Punkte entlang eines Vektorfeldes entstehen h\u00e4ufig interessante Muster, wie sie beispielsweise von Magnetlinien bekannt sind. Die Programmierung interessanter Vektorfelder ist aber nicht ganz einfach. Da liegt es nahe, Bilder als Quelle f\u00fcr solche Vektorfelder zu verwenden. Fotos eignen sich daf\u00fcr besonders gut, weil die Farbinformation der einzelnen Fotopixel auf mehrere verschiedene Arten ausgewertet werden k\u00f6nnen.<\/p>\n

Die aus den Vektorfeldern resultierenden Linienmuster werden dabei mit Snap! erzeugt.<\/p>\n

Grundlagen<\/h2>\n

In Snap! k\u00f6nnen Fotos importiert werden, indem sie einfach auf die Programmieroberfl\u00e4che gezogen werden. Anschliessend kann dieses Foto einem Sprite mit den folgenden Befehlen zugeordnet werden.<\/p>\n

\"\"
Ein bereits in Snap! importiertes Foto kann \u00fcber den entsprechenden Block als Kost\u00fcm verwendet werden.<\/figcaption><\/figure>\n

Der stretch-Block sorgt daf\u00fcr, dass das Foto die ganze B\u00fchnenoberfl\u00e4che (stage) komplett ausf\u00fcllt.<\/p>\n

Nun kann die Eigenschaft einzelner Pixel im geladenen Foto mit folgendem Programm \u00fcberpr\u00fcft werden.<\/p>\n

\"\"
Das Programm fragt den Farbwert eines einzelnen Pixels im gegebenen Foto ab.<\/figcaption><\/figure>\n

Sobald im Programm die Taste t (f\u00fcr Testen) gedr\u00fcckt wird, bewegt sich das Objekt (sprite) zur aktuellen Mausposition, liest dort den Farbwert (hue) des an der Mausposition befindlichen Pixels aus und zeigt diesen an. Die weiteren Bl\u00f6cke im Programm werden f\u00fcr das Zusammenspiel mit den anderen Programmteilen ben\u00f6tigt.<\/p>\n

\"\"
Das Objekt zeigt in die Richtung des gemessenen Farbwerts und gibt diesen aus.<\/figcaption><\/figure>\n

Weil die hue-Farbwerte von 0 bis 100 reichen, wird der Messwert noch mit 3.6 multipliziert, damit als Richtung die vollen 360\u00b0 erreicht werden k\u00f6nnen.<\/p>\n

Wenn sich das Objekt nun in Richtung des gemessenen Werts bewegt, anschliessend eine neue Richtungsbestimmung vornimmt und diesen Vorgang beliebig viele Male wiederholt, entsteht eine Spur auf dem Bild.<\/p>\n

\"\"
Auf dem Hintergrund sind bereits mehrere zur\u00fcckgelegte Spuren zu sehen.<\/figcaption><\/figure>\n

Damit diese M\u00f6glichkeit interaktiv ausprobiert werden kann, ist folgende Programmierung notwendig.<\/p>\n

\"\"
Das Objekt (sprite) kann mit der Maus positioniert werden. Sobald die Maustaste nicht mehr gedr\u00fcckt wird, zeichnet das Programm eine Spur auf das Foto.<\/figcaption><\/figure>\n

Die bisher von Hand gew\u00e4hlte Positionierung wird nun per Programm vielfach durchgef\u00fchrt.<\/p>\n

Einfache Linienmuster<\/h2>\n

Das folgende Programm sorgt zuerst daf\u00fcr, dass einige Umgebungsvariablen richtig gesetzt sind und f\u00fchrt dann die oben beschriebenen Schritte innerhalb des warp-Blockes (dient der beschleunigten Bildschirmausgabe) mehrfach aus.<\/p>\n

\"\"
Ausgehend von Zufallspunkten werden Linien gezeichnet, welche dem Vektorfeld folgen.<\/figcaption><\/figure>\n

Je nach verwendeter Fotovorlage, dem gew\u00e4hlten Kriterium (hier: Helligkeit) und der verwendeten Schrittl\u00e4nge entstehen unterschiedliche Linienmuster.<\/p>\n

\"\"
Diesem Bild liegt das im Programm verwendete Eisbild zugrunde (heller Hintergrund).<\/figcaption><\/figure>\n
\"\"
F\u00fcr dieses Bild diente das Foto mit dem Hund und der Ziege als Grundlage (dunkler Hintergrund).<\/figcaption><\/figure>\n

Obwohl bei beiden Bildern (abgesehen vom Hintergrund) die genau gleichen Parameter gew\u00e4hlt wurden, sind v\u00f6llig unterschiedliche Linienmuster entstanden.<\/p>\n

Gleichzeitige Verwendung mehrere Linienmuster<\/h2>\n

Statt jeweils nur einen Parameter f\u00fcr die einzelnen Pfade (Linien) zu verwenden, kann dabei auf unterschiedliche Informationen zugegriffen werden. Dazu bietet es sich an, einen Block zu programmieren, welcher das Abfragen der unterschiedlichen Merkmale eines Bildpixels vereinfacht.<\/p>\n

\"\"
Der Block erlaubt die Wahl der gew\u00fcnschten Farbinformation \u00fcber ein Men\u00fc.<\/figcaption><\/figure>\n

Als Auswahlm\u00f6glichkeiten stehen folgende Optionen zu Verf\u00fcgung:<\/p>\n