---
title: "Spielwerk"
url: "https://divergenz.ch/de/projekte/spielwerk/"
language: "de-CH"
description: "Eine auf Rust basierende Design-Arbeitsumgebung, die veränderbare Regeln in Muster, Typografie und Bewegung verwandelt."
---

# 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](https://rust-lang.org/) · [WebAssembly](https://webassembly.org/) · [Svelte](https://svelte.dev/) · [WebGL2](https://registry.khronos.org/webgl/specs/latest/2.0/)

![Die Verzerrung eines bewegten Farbverlaufs anpassen und anschliessend im selben Arbeitsbereich zu Arrow Maze wechseln.](https://divergenz.ch/images/case-studies/spielwerk-rust/poster.webp)

Liquid Gradients und Arrow Maze nutzen denselben Arbeitsbereich, um Grafiken zu bearbeiten, in der Vorschau anzuzeigen und zu exportieren.

[Video öffnen (MP4)](https://divergenz.ch/videos/case-studies/spielwerk-rust/overview.mp4)

![Liquid Gradients mit fliessenden Farben neben seinen Design-Bedienelementen.](https://divergenz.ch/images/case-studies/spielwerk-rust/liquid-gradients.webp)

Passen Sie die Form sowie die Farbpalette des sich bewegenden Farbfelds an.

![Arrow Maze zeichnet eine violette Pfeilkomposition im gemeinsamen Arbeitsbereich.](https://divergenz.ch/images/case-studies/spielwerk-rust/arrow-maze.webp)

Ändern Sie die Regeln für die Verläufe, um Pfeilkompositionen zu erstellen.

![Truchet Tiles zeigt ein geometrisches Muster neben seinen Design-Bedienelementen.](https://divergenz.ch/images/case-studies/spielwerk-rust/truchet-pattern.webp)

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.

[Spielwerk im Browser ausprobieren](https://spielwerk.net)


[Quellcode von Spielwerk erkunden](https://github.com/divergenz-ch/spielwerk)


[Zurück zu den Projekten](https://divergenz.ch/de/projekte/)

[English](https://divergenz.ch/projects/spielwerk/)