Psychedelic Graphics 0 : Introduction

• Introduction pour créer des visuels psychédéliques pour l’animation et le jeu vidéo, en partant des UV et du calcul des couleurs pour rester accessible même sans connaissances préalables
• Pour appliquer des couleurs à un modèle 3D, l’essentiel est de comprendre le mapping UV / texturing, qui relie une zone d’image 2D à une surface 3D
• Les coordonnées UV sont deux valeurs dans une plage de 0.0 à 1.0 qui indiquent une position sur la texture ; (0.5, 1.0) correspond à 50 % en largeur et 100 % en hauteur
• En graphisme, les couleurs sont généralement exprimées par trois valeurs RGB ; si l’on convertit les X et Y des UV en rouge et vert, les variations de coordonnées apparaissent comme un dégradé de couleurs
• Dans le code d’exemple, la couleur est déterminée par un calcul indépendant pour chaque pixel sur une unique surface 3D couvrant tout l’écran, ce qui demande une façon de penser différente de la programmation classique

---

Objectifs et prérequis de la série

• La série Psychedelic Graphics explique comment créer des visuels psychédéliques utilisables dans l’animation et les jeux vidéo
• Aucune connaissance préalable en graphisme ou en programmation n’est requise, même si des bases en trigonométrie et une expérience en programmation aident à mieux comprendre
• L’objectif est d’assimiler les principes fondamentaux des psychedelic graphics utilisés dans cet exemple vidéo
• La majeure partie de la vidéo a été réalisée avec Blender, mais les techniques de cette série se transposent facilement à d’autres environnements ; Blender est abordé dans la part 3
• Cet épisode 0 et la part 1 mènent à des exemples exécutables sur le Web

Modèles 3D et mapping UV

• Un modèle 3D est une surface faite de points et de faces

  • L’infographie semble être en 3D, mais lorsqu’on écrit du code graphique, il faut souvent raisonner en 2D
  • Quand on crée un modèle dans un logiciel d’édition 3D, on fabrique en réalité des sommets (vertices), c’est-à-dire des points flottant dans l’espace, ainsi que des faces reliant ces sommets
  • Un modèle est une surface creuse, et seul l’extérieur visible à l’écran est rendu
  • Presque toutes les formes 3D des jeux et de l’animation se ramènent à ce système de points et de faces
  • Même les modèles qui paraissent lisses ont souvent simplement assez de points et de faces pour que leurs limites soient difficiles à distinguer

• Une texture est une image 2D appliquée à une surface 3D

  • La méthode standard pour ajouter de la couleur à une surface 3D est le mapping UV / texturing
  • De la même manière qu’une carte du monde en projection 2D peut étirer ou déformer certaines zones, l’image 2D dépliée qui porte les couleurs d’un modèle 3D peut aussi être déformée
  • Cette image 2D dépliée est la texture qui contiendra plus tard les couleurs à appliquer à la surface du modèle 3D
  • Une manière de créer une texture d’image consiste à créer un fichier image vide, puis à décider pour chaque face de l’objet 3D quelle partie de cette image elle utilisera
  • Différentes faces 3D peuvent partager la même zone de texture ; c’est courant, par exemple, sur un corps symétrique où l’on peint un seul côté et où la même zone est assignée aux deux côtés
  • La zone de texture utilisée par chaque face n’a pas besoin d’avoir la même taille ni les mêmes proportions que la face 3D réelle

Peinture de texture et coordonnées UV

• Peindre sur la texture se reflète sur le modèle

  • Tout ce qui est peint sur la texture s’affiche sur le modèle 3D
  • La plupart des logiciels permettent aussi de peindre directement sur le modèle 3D, en coloriant en réalité la texture d’image sous-jacente

• Les coordonnées UV sont des positions 2D sur la texture

  • La zone de texture réservée à chaque face d’un modèle 3D est une UV map, c’est-à-dire un ensemble de données qui relie une partie de la texture d’image au modèle 3D
  • On peut voir les UV comme des coordonnées 2D indiquant une position sur la texture d’image
  • Chaque face 3D est définie par plusieurs points ; lorsque ces points sont placés sur la texture d’image, chacun reçoit des coordonnées UV
  • Dans (0.5, 1.0), la première valeur 0.5 désigne le milieu sur l’axe horizontal, et la seconde 1.0 le sommet sur l’axe vertical
  • Les valeurs UV sont généralement toutes deux comprises entre 0.0 et 1.0, et l’on travaille le plus souvent dans l’espace de coordonnées du rectangle délimité par (0, 0) et (1, 1)
  • Utiliser 0 et 1 au lieu d’une position en pixels permet d’exprimer le déplacement horizontal et vertical sous forme de proportion ; en multipliant par 100, on peut le lire comme un pourcentage
  • Les deux dimensions s’appellent en réalité U et V ; comme X, Y et Z sont déjà utilisés pour la position 3D, on emploie donc le nom UV

Couleurs et types de données en graphisme

• RGB représente une couleur avec trois valeurs

  • En infographie, les couleurs sont généralement exprimées en RGB, c’est-à-dire rouge, vert et bleu
  • La quantité de rouge, de vert et de bleu dans une couleur donnée est le plus souvent une valeur comprise entre 0.0 et 1.0
  • Le rouge s’écrit (1.0, 0.0, 0.0), le noir (0.0, 0.0, 0.0) et le blanc (1.0, 1.0, 1.0)
  • Les notations hexadécimales comme 0xff0000, utilisées dans les graphismes Web, représentent la même information sous une autre forme

• Voir les UV comme des couleurs permet de visualiser les coordonnées

  • Pour visualiser des coordonnées UV, on utilise par convention la première valeur, X, comme rouge, la deuxième, Y, comme vert, et on laisse le bleu à 0.0
  • Les UV (0, 1) deviennent ainsi la couleur (0.0, 1.0, 0.0), qui apparaît en vert
  • Les UV (1, 0) deviennent la couleur (1.0, 0.0, 0.0), qui apparaît en rouge
  • Si l’on colore un rectangle en fonction de sa position UV, plus on va vers le haut à gauche, plus le vert est fort, tandis qu’en bas à droite c’est le rouge qui domine
  • En bas à gauche, le rouge et le vert valent tous deux 0, donc la couleur est noire ; en haut à droite, rouge et vert sont tous deux présents, ce qui donne du jaune

• float, vec2, vec3

  • float est un nombre décimal, c’est-à-dire un nombre à virgule flottante
  • vec signifie vecteur ; vec2 est une paire de deux nombres décimaux et vec3 un groupe de trois nombres décimaux
  • Une couleur RGB comporte trois valeurs — rouge, vert, bleu — et se représente donc avec un vec3
  • Les UV comportent deux valeurs, X et Y, et correspondent donc à un vec2

Mode d’exécution du code graphique d’exemple

• Les exemples de code de cette série n’utilisent pas de modèle 3D séparé, mais une unique surface 3D occupant tout l’écran
• Au lieu d’ajouter de la couleur via une texture d’image, le code détermine directement les couleurs sur la texture d’image
• Le flux de traitement est le suivant
  • La caméra de la scène 3D calcule quelle surface 3D est visible
  • Les coordonnées UV sont calculées à partir de la zone de texture réservée à chaque face, c’est-à-dire le mapping UV
  • Les coordonnées UV calculées et des informations comme la position 3D sont transmises au code
  • Le code décide de la couleur à afficher à cet endroit
• On peut comprendre ce traitement comme quelque chose qui se produit des millions de fois par seconde
• Le code graphique ne trace pas directement une ligne continue d’un point à l’autre de l’écran ; il ressemble davantage à un système qui, lorsqu’une position est sélectionnée, répond quelle doit être sa couleur
• Le code que l’on écrit ne s’exécute pas une seule fois pour produire l’image entière ; il s’exécute pour chaque pixel, c’est-à-dire chaque petite zone de l’écran
• Comme il n’est pas possible de connaître la couleur des autres zones de l’écran, la programmation graphique demande une manière de penser différente, même quand on a déjà de l’expérience en programmation classique
• La part 1 poursuit en montrant comment créer des visuels intéressants malgré ces contraintes

[GN⁺]

Commentaires sur Hacker News

• C’est David Tristram. Dans les années 1990, il était membre fondateur du groupe de performances d’infographie Raster Masters et, comme l’a dit @hopkins, il créait des images de synthèse synchronisées avec des concerts de Grateful Dead, Herbie Hancock ou Graham Nash, sur des stations de travail Silicon Graphics haut de gamme.
  Après plusieurs évolutions, il travaille aujourd’hui surtout dans Resolume Avenue et TouchDesigner, des environnements de traitement vidéo 2D. Ces liens sont inspirants.

  • Je me demande qui étaient les autres membres de Raster Masters, et quelles anecdotes folles il a vécues pendant les concerts de Grateful Dead.
    Aujourd’hui, rien que brancher un projecteur à un ordinateur portable pour une présentation me donne l’impression de lancer les dés à chaque fois, en espérant que l’image apparaisse ; je me demande donc aussi quels projecteurs, calibrages et préparatifs étaient nécessaires à l’époque pour afficher de la vidéo SGI live en haute résolution sur un écran au-dessus du groupe.
  • Je me demande s’il existe des liens vers des travaux que l’on peut voir.
  • Je crois avoir vu certains de leurs travaux lors de quelques concerts des Dead vers 1992.

• Si vous voulez toucher aux graphismes psychédéliques sans descendre trop bas niveau, hydra est pas mal. C’est un environnement de live coding basé sur JavaScript, avec une courbe d’apprentissage douce.

  • Je me demande s’il y en a qui prennent en charge l’entrée musicale. J’aimais beaucoup les plugins de visualisation à l’époque de Winamp, mais aujourd’hui cet art semble avoir disparu.
  • dwitter.net contient aussi beaucoup d’exemples de graphismes psychédéliques réalisés en JavaScript.

• À propos du document original et des coordonnées UV, autrefois on explorait beaucoup les façons de déplacer de manière intéressante les coordonnées de texture UV de chaque sommet d’un maillage rectangulaire.
  À l’époque, on utilisait des couleurs par sommet ; aujourd’hui, on utiliserait plutôt un shader de fragment (pixel), comme ceux qu’on trouve sur ShaderToy. Une approche particulièrement intéressante consiste à advecter les coordonnées de texture le long d’un champ de flux (flow field). Il suffit d’utiliser n’importe quel champ vectoriel 2D et d’appliquer de façon répétée un déplacement à chaque coordonnée. Même une méthode explicite approximative donne de bons résultats.
  Quand les coordonnées sont trop déformées, l’image devient méconnaissable ; une solution simple consiste à appliquer aux coordonnées une force de « restauration » qui les ramène vers leur position d’origine. Elles rebondissent alors vers leur place initiale, comme si l’on dépliait un morceau de feuille miroir.
  Aujourd’hui, j’utilise du feedback avec ce type d’effet de déplacement. En appliquant à répétition de très petits déplacements, on obtient un mouvement assez proche d’un écoulement de fluide.

  • Le melt en PostScript de Jeremy Huxtable fonctionnait de la même manière. C’est aussi la personne qui avait créé les « Big Brother » Eyes de NeWS, qui ont inspiré XEyes.
    Si l’on choisit un rectangle arbitraire et qu’on le copie avec un décalage arbitraire, en répétant l’opération, un effet très numérique, carré et tranchant se transforme, grâce à un peu d’aléatoire (dithering), en un effet doux et organique. Cela marchait bien même en noir et blanc, et au fond ce n’était que du PostScript.
    https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
    Il y a aussi le « Big Brother » eye.ps original de Jeremy. C’était une démo typique montrant une fenêtre NeWS ronde en forme de globe oculaire.
    https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
  • Cela me rappelle le plaisir simple et direct de manipulation de Kai Power Goo.
    LGR: Kai's Power Goo – Classic 90s Funware for PC!
    https://www.youtube.com/watch?v=xt06OSIQ0PE

• J’aime le fait qu’on puisse facilement utiliser des shaders qui s’appliquent aux images en HTML. Je suis assez moyen dans ce domaine, mais c’est agréable de voir jusqu’où les gens peuvent pousser la chose.
  Même une simple approximation de carte de profondeur rend déjà le résultat beaucoup plus intéressant. Il y a quelques années, j’ai réalisé un projet utilisant une technique similaire pour faire un crossfade fluide entre des images avec un « effet intéressant » ; il y a un article et une démo.
  https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

• Honnêtement, l’article Rolling Hills qui accompagne celui-ci est bien plus intéressant.
  Le passage vers le milieu, où le code ci-dessous est appliqué à une image statique, est particulièrement marquant.
  uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
  Pour avoir vécu plusieurs expériences psychédéliques, cela ressemble le plus à l’expérience visuelle réelle, du moins à faible dose non héroïque. En ralentissant un peu les vagues et en réduisant légèrement l’amplitude du mouvement, ce serait probablement encore plus proche.
  Je m’intéresse davantage à la reproduction des hallucinations visuelles induites par les substances psychédéliques qu’à de beaux effets visuels pour des concerts. Cela dit, je respecte évidemment les artistes des deux domaines.
  Il y a un artiste qui crée d’excellentes vidéos psychédéliques avec des outils modernes, mais impossible de me souvenir du nom de son compte. Si je le retrouve, je le laisserai ci-dessous.
  En comparaison avec ce passage de l’article Rolling Hills, cela me fait penser à la scène du thé aux champignons dans Midsommar, surtout celle de l’écorce d’arbre. L’effet où les objets « respirent » et coulent est une expérience visuelle vraiment particulière, et j’aime voir les différentes façons de l’implémenter.

  • Ce n’est peut-être pas le compte mentionné, mais cette chaîne YouTube reproduit bien l’expérience visuelle tout en couvrant d’autres effets.
    Les vidéos montrant la nature, la manière dont les motifs géométriques commencent à se former, ainsi que l’effet de « respiration », sont très convaincantes. La chaîne couvre plusieurs substances, depuis des surfaces qui respirent ou pulsent légèrement jusqu’à des « mondes » géométriques complets comme ceux que l’on peut associer à des substances comme la DMT.
    https://www.youtube.com/@josikinz

• Au début des années 90, Todd Rundgren a sorti l’app Mac Flowfazer. Elle ne simulait pas l’expérience, mais aidait à maintenir le flux en détournant l’attention ailleurs
  Certaines personnes s’en servaient aussi comme guide pour leur propre création
  [1] https://grokware.com/
  [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
  C’était l’époque des économiseurs d’écran et de l’animation de palette

• Si vous aimez ce genre de choses et que vous avez l’occasion de voir Fractaled Visions assurer les visuels lors d’un concert du musicien Tipper, ce sera une expérience incroyable
  C’était la représentation visuelle la plus exacte d’artefacts psychédéliques que j’aie vue jusqu’ici. J’ai assisté à un concert où ils collaboraient l’an dernier, et c’était la meilleure expérience artistique de ma vie. Les visuels de Fractaled Visions avaient une richesse et une complexité presque difficiles à croire
  Même en connaissant assez bien la programmation de shaders et le reste, certains effets m’ont fait me demander : « mais comment ont-ils fait ça ? ». La vidéo du set ci-dessous ne rend pas entièrement l’expérience, mais elle en donne l’ambiance. Vu en 4K 60 fps, c’était d’un tout autre niveau
  https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

• Il faut un lien vers ShaderToy ici : https://www.shadertoy.com

• Ça me rappelle un vieux classique Flash du domaine, Flashback.swf. Le rendu vidéo est ici : https://m.youtube.com/watch?v=KaSqrx93rS0

  • À l’époque de Flash, c’est grâce à cette vidéo que j’ai découvert le groupe de musique électronique Shpongle
    Cette animation utilisait un remix de Divine Moments of Truth, probablement la version « Russian Bootleg ». J’écoutais déjà de la musique électronique avant, mais la première fois que j’ai entendu ce genre-là, ça m’a vraiment fait l’effet d’une claque

• Cette semaine, au travail, j’écrivais des shaders WebGL et je peaufinais les détails pour leur donner l’apparence d’effets de caméra physiques
  Mais parfois, quand je fabrique quelque chose de travers, j’obtiens un résultat proche de ce qui est décrit dans cet article, et franchement c’est bien plus intéressant que les effets d’image standard
  Les cas où c’est exploitable visuellement peuvent être limités, mais jouer avec les modèles que nous avons construits pour comprendre le fonctionnement de l’informatique graphique est une très bonne façon d’apprendre chaque système. On peut y apprendre non seulement le graphisme, mais aussi les mathématiques fondamentales de la programmation, le fonctionnement du GPU et ses liens avec la mémoire et le CPU, le fonctionnement de l’œil, ainsi que la manière de gérer l’animation et le temps