Gráficos psicodélicos 0: Introducción

Psychedelic Graphics 0: Introducción

• Esta serie presenta cómo crear visuales psicodélicos para animación y juegos. Está pensada para que pueda entenderse incluso sin conocimientos previos de gráficos o programación. Tener conocimientos básicos de trigonometría y programación será de ayuda.
• Espero que esta serie te ayude a entender los fundamentos de los gráficos psicodélicos usados en el video. La mayoría de los videos fueron creados con Blender, pero las técnicas enseñadas en esta serie pueden trasladarse fácilmente, y más adelante se profundizará en Blender.

¿Qué es UV?

Modelo 3D

• Los gráficos por computadora a menudo parecen 3D, pero al escribir código gráfico muchas veces hay que pensar en 2D. Si creaste una forma hermosa en un programa de modelado 3D, en realidad lo que hiciste fue crear puntos flotando en el espacio (vértices) y conectar algunos de ellos para formar figuras sólidas (caras).
• La mayoría de los modelos 3D están vacíos y solo podemos ver su superficie. La forma estándar de aplicar color a un modelo 3D es el mapeo UV/texturizado. Así como una proyección 2D de la Tierra se ve un poco estirada y comprimida, algo similar ocurre cuando el color de un modelo 3D se proyecta en 2D.

Pintura de texturas

• Al pintar una textura, esta aparece en el modelo 3D. La mayoría del software permite pintar directamente sobre el modelo 3D para colorear una textura de imagen.

Coordenadas UV

• UV puede entenderse como una posición, es decir, coordenadas 2D. Las coordenadas UV se definen usando un espacio que va de (0, 0) a (1, 1). El mapa UV es la información que conecta una textura de imagen a color con las caras del modelo 3D.

Cómo funciona el código gráfico

El color en los gráficos

• Los colores en gráficos por computadora suelen representarse como RGB. Con una mezcla de rojo, verde y azul se puede crear casi cualquier color que el ser humano puede percibir. En gráficos por computadora, la cantidad de rojo, verde y azul normalmente va de 0.0 a 1.0.

El color de UV

• Las coordenadas UV se convierten en color para ayudar con la visualización y la resolución de problemas. El primer valor de UV (valor X) se usa como rojo, y el segundo valor (valor Y) como verde.

Punto flotante y vectores vec2, vec3

• float es un número decimal individual. vec significa vector; vec2 está compuesto por dos números decimales y vec3 por tres números decimales.

Estructura de un programa gráfico

• Los gráficos deben ajustarse de manera distribuida. El código no se ejecuta una sola vez para generar todos los colores, sino que se ejecuta millones de veces para cada pequeña parte de la pantalla. Si tienes experiencia programando, es una forma de pensar muy distinta.

• Ahora ya estás listo para comenzar la parte 1. En la parte 1 podrás ver cómo crear visuales interesantes a pesar de estas limitaciones.

[GN⁺]

Comentarios de Hacker News

• David Tristram fue miembro fundador de Raster Masters, un grupo de performance de gráficos por computadora de los años 1990, y producía imágenes sintetizadas para acompañar música en vivo de Grateful Dead, Herbie Hancock, Graham Nash y otros usando estaciones de trabajo Silicon Graphics

  • Actualmente trabaja principalmente con Resolume Avenue y TouchDesigner en un entorno de procesamiento de video 2D
  • Hydra es un interesante entorno de live coding basado en JavaScript para experimentar con gráficos psicodélicos sin tener que irse a bajo nivel

• En el pasado investigó métodos para deformar coordenadas de textura UV, y ahora usa fragment shaders como los de ShaderToy

  • Resulta interesante el proceso de desplazar coordenadas de textura siguiendo un campo de flujo
  • También hay una forma simple de aplicar una fuerza de "restauración" para que las coordenadas regresen a su posición original
  • Combina retroalimentación y efectos de desplazamiento para generar movimiento similar al flujo de fluidos

• Le gusta que sea fácil escribir shaders para procesar imágenes en HTML

  • Incluso con una aproximación simple de un mapa de profundidad se pueden obtener resultados interesantes
  • En el pasado realizó un proyecto usando WebGL para suavizar el crossfade entre imágenes

• Tiene mucho interés en recrear visualmente experiencias psicodélicas

  • En el artículo de Rolling Hills explica cómo recrear alucinaciones visuales
  • Hay artistas que implementan muy bien visuales psicodélicos usando tecnología moderna

• Todd Rundgren desarrolló a inicios de los años 1990 una app para Mac llamada Flowfazer, que ayudaba a los usuarios a inspirarse para crear

• Las presentaciones de Tipper y Fractaled Visions fueron una de las descripciones más precisas de visuales psicodélicos

  • Los visuales de Fractaled Vision eran complejos y ricos, y causaban asombro

• Mientras escribe shaders de WebGL, está intentando implementar efectos de cámara física

  • Eso ayuda a mejorar la comprensión de gráficos, matemáticas, GPU, memoria, CPU, animación y manejo del tiempo

• La investigación de Jim Crutchfield sobre sistemas de retroalimentación de video proporciona un sistema experimental útil para estudiar dinámicas espaciales y temporales complejas