CSSペイントAPIで生成パターンを作成します

このチュートリアルでは、CSSペイントAPIを使用して3つの生成パターンの作成を示しています。 HTML、CSS、およびJavaScriptに満足している開発者を対象としており、生成アートとペイントAPIの穏やかな紹介を提供しています。

Webは長い間芸術的な表現のキャンバスでしたが、CSSはHoudiniプロジェクトのペイントAPIまで専用の描画APIを欠いていました。このチュートリアルは、このAPIを活用して、視覚的に魅力的で動的なパターンを作成します。

生成アートとCSSペイントAPI：

チュートリアルは、アルゴリズムとランダム性を使用して作成されたARTと、JavaScript「ペイントワークレット」を介したCSSレンダリングへの低レベルのアクセスを提供するCSSペイントAPIを説明することから始まります。 paint()関数を含むこれらのワークレットは、キャンバスのような構文を使用して動的な画像作成を可能にします。ペイントAPIは速度と応答性を提供し、既存のCSSシステムとうまく統合されていますが、ブラウザのサポートは現在限られています（主にクロムとエッジ）。

パターン：

3つの異なるパターンが調査されています。

• 「Tiny Specks」： CSSカスタムプロパティ（シード、色、カウント、Min/Maxサイズ）を通じてカスタマイズ可能なランダムにサイズの回転した楕円のパターン。チュートリアルの詳細ワークレットクラスの作成、プロパティと値APIを使用して入力プロパティを定義し、 paint()関数を実装して、一貫したレンダリングのために擬似ランダム数生成を使用してスペックを生成します。

• 「Bauhaus」：ランダムに選択された形状（円、弧、長方形、三角形）と各セル内の回転を備えたグリッドベースのパターン。このチュートリアルでは、コンテナに適合する固定サイズパターンのスケーリングを処理するscaleCtx関数を導入し、ヘルパー機能を描くためのヘルパー機能が形成されます。

• 「Voronoi Arcs」： Voronoi Tessellationを利用して有機形状を作成するパターン。チュートリアルでは、ヘルパー関数（ createVoronoiTessellation ）を導入してテッセレーションを生成し、 paint()関数は各ボロノイセル内のアークをオプションの内側円でレンダリングします。

セットアップとコード構造：

このチュートリアルでは、開発の容易さのためにCodePenを使用しています。ワークレットクラスのセットアップ、 registerPaintとCSS.paintWorklet.addModule()を使用して登録し、 background-image: paint(workletName); 。 seedrandomを使用した決定論的なランダム性の重要性は、サイズ変更にちらつくのを避けるために強調されています。チュートリアルでは、各パターンの詳細なコードスニペットを提供し、ロジックと機能を説明します。

ランダム化とさらなる調査：

チュートリアルは--pattern-seedプロパティを動的に設定することにより、ページロードのパターンをランダム化する方法を示すことで終わります。読者は、提供されたパターンを実験して拡張することを奨励し、生成的な芸術技術のさらなるカスタマイズと調査を示唆しています。最終的な課題は、読者がページ自体に隠された生成ワークレットを見つけることを奨励しています。

以上がCSSペイントAPIで生成パターンを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。