WaBis

walter.bislins.ch

Abstrakte Symbole und Schmuckvorlagen generieren

Freitag, 1. Juli 2016 - 19:30 | Autor: wabis | Themen: Mathematik, Interaktiv, Kurioses
Splines sind Funktionen, die eine Reihe von Punkten mit einer schön geschwungenen Kurve verbinden. In einer JavaScript App habe ich Splines dazu verwendet, zufällig generierte Symbole und schöne Schmuckvorlagen zu erzeugen. Über diverse Parameter kann das Aussehen der erzeugten Figuren gesteuert werden. Eine Bilder-Gallerie zeigt interessante Beispiele, welche diese App erzeugt hat.

Klicke hier auf Maximale Grösse, um das Fenster auf maximale Grösse zu vergrössern. Dies kann jederzeit mit der Schaltfläche mit dem Pfeil « oben rechts rückgängig gemacht werden.

Informationen zur Bedienung findest du in Parameter der Symbol-Generator App.

Symbol-Generator App

Klicke in das Bild oben oder auf New Fig bzw. New Figure, um eine neue Figur mit denselben Einstellungen zu generieren.

  • Set
  • Fig-Col
  • Fig-Geom
  • Plate-Col
  • Plate-Geom

Hier ein paar Vorlagen als Ausgangslage für weitere Figuren. Klicke auf eine Schaltfläche und danach ins Bild oben, um neue Varianten der Figur zu erzeugen.

  • Listings:
  • Beschreibung
  • Interner Zustand
  • Bezier-Segmente

Wenn du die Figur speichern willst, damit sie später wieder erzeugt werden kann, kannst du oben das Register Interner Zustand anklicken. Darunter erscheint dann ein Textfeld, in dem alle aktuellen Parameter der Figur aufgelistet sind. Kopiere einfach den Inhalt des Textfeldes mit Control-A, Control-C (select all, copy) und speichere ihn mit einem beliebigen Texteditor in einer Datei. Später kann dann der Inhalt dieser Datei wieder mit Control-A, Control-C vom Editor kopiert und in das Textfeld eingefügt werden, indem du in das Textfeld klickst und dann Control-A, Control-V (select all, paste) auf der Tastatur drückst. Mit dem Drücken der Return-Taste werden diese Daten übernommen und die entsprechende Figur wird angezeigt.

Tipp: Die Daten im Textfeld Interner Zustand können direkt verändert werden. Die Änderungen werden durch Return in die Grafik übernommen.

Im Register Bezier-Segmente werden die Koordinaten der Figur als Bezier-Segmente angezeigt. Mit Hilfe dieser Koordinaten kann die Figur in einem Grafikprogramm exakt nachgezeichnet werden.

In Figure sind die Koordinaten der Spline-Stützpunkte der Figur gespeichert. Die Farben werden einerseits in HSV-Werten (Hue, Saturation, Value) und als CSS-String angezeigt.

Die Punkte PA und PB sind jeweils die Stützpunkte eines Bezier-Segmentes. Die Punkte CA und CB sind die Kontrollpunkte des Bezier-Segmentes.

Motivation und weitere Informationen

Beim Programmieren einer Testfunktion für die neue Spline-Funktion meines Grafik-Modul kam mir die Idee, eine App zu programmieren, welche auf Spline-Funktionen basiert.

Die App generiert zufällig Spline-Stützpunkte und zeichnet dann eine Linie durch alle diese Stützpunkte. Wenn dann noch die Stützpunkte an einer horizontal und/oder vertikalen Achse gespiegelt werden, entsteht eine Vielzahl überraschend schöner Figure, welche sich zum Beispiel als Vorlagen für Schmuck, Kacheln oder Logos eignen.

Was Splines sind und wie Spline-Kurven berechnet werden, kannst du unter Bezier-Segmente für Spline berechnen nachlesen.

Symbol-Gallerie

Die folgenden Symbole sind durch Klicken auf Rand All entstanden. Manchmal habe ich einige Parameter wie Farbe und Geometrie leicht verändert, um die zufällig erzeugte Figur meiner Vorstellung davon anzupassen. Meist liefert Rand All nur eine Idee für Farbe und Geometrie. Die Figur kann dann durch Klicken auf die Grafik oder New Fig bzw. New Figure solange variiert werden, bis etwas gefälliges entsteht.

Tipp: Die interessantesten Figuren entstehen, wenn ein Häckchen bei Loop steht und eine oder beide Symmetrien aktiviert sind. Am Besten dann die Geometrien zurücksetzten, damit die Figuren nicht verzerrt werden.

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

AutoSymbol01.png 
(Klick: Zoom)

Dein Kommentar zu diesem Artikel
Name
Email optional; wird nicht angezeigt
Kommentar
  • Name wird bei deinem Kommentar angezeigt.
  • Email ist nur für den Administrator, sie wird nicht angezeigt.
  • Du kannst deine Kommentare eine Zeit lang editieren oder löschen.
  • Du kannst Formatierungen im Kommentar verwenden, z.B: Code, Formeln, usw.
  • Externen Links und Bilder werden nicht angezeigt, bis sie der Admin freischaltet.
Weitere Infos zur Seite
Erzeugt Donnerstag, 30. Juni 2016
von wabis
Zum Seitenanfang
Geändert Sonntag, 14. August 2016
von wabis