Problème

Les visuels numériques sont souvent discutés comme des images terminées : une affiche, une interface, un cadre, un rendu, un immobile d’un système de mouvement. Les graphismes procéduraux déplacent l’attention de la sortie vers le système. La question importante devient : quelles règles, paramètres et transformations ont produit cette image ?

Le problème est que les visuels procéduraux peuvent devenir génériques. Les champs de bruit, les particules, les gradients et les effets shader sont partout. Sans discipline conceptuelle, le travail procédural devient un style reconnaissable plutôt qu’une façon de penser.

Electronic Artefacts a besoin de graphismes procéduraux comme sujet de connaissance parce que de nombreux systèmes visuels futurs seront générés, paramétrés, animés ou liés à l’état audio et graphique.

Présentation

Les graphismes procéduraux sont générés à partir de règles. Les règles peuvent être mathématiques, physiques, typographiques, aléatoires, fondées sur des données ou interactives. Un shader peut calculer la couleur de chaque pixel. Un système de particules peut simuler le mouvement. Un système de mise en page peut organiser des éléments à partir de données graphiques.

L’idée clé est que la forme visuelle n’est pas dessinée une fois. Il émerge d’un système qui peut être modifié, répété, mis en version et étudié.

Contexte

Le codage créatif a rendu les graphismes procéduraux accessibles aux artistes et aux concepteurs. WebGL a apporté des systèmes visuels accélérés GPU dans les navigateurs. Les communautés de Shader ont rendu l’expérimentation au niveau du pixel instructible. Les plates-formes d’art génératif ont rendu les sorties procédurales collectables et publiques.

Mais les graphismes procéduraux ont de la valeur au-delà du spectacle. Ils peuvent expliquer les données, exprimer l’identité, créer des archives interactives, visualiser l’audio et révéler les modèles structurels.

Historique

La fabrication d’images procédurales fait partie de l’histoire des graphismes informatiques, de l’art algorithmique, de la simulation, de la culture démoscène, des moteurs de jeu, des systèmes de conception et de la visualisation scientifique. Les premiers artistes informatiques utilisaient des comploteurs et des systèmes fondés sur des règles. Plus tard, les GPU et les shaders ont rendu la forme procédurale en temps réel largement disponible.

Le navigateur a changé la distribution. Un visuel de procédure pourrait être visionné, inspecté et interagi avec une URL publique.

Concepts fondamentaux

Règle : une procédure qui détermine la sortie visuelle.

Paramètre : une valeur qui modifie le comportement de la règle.

Shader: code qui fonctionne sur le GPU pour calculer les résultats visuels.

Bruit : variation de pseudo-randome structurée.

Simulation : un système qui évolue selon les règles dans le temps.

Grammaire visuelle : l’ensemble de contraintes qui rend les sorties liées.

Architecture

Un système visuel de procédure a habituellement entrée, couche de règles, état, rendu et évaluation. L’entrée peut inclure le temps, l’audio, la position du pointeur, les données, les graines aléatoires ou les entités graphiques. La couche de règle transforme l’entrée. La mémoire des magasins publics. Le rendu convertit l’état en pixels. L’évaluation décide si la sortie communique, effectue et appartient.

Pour Electronic Artefacts, les données graphiques peuvent être entrées. Un article, un projet ou un concept pourrait influencer la mise en page, la couleur, le mouvement ou le son. Le système visuel doit rester documenté pour que la relation soit compréhensible.

Mise en œuvre

La mise en œuvre peut commencer par un simple dessin de toile, puis se déplacer dans WebGL et les shaders lorsque la performance ou le contrôle des pixels est important. Le système doit exposer des paramètres significatifs: densité, échelle, rythme, relation de couleur, source d’entrée, comportement de graine et de temps.

La préservation nécessite l’enregistrement du code, de la version, des plages de paramètres, des semences, des hypothèses du navigateur et des sorties exportées. Un travail de procédure qui ne peut pas être reconstruit peut encore être documenté, mais il perd une partie de son sens.

Applications pratiques

Les graphismes procéduraux supportent les systèmes d’identité generative, les essais interactifs, les visualisateurs audio, les cartes d’archives, les œuvres basées sur la simulation, les mises en page de publication et les systèmes de mouvement axés sur les données.

Pour les palimpsestes, les graphiques de procédure pourraient exprimer les couches, les résidus et la transformation. Pour ORETH, ils pouvaient visualiser les fonctionnalités audio. Pour VASTE, ils pourraient représenter l’état d’exécution du graphique.

Outils

Les outils utiles comprennent Canvas, SVG, WebGL, GLSL, Three.js, p5.js, Processing, shader editors, outils d’exportation d’images, profileurs de performance, contrôle de version et tests de régression screenshot.

Éléments de preuve

Khronos décrit WebGL comme une technologie de navigateur pour les graphiques de bas niveau basé sur OpenGL ES. Dans la pratique, cela rend les pipelines shader et GPU accessibles aux pages Web publiques.

Electronic Artefacts a déjà des concepts qui soutiennent le travail procédural : Système générateur, Codage créatif et Conception de mouvement.

Méthode éditoriale

Un article graphique de procédure devrait montrer la logique du système. Il devrait expliquer les entrées, les paramètres et les contraintes avant de présenter la sortie visuelle comme si elle était évidente.

Les captures d’écran doivent être traitées comme une preuve d’un runtime, pas comme l’ensemble du travail.

Erreurs courantes

La première erreur est de traiter le hasard comme une profondeur. Le hasard a besoin de contraintes.

La deuxième erreur est d’ignorer la performance. Un beau système qui échoue sur les appareils ordinaires est une infrastructure publique faible.

La troisième erreur est de laisser le lecteur incapable de connecter le comportement visuel au concept.

Implications pour Electronic Artefacts

Les graphismes procéduraux peuvent aider Electronic Artefacts à construire un langage de recherche visuelle reconnaissable sans compter uniquement sur la marque statique. Le site peut développer des systèmes visuels qui répondent aux connaissances, au son et aux archives.

Le centre de connaissances devrait documenter ces systèmes afin que les futurs lecteurs puissent comprendre leur signification technique et culturelle.

Rôle du graphe de connaissances

Les graphiques de procédure peuvent être représentés comme plus que des images. Un système visuel peut être alimenté par WebGL, mettre en œuvre un système génératif, utiliser des données graphiques, répondre à l’audio et produire des objets. Ce sont des relations distinctes. Un graphique peut les préserver d’une manière qu’une capture d’écran statique ne peut pas.

Cela compte pour Electronic Artefacts parce que les futurs systèmes visuels peuvent connecter VASTE, ORETH et Palimpsests. Un shader pourrait visualiser les résidus audio. Une présentation générique pourrait répondre aux entités du savoir. Un système de mouvement pourrait exprimer des couches d’archives. Chaque produit devrait rester attaché à son système de règles et à son contexte.

Critères d’évaluation

Un système visuel procédural devrait être évalué par la cohérence, la performance, la pertinence et la préservation. Les paramètres créent-ils des variations significatives? La grammaire visuelle convient-elle au sujet? Est-ce qu’il fonctionne de manière fiable sur les appareils cibles? Le système peut-il être reconstruit ou au moins documenté plus tard?

Elle devrait également être évaluée de manière critique. La complexité procédurale n’est pas la même que la profondeur culturelle. Une règle simple qui clarifie un concept peut être plus forte qu’un shader complexe sans rapport avec le contenu.

Norme éditoriale

Lors de la publication de graphiques de procédure, inclure la logique de règle dans la prose. Nommez les entrées, paramètres et conditions de sortie. Si des captures d’écran sont affichées, identifiez-les comme des états capturés. Si le système est interactif, expliquez ce qui change l’interaction. Si le système utilise le caractère aléatoire, indiquez si les sorties sont répétables.

Cela rend les systèmes visuels lisibles comme objets de recherche, pas seulement les surfaces esthétiques.

Voie de lecture

Les graphismes procéduraux attirent les lecteurs par curiosité visuelle, mais l’article ne doit pas s’arrêter aux effets. Il devrait passer de la sortie visible à la logique du système : règles, paramètres, shaders, conditions d’exécution et conservation. Un lecteur qui arrive pour WebGL peut quitter les systèmes générateurs de compréhension. Un designer qui arrive pour l’inspiration visuelle peut partir avec un modèle plus fort de grammaire visuelle.

Ce sujet devrait pointer vers Conception de mouvement, Codage créatif, WebGL et les futurs articles spécifiques au shader. C’est aussi un pont naturel vers les Palimpsestes, où les couches et la transformation peuvent devenir une méthode visuelle plutôt que de la décoration.

Il peut également soutenir VASTE en rendant visible la structure graphique. Une interface procédurale peut montrer la densité, la relation, la confiance ou le changement au fil du temps, pourvu que la cartographie soit expliquée. Le but n’est pas de transformer chaque ensemble de données en spectacle. Le point est de donner une structure abstraite un comportement visuel lisible.

Pour les lecteurs, cela crée un chemin de la curiosité visuelle à l’alphabétisation des systèmes. Ils peuvent commencer par des shaders et se terminer par une meilleure compréhension des graphiques, audio et archives.

Travaux futurs

Les futurs articles devraient couvrir les shaders, le bruit, les particules, la typographie générative, la visualisation graphique, les visuels audioréactifs, la préservation WebGL et la conception de paramètres.

Concepts connexes

Lire Graphiques de procédure, WebGL, Système générateur, Codage créatif et Conception de mouvement.

Lecture suggérée

Commencez par de petits exemples de shader, puis étudiez les fondamentaux WebGL et les croquis de codage créatifs qui exposent clairement les paramètres.

Articles connexes

Continuer avec Pédagogie de codage créatif de Logo à p5.js et Conception de mouvement, temps et sémantique d’interface.

Glossaire

Shader: programme GPU utilisé pour le rendu.

Semence: valeur utilisée pour initialiser la variation répétable.

Bruit: signal pseudo-aléatoire avec structure.

Grammaire visuelle : contraintes qui rendent les sorties cohérentes.

Limites

Les graphiques de procédure peuvent être difficiles à préserver car ils dépendent des conditions d’exécution. Les versions du navigateur, les différences GPU et les changements de bibliothèque comptent.

Ils peuvent également devenir sténographie esthétique. Un article durable devrait relier le système au but, au matériel et au contexte.

Références

  • Groupe Khronos. Le WebGL.
  • Electronic Artefacts. Système génératif, codage créatif et enregistrements Motion Design.