Psychedelic Graphics 0 : introduction

Psychedelic Graphics 0 : introduction

• Cette série présente comment créer des visuels psychédéliques pour l’animation et le jeu vidéo. Elle est conçue pour être compréhensible même sans connaissances préalables en graphisme ou en programmation. Avoir des bases en trigonométrie et en programmation peut toutefois aider.
• J’espère que cette série vous permettra de comprendre les bases des graphismes psychédéliques utilisés dans la vidéo. La plupart des vidéos ont été réalisées avec Blender, mais les techniques enseignées dans cette série se transposent facilement, et Blender sera abordé plus en profondeur plus tard.

Qu’est-ce que l’UV ?

Modèle 3D

• Les graphismes informatiques donnent souvent l’impression d’être en 3D, mais lorsqu’on écrit du code graphique, il faut souvent raisonner en 2D. Si vous avez créé une belle forme dans un logiciel de modélisation 3D, vous avez en réalité créé des points flottant dans l’espace (des sommets), puis relié certains d’entre eux pour former des surfaces solides (des faces).
• Les modèles 3D sont en grande partie creux, et nous ne voyons que leur surface. La méthode standard pour appliquer des couleurs à un modèle 3D est le mapping UV / texturing. De la même façon que la projection 2D de la Terre paraît légèrement étirée ou compressée, les couleurs d’un modèle 3D ont un rendu similaire lorsqu’elles sont projetées en 2D.

Peinture de texture

• Lorsque l’on peint une texture, elle apparaît sur le modèle 3D. La plupart des logiciels permettent de peindre directement sur le modèle 3D afin de colorer la texture d’image.

Coordonnées UV

• On peut considérer les UV comme une position, c’est-à-dire des coordonnées 2D. Les coordonnées UV sont définies dans un espace allant de (0, 0) à (1, 1). Une UV map est l’ensemble des données qui relient une image de texture en couleur aux faces du modèle 3D.

Comment fonctionne le code graphique

Les couleurs dans les graphismes

• En infographie, les couleurs sont souvent représentées en RGB. En mélangeant le rouge, le vert et le bleu, on peut produire presque toutes les couleurs perceptibles par l’être humain. En informatique graphique, la quantité de rouge, de vert et de bleu est généralement comprise entre 0.0 et 1.0.

Les couleurs des UV

• Convertir les coordonnées UV en couleurs aide à les visualiser et à résoudre les problèmes. La première valeur des UV (la valeur X) est utilisée comme rouge, et la seconde valeur (la valeur Y) comme vert.

Nombres à virgule flottante et vecteurs vec2, vec3

• Un float est un nombre décimal simple. vec signifie vecteur : vec2 se compose de deux nombres décimaux et vec3 de trois.

Structure d’un programme graphique

• Les graphismes doivent être pilotés de manière distribuée. Le code n’est pas exécuté une seule fois pour générer toutes les couleurs : il s’exécute des millions de fois pour chaque petite partie de l’écran. Si vous avez de l’expérience en programmation, c’est une façon de penser très différente.

• Vous êtes maintenant prêt à commencer la partie 1. Malgré ces contraintes, vous verrez dans la partie 1 comment créer des visuels intéressants.

[GN⁺]

Avis Hacker News

• David Tristram était un membre fondateur de Raster Masters, un groupe de performance en infographie des années 1990, qui utilisait des stations de travail Silicon Graphics pour créer des images de synthèse accompagnant en direct la musique de Grateful Dead, Herbie Hancock, Graham Nash et d'autres

  • Aujourd'hui, il travaille principalement dans un environnement de traitement vidéo 2D avec Resolume Avenue et TouchDesigner
  • Hydra est un environnement de live coding cool, basé sur JavaScript, qui permet d'expérimenter des graphismes psychédéliques sans descendre à un niveau trop bas

• Par le passé, il a étudié des méthodes de déformation des coordonnées de texture UV, et utilise aujourd'hui des fragment shaders comme sur ShaderToy

  • Le processus consistant à déplacer les coordonnées de texture selon un champ de flux est particulièrement intéressant
  • Il existe aussi une méthode simple consistant à appliquer une force de « restauration » pour que les coordonnées reviennent à leur position d'origine
  • En combinant feedback et effets de déplacement, on génère des mouvements proches d'un écoulement fluide

• C'est appréciable qu'il soit facile d'écrire des shaders pour traiter des images en HTML

  • Même une simple approximation d'une depth map peut produire des résultats intéressants
  • Il a autrefois mené un projet en WebGL pour rendre plus fluide le crossfade entre des images

• Il s'intéresse beaucoup à la reproduction visuelle d'expériences psychédéliques

  • Un article de Rolling Hills explique comment reproduire des hallucinations visuelles
  • Certains artistes parviennent à très bien mettre en œuvre des visuels psychédéliques avec les technologies modernes

• Todd Rundgren a développé au début des années 1990 une application Mac appelée Flowfazer, destinée à aider les utilisateurs à trouver l'inspiration pour créer

• Les performances de Tipper et Fractaled Visions comptaient parmi les descriptions les plus fidèles de visuels psychédéliques

  • Les visuels de Fractaled Vision étaient complexes et riches, et suscitaient l'émerveillement

• En écrivant des shaders WebGL, il essaie aussi de reproduire des effets de caméra physique

  • Cela aide à approfondir la compréhension du graphisme, des mathématiques, du GPU, de la mémoire, du CPU, de l'animation et de la gestion du temps

• Les recherches de Jim Crutchfield sur les systèmes de feedback vidéo offrent un système expérimental utile pour étudier des dynamiques spatiales et temporelles complexes