El Viaje (The Journey)
Cinco canciones. Cinco capítulos. Cinco videos hechos con código.
Desplázate para entrar a Loopville
El mismo día, otra vez.
Loopville repite su día cada 32 compases: El mismo tren, el mismo semáforo, la misma gente. ORI toca el bajo y su slap deja una estela que nadie ve. Hasta que un píxel que no debería existir rompe el patrón.
Cada canción es un capítulo.
Cinco temas, 21:04 en total. Un video por tema, hecho con código, que sale el mismo día que la canción.
-
Infinite Loop
4:48 Disponible desde el
ORI vive el mismo día hasta que rompe el patrón.
Color del mundo: Gris y cian
→ Chromosphere
-
Chromosphere
3:48 Llega en octubre de 2026
Cae a una atmósfera donde cada color dura un compás.
Color del mundo: Estallidos que se apagan
→ Eternal Delay
-
Eternal Delay
3:46 Próximamente
Cada nota vuelve un compás tarde.
Color del mundo: Invertido
-
Cosmic Dub
4:14 Próximamente
Mundos dentro de mundos.
Color del mundo: Un color por nivel
-
Threshold
4:28 Próximamente
La nota que nunca tocó nadie.
Color del mundo: Todo el espectro
Capítulo 01: Infinite Loop
Este cuadro lo dibuja código
La misma cadena que dibujó el video, corriendo en tu navegador. Desplázate: Cada línea se suma al cuadro. Después cambia los valores.
Lo que arma la escena: 5 capas
Mundo
Luz
Profundidad
ORI
Contador
post.js: Las junta e imprime el cuadro
post.js, la cadena de post del capítulo 01
1// La paleta: La elige una persona.2post.colores.brand = rgb('') // la tinta cian3post.colores.fg = rgb('') // el papel4// Los efectos: 0 apaga cada uno.5post.render({ // tinta: , // dibuja el contorno // halftone: , // la luz se vuelve puntos // paso: , // px entre punto y punto // registro: , // corre el cian, a 15° // bloom: , // el cian brilla // papel: , // la luz se imprime en puntos // grano: , // el grano del papel13})Prueba paso: 14 o la plancha en '#FF2BD6' (↑ ↓ ajustan). El número de línea la comenta.
La historia se escribe en compases
// mundo.js: Las reglas de Loopville.
// c es el compás en curso: 1, 2, 3…
// El semáforo cambia cada 2 compases:
// Siga en el 4, 8, 12…;
// pare en el 2, 6…
const par = c - mod(c, 2)
return mod(par, 4) === 0 ? 'siga' : 'pare'
// El peatón 7 y el tren
// siguen la misma idea.
// Un día son 32 compases.
// tramos.js: La historia, en compases.
// 'c17.2' es el compás 17, tiempo 2;
// tr.f() lo pasa a número de cuadro:
tr.f('c17.2') // → 859, el golpe
Un slap, cuadro a cuadro
Compás 17, el drop. 48 cuadros: ORI salta de la cama y toca. A 30 fps cada cuadro dura 48000 / 30 = 1600 muestras del audio: Imagen y sonido cortan en la misma muestra. Muévelos con el scroll.
- salta y suena THWOK
- f859
- el punto más alto del salto, a 0,39 m
- f868
- aterriza en la pose héroe, con el segundo slap
- f876
En cian, las 25 poses de los 48 cuadros: Una cada 2; los golpes de f859 y f876 la reinician.
f850 en pantalla
Capítulo 01, tramo 1 (aprobado el 9 de octubre de 2026). ORI se dibuja en dos, contados desde el último golpe, y en tres en la calma; en unos, una sola vez en todo el video. A 60 fps el render tardaba el doble y la imagen no mejoraba.
// tramos.js: El cuadro donde se dibuja
// la pose de ORI (n = 2 desde el drop)
return Math.max(seg, ancla +
Math.floor((fx - ancla) / n) * n)
De lejos, un damero
36 cuadros del capítulo 01. Acércate al que falta.
Cada punto es una decisión.
Lo que de lejos parece una imagen, de cerca son miles de puntos. En el video, cada uno se decidió y se dibujó con código, 30 veces por segundo, al ritmo de la música.
