Erstellen von generativen Mustern mit der CSS -Farb -API

Dieses Tutorial zeigt, dass drei generative Muster mit der CSS -Farb -API erstellt werden. Es richtet sich an Entwickler, die mit HTML, CSS und JavaScript vertraut sind und eine sanfte Einführung in die generative Kunst und die Lack -API bieten.

Das Web war seit langem eine Leinwand für den künstlerischen Ausdruck, aber CSS fehlte eine dedizierte Zeichnungs -API, bis die Farb -API des Houdini -Projekts. Dieses Tutorial nutzt diese API, um visuell ansprechende, dynamische Muster zu erstellen.

Generative Kunst und die CSS -Lack -API:

Das Tutorial beginnt mit der Erklärung der generativen Kunst-Kunst, die mit Algorithmen und Zufälligkeit erstellt wurde, und die CSS-Farb-API, die einen Zugang zu CSS-Rendern auf niedrigem Niveau durch JavaScript "Lack-Workings" bietet. Diese Arbeitsplätze, die eine paint() -Funktion enthalten, ermöglichen eine dynamische Bilderstellung mithilfe einer leinwandähnlichen Syntax. Die Lack -API bietet Geschwindigkeit und Reaktionsfähigkeit und integriert sich gut in vorhandene CSS -Systeme, aber der Browserunterstützung ist derzeit begrenzt (hauptsächlich Chrom und Kante).

Die Muster:

Drei verschiedene Muster werden untersucht:

• "Tiny Flecken": Ein Muster von zufällig dimensionierten, gedrehten Ellipsen, die durch CSS -benutzerdefinierte Eigenschaften (Saatgut, Farben, Größen, min/max) anpassbar sind. Die Tutorial-Details, die die Workendenklasse erstellen, die Eingabeeigenschaften mithilfe der Eigenschaften und der Werte-API definieren und die Funktion paint() implementieren, um die Flecken mithilfe der Pseudo-Random-Zahlengenerierung für ein konsistentes Rendering zu generieren.

• "Bauhaus": Ein gitterbasiertes Muster mit zufällig ausgewählten Formen (Kreise, Bögen, Rechtecke, Dreiecke) und Rotationen in jeder Zelle. Das Tutorial führt eine scaleCtx -Funktion ein, um das Muster fester Größe zu verarbeiten, um den Behälter anzupassen, und Helferfunktionen zum Zeichnen der Formen.

• "Voronoi -Bögen": Ein Muster unter Verwendung der Voronoi -Tessellation, um organische Formen zu erstellen. Das Tutorial führt eine Helferfunktion ( createVoronoiTessellation ) ein, um die Tessellation zu erzeugen, und die Funktion paint() rendert in jeder Voronoi -Zelle die Bögen mit optionalen inneren Kreisen.

Setup- und Codestruktur:

Das Tutorial verwendet CodePen zur einfachen Entwicklung. Das Einrichten der Working-Klasse, die Registrierung von registerPaint und CSS.paintWorklet.addModule() und anwenden Sie sie über background-image: paint(workletName); . Die Bedeutung der deterministischen Zufälligkeit unter Verwendung von seedrandom wird betont, um die Größe der Größenänderung zu vermeiden. Das Tutorial enthält detaillierte Codeausschnitte für jedes Muster, wobei die Logik und Funktionalität erklärt werden.

Randomisierung und weitere Untersuchung:

Das Tutorial schließt ab, wie die Muster auf der Seite geladen werden, indem die Eigenschaft --pattern-seed dynamisch festgelegt wird. Es ermutigt die Leser, die bereitgestellten Muster zu experimentieren und zu erweitern, was auf eine weitere Anpassung und Erforschung generativer Kunsttechniken hinweist. Eine letzte Herausforderung ermutigt die Leser, auf der Seite selbst ein verstecktes generatives Working zu finden.

Das obige ist der detaillierte Inhalt vonErstellen von generativen Mustern mit der CSS -Farb -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!