Spielwerk
Eine auf Rust basierende Design-Arbeitsumgebung, die veränderbare Regeln in Muster, Typografie und Bewegung verwandelt.
- Beitrag
- Interaction Design · Generatives Design · Rust-Engine · Exportabläufe
- Technologien
- Rust · WebAssembly · Svelte · WebGL2
Passen Sie die Form sowie die Farbpalette des sich bewegenden Farbfelds an. 
Ändern Sie die Regeln für die Verläufe, um Pfeilkompositionen zu erstellen. 
Entdecken Sie Kachelmuster, ohne den Arbeitsbereich verlassen zu müssen.
Regeln festlegen und das Ergebnis sehen
Spielwerk ist unser Arbeitsbereich für generatives Design. Passen Sie eine Regel an und beobachten Sie, wie sich das Kunstwerk entsprechend verändert. Sie können die Dichte, Farbe oder Bewegung einer Komposition erkunden, ohne den Code bearbeiten zu müssen.
Arrow Maze zeichnet verzweigte Pfeilkompositionen. Truchet Tiles erstellt geometrische Muster. Liquid Gradients erzeugt fliessende Farbfelder und kann dieselbe Verzerrung auf ein hochgeladenes Bild anwenden. Die Bedienelemente jedes Werkzeugs befinden sich neben einer Live-Zeichenfläche.
Auf Basis der Rust-Engine neu entwickelt
Wir haben die Grafik-Engine von Spielwerk neu in Rust programmiert und die Tools in einem Arbeitsbereich zusammengeführt. Rust läuft über WebAssembly im Browser und berechnet die Geometrie sowie das Animations-Timing. Die Steuerung übernimmt eine Svelte-Oberfläche, während Liquid Gradients die GPU zum Rendern der Pixel nutzt.
Im gemeinsamen Arbeitsbereich können Sie zwischen Werkzeugen wechseln, die Grösse der Zeichenfläche anpassen und Momentaufnahmen von Varianten speichern, zu denen Sie später zurückkehren möchten. Insgesamt stehen neun Werkzeuge zur Verfügung. Logo Extruder und Font Remixer bleiben separate ältere Werkzeuge und wurden noch nicht in den neuen Arbeitsbereich übernommen.
Fügen Sie die Grafik zu Ihrem Projekt hinzu
Je nach Werkzeug können Sie ein Standbild, eine Animation oder eine Website-Einbettung exportieren. Die geometrischen Werkzeuge exportieren SVG- und PNG-Dateien. Für ausgewählte Animationen steht auch das GIF-Format zur Verfügung. Liquid Gradients exportiert PNG-Bilder und animierte Website-Einbettungen. Die Einbettungspakete enthalten die Laufzeitumgebung und Ressourcen, die zur Darstellung der Arbeit auf einer anderen Website benötigt werden.
Ihre Momentaufnahmen und hochgeladenen Bilder werden in Ihrem Browser gespeichert. Exportieren Sie Momentaufnahmen als JSON, um eine Kopie zu erstellen oder sie auf ein anderes Gerät zu übertragen.
Das Pfeil-Labyrinth auf dieser Website nutzt nach wie vor die zuvor exportierte Laufzeitumgebung. Der neue Arbeitsbereich stellt hingegen eigene Pakete bereit, die in Websites eingebettet werden können.