Membuat corak generatif dengan API Cat CSS

Tutorial ini menunjukkan mencipta tiga corak generatif menggunakan CSS Paint API. Ia bertujuan untuk pemaju yang selesa dengan HTML, CSS, dan JavaScript, yang menawarkan pengenalan lembut kepada seni generatif dan API cat.

Web telah lama menjadi kanvas untuk ekspresi artistik, tetapi CSS tidak mempunyai API lukisan khusus sehingga API Paint Project Houdini. Tutorial ini memanfaatkan API ini untuk mewujudkan corak yang menarik dan dinamik secara visual.

Seni Generatif dan CSS Paint API:

Tutorial ini bermula dengan menerangkan seni generatif yang dibuat menggunakan algoritma dan rawak-dan CSS Paint API, yang menyediakan akses peringkat rendah kepada CSS yang diberikan melalui "kerja cat" JavaScript. Kerja-kerja ini, yang mengandungi fungsi paint() , membolehkan penciptaan imej dinamik menggunakan sintaks seperti kanvas. API Cat menawarkan kelajuan dan respons, mengintegrasikan dengan baik dengan sistem CSS yang sedia ada, tetapi sokongan penyemak imbas kini terhad (terutamanya Chrome dan Edge).

Corak:

Tiga corak yang berbeza diterokai:

• "Specks Tiny": Corak elips berukuran secara rawak, berputar, disesuaikan melalui sifat adat CSS (benih, warna, kiraan, saiz min/maksimum). Butiran tutorial yang mewujudkan kelas kerja, menentukan sifat input menggunakan sifat dan nilai API, dan melaksanakan fungsi paint() untuk menjana specks menggunakan penjanaan nombor pseudo-rawak untuk rendering yang konsisten.

• "Bauhaus": Corak berasaskan grid dengan bentuk yang dipilih secara rawak (bulatan, arka, segi empat tepat, segitiga) dan putaran dalam setiap sel. Tutorial memperkenalkan fungsi scaleCtx untuk mengendalikan skala corak saiz tetap agar sesuai dengan bekas, dan fungsi penolong untuk melukis bentuk.

• "Voronoi Arcs": corak yang menggunakan tessellation Voronoi untuk mencipta bentuk organik. Tutorial memperkenalkan fungsi pembantu ( createVoronoiTessellation ) untuk menghasilkan tessellation, dan fungsi paint() membuat arka dalam setiap sel Voronoi, dengan kalangan dalaman pilihan.

Persediaan dan Struktur Kod:

Tutorial menggunakan Codepen untuk kemudahan pembangunan. Ia menerangkan menubuhkan kelas kerja, mendaftarkannya menggunakan registerPaint dan CSS.paintWorklet.addModule() , dan memohon melalui background-image: paint(workletName); . Kepentingan rawak deterministik menggunakan seedrandom ditekankan untuk mengelakkan kelipan pada saiz semula. Tutorial menyediakan coretan kod terperinci untuk setiap corak, menerangkan logik dan fungsi.

Rawak dan penerokaan lanjut:

Tutorial ini menyimpulkan dengan menunjukkan cara meramalkan corak pada beban halaman dengan menetapkan secara dinamik --pattern-seed . Ia menggalakkan pembaca untuk bereksperimen dan mengembangkan corak yang disediakan, mencadangkan penyesuaian dan penerokaan teknik seni generatif selanjutnya. Cabaran akhir menggalakkan pembaca mencari kerja generatif tersembunyi di halaman itu sendiri.

Atas ialah kandungan terperinci Membuat corak generatif dengan API Cat CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!