Création de motifs génératifs avec l'API CSS Paint

Ce tutoriel montre la création de trois modèles génératifs à l'aide de l'API CSS Paint. Il s'adresse aux développeurs à l'aise avec HTML, CSS et JavaScript, offrant une introduction douce à l'art génératif et à l'API de peinture.

Le Web est depuis longtemps une toile pour l'expression artistique, mais CSS n'avait pas une API de dessin dédiée jusqu'à l'API de peinture du projet Houdini. Ce tutoriel exploite cette API pour créer des modèles dynamiques visuellement attrayants.

L'art génératif et l'API CSS Paint:

Le tutoriel commence par expliquer l'art génératif - Art créé à l'aide d'algorithmes et d'aléatoire - et l'API CSS Paint, qui fournit un accès de bas niveau au rendu CSS via JavaScript "Paint Worklets". Ces travaux, contenant une fonction paint() , permettent la création d'images dynamiques à l'aide d'une syntaxe de type canevas. L'API de peinture offre la vitesse et la réactivité, intégrant bien avec les systèmes CSS existants, mais le support du navigateur est actuellement limité (principalement Chrome et Edge).

Les motifs:

Trois modèles distincts sont explorés:

• "Tiny Specks": un motif d'ellipses rotatives de taille aléatoire, personnalisables à travers des propriétés personnalisées CSS (graines, couleurs, comptage, taille min / max). Le didacticiel détaille la création de la classe de travail, la définition des propriétés d'entrée à l'aide de l'API Properties and Values, et implémentation de la fonction paint() pour générer les Speck en utilisant la génération de nombres pseudo-aléatoires pour un rendu cohérent.

• "Bauhaus": un motif basé sur la grille avec des formes choisies au hasard (cercles, arcs, rectangles, triangles) et rotations dans chaque cellule. Le tutoriel introduit une fonction scaleCtx pour gérer la mise à l'échelle du motif de taille fixe pour s'adapter au conteneur et les fonctions d'assistance pour dessiner les formes.

• "Voronoi Arcs": un motif utilisant la tesellation Voronoi pour créer des formes organiques. Le tutoriel introduit une fonction d'assistance ( createVoronoiTessellation ) pour générer la tettellation, et la fonction paint() rend les arcs dans chaque cellule Voronoi, avec des cercles intérieurs facultatifs.

Structure de configuration et de code:

Le tutoriel utilise Codepen pour faciliter le développement. Il explique la configuration de la classe de travail, l'enregistrer à l'aide registerPaint et CSS.paintWorklet.addModule() et l'appliquer via background-image: paint(workletName); . L'importance de l'aléatoire déterministe en utilisant seedrandom est souligné pour éviter de vaciller sur le redimensionnement. Le tutoriel fournit des extraits de code détaillés pour chaque modèle, expliquant la logique et la fonctionnalité.

Randomisation et exploration plus approfondie:

Le didacticiel se termine en montrant comment randomiser les modèles de charge de page en définissant dynamiquement la propriété --pattern-seed . Il encourage les lecteurs à expérimenter et à développer les modèles fournis, suggérant une personnalisation et une exploration supplémentaires des techniques d'art génératives. Un dernier défi encourage les lecteurs à trouver un travail de génération caché sur la page elle-même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!