P(doom) Video en 2026: Cómo Nace un Videoclip Musical del Código

Hola HaWkers, el proyecto abierto pdoom-video transforma una canción en un videoclip cuyas imágenes se calculan a partir del tiempo de la pista. Según el propio repositorio, la vista previa funciona en el navegador y la exportación utiliza la misma lógica para producir vídeo a 1080p y 60 fotogramas por segundo, con una opción de renderizado en 4K. Es un ejemplo concreto de arte generativo en el que el código sirve a la dirección visual, a la letra y al ritmo.

¿Qué puedes aprender de un proyecto así sin copiar su estética ni su música? En este artículo separaremos las decisiones creativas de las técnicas, reproduciremos una versión pequeña de su principio central y examinaremos los límites de rendimiento y de derechos de autor. El resultado es un método para pensar tu propio videoclip, visualizador musical o pieza interactiva.

¿Qué diferencia a este videoclip de un vídeo montado a mano?

En un editor tradicional, colocas elementos en una línea de tiempo y guardas el resultado. Aquí, cada fotograma se calcula a partir de una pregunta: ¿qué debe aparecer en el instante t de la canción? La documentación del motor del proyecto describe la escena como una función determinista del tiempo. Al solicitar de nuevo el mismo instante, el renderizador debe producir la misma composición. Eso permite inspeccionar un fotograma aislado, regresar a una palabra concreta y exportar sin depender de todo el recorrido previo de la reproducción.

El proyecto utiliza TypeScript, three.js y una aplicación web para la vista previa. El archivo de música, los tiempos de las palabras y los análisis de audio entran como datos; las escenas viven en módulos separados. Durante la exportación, un navegador sin interfaz genera los fotogramas y ffmpeg compone el archivo final. Esta división importa porque el creador puede revisar composición, movimiento y sincronización por etapas. El videoclip no sale terminado de un único comando: la dirección visual y las correcciones siguen siendo trabajo editorial.

También existe una distinción importante entre vídeo generado por código y vídeo generado por un modelo de imágenes. El README atribuye la construcción del proyecto a una colaboración con Claude Code, pero los fotogramas finales los dibuja el renderizador escrito para la obra. La IA participó en el proceso de creación del software; no reemplaza automáticamente las decisiones de encuadre, ritmo y revisión. Cada escena se puede rehacer, examinar y modificar.

La música, las palabras y el tiempo son los verdaderos datos de entrada

La sincronización no comienza eligiendo una transición llamativa. Comienza definiendo qué acontecimientos de la canción controlan la imagen. El repositorio guarda tiempos de la letra por palabra, además de pulsos, secciones, ataques de instrumentos y medidas de intensidad. Su documentación menciona separación de fuentes sonoras, alineación forzada de la letra y comprobación mediante reconocimiento de voz durante la preparación de esos datos. Para ejecutar el renderizador con los datos ya incluidos en el repositorio no es necesario repetir todo ese análisis.

Esa separación evita un error habitual: programar la aparición de una frase en un segundo elegido solo de oído y descubrir, después de una edición, que ya no coincide con la voz. Si una escena se ancla a una palabra y otra a un pulso, la intención queda explícita. Puedes mover una escena y seguir comprobando qué verso o acontecimiento musical la justifica. Lo mismo ocurre con la tipografía de karaoke: cada palabra necesita su propio inicio y final para que el resaltado siga la interpretación, no únicamente la línea completa.

El autor señala en el README que el tempo analizado ronda los 132 pulsos por minuto. Ese número pertenece a la canción usada en el proyecto; no es una regla para otros videoclips. Antes de reutilizar la idea, obtén los datos de tu pista y valida visualmente los puntos de corte. Una marca de pulso técnicamente correcta puede caer en un momento poco adecuado para el sentido de la letra. Escucha, mira, ajusta y compara otra vez.

Cómo probar la vista previa sin renderizar el vídeo completo

La ruta más corta consiste en abrir la aplicación del propio proyecto. El README indica Bun para instalar dependencias y Vite para iniciar la vista previa; Chrome y ffmpeg forman parte del flujo de exportación. Si quieres estudiar la dirección visual, la vista previa basta para comenzar: puedes pausar, avanzar fotograma a fotograma y alternar escenas antes de invertir tiempo en la codificación final.

# Clona el código abierto y entra en la aplicación del videoclip.
git clone https://github.com/mexicat/pdoom-video.git
cd pdoom-video/app
bun install
bunx vite

La vista previa se abre en http://localhost:5173; el parámetro ?t=23 inicia en un instante concreto, de acuerdo con la documentación. La barra espaciadora pausa, las flechas avanzan o retroceden, y la coma y el punto permiten examinar fotogramas. Los atajos ayudan a responder una pregunta creativa precisa: ¿comunica el fotograma la idea cuando la música llega a esa palabra?

Para una revisión fiable, elige tres momentos: el comienzo de una frase, el punto de mayor energía y el paso a la siguiente escena. Compara el tamaño de la letra, el contraste y la legibilidad en cada uno. Una composición puede parecer excelente en pausa y volverse ilegible cuando entra el movimiento. La vista previa rápida sirve para descubrir estos problemas antes del renderizado costoso.

Un pequeño experimento con fotogramas deterministas

No necesitas reproducir toda la arquitectura de pdoom-video para poner a prueba el concepto. Un canvas y una función que recibe el tiempo ya permiten dibujar un elemento que responde a la música. El siguiente ejemplo crea una barra que pulsa y muestra una palabra solo dentro del intervalo elegido. Los tiempos son valores de demostración: no representan la letra ni los tiempos del proyecto original.

<canvas id="palco" width="960" height="540"></canvas>
<script>
  const canvas = document.querySelector('#palco');
  const ctx = canvas.getContext('2d');

  function quadro(tempo) {
    // La misma entrada de tiempo produce siempre la misma imagen.
    const pulso = (Math.sin(tempo * 6) + 1) / 2;
    const mostrarPalavra = tempo >= 2 && tempo < 3.2;
    ctx.fillStyle = '#101820';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#f3b54a';
    ctx.fillRect(100, 390, 760 * pulso, 18);
    if (mostrarPalavra) {
      ctx.font = 'bold 72px sans-serif';
      ctx.fillText('CRIE', 100, 270);
    }
  }

  quadro(2.5); // Cambia el tiempo para inspeccionar otro fotograma.
</script>

El ejemplo es deliberadamente sencillo. En una obra real, el ancho de la barra podría venir de la intensidad medida de la pista y el intervalo de la palabra, de un archivo de alineación. El principio, sin embargo, se mantiene: quadro(t) depende de t y de datos conocidos, no de cuántas veces se ejecutó ya la animación. Por eso puedes volver a una escena para revisar un detalle sin esperar a que se reproduzca toda la secuencia anterior.

Si quieres introducir partículas o una textura aleatoria, utiliza una semilla estable derivada del tiempo o de la identidad del elemento. Llamar a Math.random() en cada renderizado puede producir un resultado diferente al pedir el mismo fotograma. La guía del proyecto recomienda explícitamente usar aleatoriedad con semilla para las escenas deterministas. Esta decisión importa todavía más cuando la exportación calcula varias muestras de un fotograma para simular desenfoque de movimiento.

De la vista previa a la exportación: ¿por qué sube tanto el coste?

Exportar no equivale a grabar la pantalla del navegador. El script del repositorio pide al navegador fotogramas en instantes definidos y envía la secuencia a ffmpeg. Con la configuración habitual descrita en el README, el vídeo final se produce a 1920 × 1080 píxeles y 60 fotogramas por segundo, con vídeo x264 y audio AAC. Existe un modo de 4K que renderiza las capas a la resolución mayor; no se limita a ampliar una imagen ya terminada.

# Genera una versión corta para evaluar el movimiento y los cortes.
cd pdoom-video/app
bun scripts/render.ts video --from 20 --to 25 --out ../out/teste.mp4 --preset veryfast

# Después de revisarla, exporta el videoclip completo.
bun scripts/render.ts video --samples auto --shutter 0.2 --out ../out/clipe.mp4

El primer comando sigue el ejemplo de prueba corta de la guía del motor. El segundo usa el flujo completo documentado en el README. Antes de ejecutarlos, confirma que Chrome y ffmpeg estén disponibles y que exista el directorio de salida. Una prueba corta revela bloqueos, cortes bruscos y problemas de tipografía mucho antes que un renderizado completo. También facilita comparar dos versiones de una escena sin convertir cada ajuste en una larga espera.

El recurso que más cambia el coste es el desenfoque de movimiento mediante muestreo. En lugar de calcular una única imagen por fotograma, el renderizador combina imágenes de instantes cercanos. El README explica que la selección automática utiliza más muestras en movimientos rápidos. Esto mejora la continuidad de un zoom o de un desplazamiento brusco, pero multiplica el trabajo de la GPU. El autor describe hasta 324 subfotogramas en fragmentos rápidos; se trata de un límite del flujo documentado, no de una promesa de rendimiento para cualquier ordenador.

Existe, además, un coste de codificación. El grano de película y los detalles finos son difíciles de comprimir, sobre todo en 4K. Si tu objetivo es publicar en la web, compara calidad visual, tamaño del archivo y tiempo de exportación. Una versión de revisión puede utilizar pocas muestras; la versión final solo necesita invertir más recursos donde la diferencia se perciba.

La IA ayuda a escribir escenas, pero alguien debe dirigirlas

El README afirma que el concepto, el tratamiento, el análisis de audio, el renderizador y las escenas se desarrollaron en conversación con Claude. Por eso el proyecto también interesa a quienes siguen las herramientas de IA. La contribución que podemos examinar es el proceso abierto: hay documentación del lenguaje visual, módulos de escena, datos de sincronización y comandos de vista previa. Podemos estudiar cómo se transformaron las decisiones en artefactos editables.

Un flujo útil para proyectos propios consiste en escribir primero una intención breve para cada fragmento: qué emoción debe transmitir, qué palabra recibe énfasis y qué debería cambiar en el ritmo visual. Después convierte esa intención en una escena pequeña y obtén una imagen estática del momento principal. Avanza a la animación y a la exportación cuando la composición ya sea legible. Una herramienta de IA puede sugerir alternativas de código o de tratamiento, pero la revisión debe comparar el resultado con la intención.

Esta práctica se relaciona con nuestro artículo sobre las animaciones generativas como encuentro entre arte y programación. Pueden cambiar el lenguaje y la herramienta, pero la pregunta creativa se parece: ¿qué reglas producen una imagen expresiva y cómo decides si merece quedarse? En pdoom-video, la respuesta depende también del tiempo musical y de la lectura de cada verso.

El código abierto no libera automáticamente la música

Hay una trampa fácil al encontrar un proyecto visual en un repositorio público: suponer que todo lo que contiene se puede reutilizar de la misma manera. El README indica que el código se distribuye bajo licencia MIT, mientras que las fuentes conservan sus propias licencias y la música y la letra pertenecen a sus respectivos autores. Esto importa tanto si publicas una versión modificada como si utilizas fragmentos en una demostración comercial o en redes sociales.

Si quieres aprender del proyecto, estudia la arquitectura y crea escenas con recursos propios. Si quieres reutilizar audio, letra, tipografía o renderizados, comprueba la licencia específica de cada material y consigue los permisos necesarios. La autoría de un renderizador y la autoría de una obra musical son cuestiones distintas. Citar la fuente es una buena práctica editorial, pero el crédito por sí solo no sustituye la autorización cuando se exige.

Conviene distinguir asimismo entre inspirarse en el método y copiar la identidad visual. La documentación del proyecto describe elecciones de color, composición y transiciones pensadas para esa canción. Para un videoclip tuyo, empieza por los significados y los ritmos de tu propia pista. Si la primera decisión consiste en replicar el efecto más llamativo del ejemplo, el resultado corre el riesgo de parecer una demostración técnica sin relación con la música.

Qué llevar a tu próximo proyecto creativo

Pdoom-video muestra que un videoclip generado con código puede ser, al mismo tiempo, una obra visual y un sistema reproducible. La lección central no es una biblioteca concreta: es dar una intención a cada escena, vincular los acontecimientos visuales con datos de audio verificables y mantener la vista previa cerca de la exportación. Así puedes corregir una palabra que entra tarde, revisar un encuadre y comparar versiones sin perder la obra dentro de una secuencia opaca de pasos manuales.

Empieza con algo pequeño: elige un fragmento corto de música que puedas usar, marca una palabra y un pulso, dibuja un fotograma determinista y exporta solo unos segundos. Después mira el vídeo con sonido y pregúntate si el movimiento acompaña el sentido de la pista. El siguiente paso puede ser la tipografía, la profundidad, el desenfoque o una escena nueva. La mejora real aparece cuando cada recurso resuelve un problema expresivo identificable.

Proyectos como este también dejan una pregunta para el futuro de la creación digital: si escribir escenas se vuelve más rápido con ayuda de IA, ¿dónde concentramos nuestra atención? Probablemente en elegir qué mostrar, evaluar el resultado y asumir la responsabilidad por el material utilizado. Esas partes siguen siendo visibles para quien mira el videoclip, incluso cuando el código permanece detrás de las imágenes.

¡Vamos con todo! 🦅

📚 ¿Quieres Seguir lo Que Viene Por Delante?

Este artículo recorrió la creación de un videoclip musical con código, pero el ecosistema cambia cada semana y no todo se convierte en un artículo aquí.

En X comparto lo que estoy probando, los avances de mis proyectos y las novedades que aparecen antes de convertirse en una publicación.

Sígueme Allí

👉 Seguir a @jeffbruchado en X

💡 Contenido diario sobre desarrollo, carrera y las herramientas que uso de verdad