JPKCom DB

Trianglify UI — Manual

Vollständige Funktionsbeschreibung von Trianglify UI: jede Einstellung mit Wirkung und Wertebereich, die Export-Formate, Data-URLs und die clientseitige Architektur.

Zurück zur Übersicht: Trianglify UI · Tool live öffnen: www.jpkc.com/tools/trianglify/

Dieses Manual beschreibt Trianglify UI vollständig: jede Einstellung mit ihrer Wirkung und ihrem Wertebereich, die Export-Wege und die Architektur dahinter. Die Oberfläche des Tools ist auf Englisch — die Bedien-Elemente werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Oberfläche und Ablauf

Das Tool ist zweispaltig aufgebaut: Links liegt die Settings-Karte mit allen Reglern, rechts die Preview mit dem aktuell gerenderten Muster. Darunter folgen die Karte Export und ein aufklappbarer Bereich Base64 Data URLs.

Jede Änderung an einem Regler rendert die Vorschau sofort neu — beim Verschieben von Cell Size und Variance aktualisiert sich erst die Zahl, beim Loslassen das Bild. Mit Generate Pattern erzwingst du jederzeit einen neuen Durchlauf (ohne Seed entsteht dabei ein neues Zufallsmuster). Erzeugt wird das Muster über die Bibliothek Trianglify.js v4, die vollständig im Browser läuft.

Einstellungen (Settings)

Seed (optional)

Ein Text-Feld (Random seed...) für den Startwert des Zufallsgenerators. Ein Seed macht ein Muster reproduzierbar: Gleicher Seed plus identische Einstellungen (Palette, Cell Size, Variance) ergeben exakt dasselbe Muster — auf jedem Gerät, zu jeder Zeit.

  • Das Shuffle-Symbol daneben (Generate random seed) erzeugt einen zufälligen 8-stelligen alphanumerischen Seed (A–Z, a–z, 0–9) und rendert sofort neu.
  • Tippst du selbst einen Wert ein, übernimmt ihn das Tool beim Verlassen des Felds oder mit der Enter-Taste.
  • Ist das Feld leer, erzeugt jeder Durchlauf ein neues Zufallsmuster. Ein gesetzter Seed wird in der Vorschau als Badge „Seed: …" angezeigt.

Color Palette — Farb-Palette

Ein Auswahl-Menü mit 27 benannten Paletten plus dem Modus Random (Voreinstellung). Es handelt sich um die bekannten ColorBrewer-Paletten, gruppiert in zwei Gruppen:

  • Sequential (18, ein Farbverlauf von hell nach dunkel): YlGn (Yellow-Green), YlGnBu, GnBu, BuGn, PuBuGn, PuBu, BuPu, RdPu, PuRd, OrRd, YlOrRd, YlOrBr, Purples, Blues, Greens, Oranges, Reds, Greys.
  • Diverging (9, zwei Farben mit hellem Mittelpunkt): PuOr (Purple-Orange), BrBG, PRGn, PiYG, RdBu, RdGy, RdYlBu, Spectral, RdYlGn.

Random würfelt bei jedem Durchlauf eine Palette aus. Die gewählte Palette erscheint in der Vorschau als Badge. Der gewählte Farbverlauf wird auf beiden Achsen des Musters angewendet (die Y-Achse spiegelt intern die X-Achse, yColors: match) — es gibt also genau einen Verlauf pro Muster, keine getrennte X-/Y-Auswahl.

Use custom color gradient — eigener Farbverlauf

Ein Schalter, der das Palette-Menü gegen einen eigenen Zwei-Farben-Verlauf tauscht. Ist er aktiv, wird das Palette-Menü deaktiviert (beides gleichzeitig geht nicht), und zwei Farbfelder erscheinen:

  • Start Color — Voreinstellung #264653.
  • End Color — Voreinstellung #e76f51.

Beide öffnen einen Farb-Wähler (Coloris) im Hex-Format (ohne Alpha-Kanal) mit acht Vorlage-Farbtupfern. Das Muster wird als Verlauf zwischen Start- und End-Farbe gerendert — genau das Mittel, um Hintergründe in deinen Marken-Farben zu erzeugen. Eine Änderung an einer der beiden Farben rendert sofort neu.

Cell Size — Zell-Größe

Ein Schieberegler für die Dreiecks-Größe in Pixeln:

  • Wertebereich 20 bis 200 px, Schrittweite 5, Voreinstellung 75.
  • Kleine Werte ergeben viele feine Dreiecke (mehr Detail, größere Datei), große Werte wenige, großflächige Dreiecke (gröber, kleinere Datei).

Da die Zell-Größe ein absoluter Pixel-Wert ist, enthält ein großflächiger Export bei gleicher Cell Size mehr Dreiecke als die kleinere Vorschau.

Variance — Varianz

Ein Schieberegler für die Unregelmäßigkeit der Dreiecks-Anordnung:

  • Wertebereich 0 bis 1,5, Schrittweite 0,05, Voreinstellung 0,75.
  • Bei 0 liegt ein nahezu regelmäßiges Gitter vor; je höher der Wert, desto stärker werden die Gitterpunkte verschoben und desto unregelmäßiger und zerklüfteter wirkt das Muster.

Generate Pattern

Die Schaltfläche unten in der Settings-Karte erzeugt das Muster mit den aktuellen Werten neu. Bei gesetztem Seed ist das Ergebnis identisch zum vorherigen; ohne Seed entsteht eine neue Zufalls-Variante.

Vorschau (Preview)

Die Vorschau rendert das Muster als Inline-SVG in den Vorschau-Bereich (Standardgröße rund 800 × 600 px, passt sich der Spaltenbreite an). Zwei Badges oben rechts zeigen die aktive Palette (bzw. „Custom"/„Random") und — falls gesetzt — den Seed. Die Vorschau dient nur der Ansicht; die tatsächliche Ausgabegröße bestimmst du im Export.

Export

Export Resolution — Export-Auflösung

Ein Auswahl-Menü für die Ausgabegröße der Downloads:

  • HD (1280 × 720)
  • Full HD (1920 × 1080) — Voreinstellung
  • QHD (2560 × 1440)
  • 4K (3840 × 2160)
  • Custom… — schaltet zwei Felder für Width und Height frei (Wertebereich 100 bis 8192 px, Voreinstellung 1920 × 1080).

Wichtig: Der Export rendert das Muster frisch in der gewählten Auflösung, nicht als hochskalierte Vorschau. Bei gleicher Cell Size deckt eine größere Fläche mehr Dreiecke ab. Nur mit gesetztem Seed ist die Ausgabe deterministisch — ohne Seed kann sich das exportierte Muster von der gerade gezeigten Vorschau unterscheiden.

Download PNG

Erzeugt das Muster in der Export-Auflösung, rendert es auf ein Canvas und lädt es als PNG-Bitmap herunter.

Download SVG

Erzeugt das Muster in der Export-Auflösung und lädt es als SVG-Vektorgrafik herunter. Für Web-Hintergründe meist die bessere Wahl: skalierbar und bei diesen Mustern oft kompakter als ein PNG.

Dateinamen

Die heruntergeladene Datei heißt trianglify[-<seed>]-<Breite>x<Höhe>.<png|svg> — also etwa trianglify-Ab12Cd34-1920x1080.png mit Seed oder trianglify-1920x1080.svg ohne. Der Seed steht damit gleich im Dateinamen und lässt sich später zur Reproduktion zurück ins Tool tippen.

Base64 Data URLs

Ein aufklappbarer Bereich liefert zwei Base64-Data-URLs des aktuellen Vorschau-Musters zum Kopieren:

  • PNG Data URL — data:image/png;base64,… aus dem Vorschau-Canvas.
  • SVG Data URL — data:image/svg+xml;base64,… aus dem Vorschau-SVG.

Beide beziehen sich auf die Vorschau-Auflösung (nicht auf die Export-Größe) und eignen sich, um das Muster ohne separate Bilddatei direkt im CSS einzubetten:

.hero {
	background-image: url("data:image/svg+xml;base64,…");
	background-size: cover;
}

Über die Copy-Schaltfläche landet die jeweilige Data-URL in der Zwischenablage.

Architektur: alles im Browser

Trianglify UI ist rein clientseitig. Es gibt keinen Server-Roundtrip, kein API und keinen Upload: Das Muster wird vollständig in deinem Browser über die quelloffene Bibliothek Trianglify.js v4 (von Quinn Rohlf, GPL-3.0) erzeugt, gerendert und exportiert. Nichts von dem, was du erzeugst, verlässt dein Gerät — der Download und das Kopieren der Data-URL passieren lokal.

Wertebereiche auf einen Blick

Einstellung Bereich Schritt Voreinstellung
Cell Size 20–200 px 5 75
Variance 0–1,5 0,05 0,75
Custom Width/Height 100–8192 px — 1920 / 1080
Seed freier Text / 8-stellig zufällig — leer
Color Palette 27 Paletten + Random — Random

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite, für konkrete Abläufe die Beispiele. Ausprobieren kannst du alles direkt im Tool.