Laboratorio

Mercurio Reactivo

Acá muestro experimentos hechos con código y cómo replicarlos con prompts. Cada uno trae las tecnologías con las que está construido y los prompts divididos por partes, para que puedas armarlo vos y de paso estudiar cómo están pensados

El sonido arranca cuando tocás «Tema de prueba» o cargás una canción. Probá con una canción que tengas en tu dispositivo y mirá qué se genera. Es gratis

Aprendé a hacerlo

Tecnologías

Mercurio Reactivo dibuja una escena 3D, analiza el audio en tiempo real y mueve la figura según lo que suena. Está hecho con estas tecnologías, todo en un solo archivo HTML

  • JavaScript
  • HTML
  • CSS
  • Three.js
  • Shaders GLSL
  • Web Audio API
  • EffectComposer

Dónde pegarlos

Si querés construirlo vos, los prompts de más abajo lo arman parte por parte. Antes de usarlos, fijate dónde pegarlos

En ChatGPT, en el chat normal. El modo agente no sirve para esto

Usá como mínimo el modelo más grande que tengas, con razonamiento si lo ofrece. Los modelos chicos o gratuitos tienden a resumir y dejar errores, y aun con modelos buenos contá con 1 a 4 rondas de corrección

Los prompts generan la versión base, sin logo

Cómo se usan

  1. 01Abrí un chat nuevo
  2. 02Mandá los mensajes de a uno y en orden, nunca todos juntos
  3. 03De cada respuesta, copiá solo el bloque de código y pegalo en un archivo mercurio-reactivo.html, debajo del anterior
  4. 04Compará lo que te devuelve con la entrega esperada de esa parte. Si faltan nombres, respondé: «Te faltan [nombres]. Escribilos completos sin resumir»
  5. 05Si la respuesta termina en CONTINÚA, escribí «seguí» y pegá la continuación
  6. 06Al terminar la parte 10, mandá el Repaso en el mismo chat y aplicá los arreglos que te devuelva
  7. 07No le pidas que una todo en un archivo: se pierden partes
  8. 08Abrí el archivo en Chrome. Si la consola (F12) muestra un error, usá el mensaje de Corrección

Los prompts

Parte 1

Página, estilos y estado global

Entrega esperada: ~120 líneas. Nombres: mtof, clamp, clamp01, lerp, rnd, ease, snap, easeOutBack, strength, beatSec, six, VIS_S, todas las variables globales de la lista

Parte 2

Motor de audio e instrumentos

Entrega esperada: ~235 líneas. Nombres: curveOf, shaper, makeImpulse, initAudio, noise, kick, pump, clap, hat, ride, crash, metal, perc, stab, zap, riser, downlifter, drone, acidNote

Parte 3

Composición del tema y secuenciador

Entrega esperada: ~120 líneas. Nombres: SCALE, makeRiff, mutate, KICKS, SONG, STAB_STEPS, HOOK_CHORDS, PERC, HATV, screech, scheduleStep, scheduler

Parte 4

Pre-análisis de una canción cargada

Entrega esperada: ~235 líneas. Nombres: bqc, fftInPlace, analyzeSong, stopSynth, playSong

Parte 5

Análisis en vivo, voz y compensación de latencia

Entrega esperada: ~170 líneas. Nombres: setupBins, setupStems, detectStems, simulate, avLag, voiceFeatures, analyze

Parte 6

Escena, postproceso y núcleo de mercurio

Entrega esperada: ~230 líneas. Nombres: renderer, scene, LILA, ROJO, LILA_H, acidEnv, camera, controls, composer, echoPass, fxPass, gradePass, glitchPass, grade, mercury, fib, group, dummy, UP, tmp, tS, NL, uniforms, GLSL (con snoise, voxField, dispF), coreMat, core, MERC, merc

Parte 7

Puntas, anillos y esquirlas

Entrega esperada: ~245 líneas. Nombres: curSec, EL, patternDir, pushLobe, freeSlot, basisOf, jitterDir, CONE, spikeMesh, RES, SP, impactSpikes, spike, needles, kickStyle, HALO, onEventSpikes, updateSpikes, RINGS, ring, updateRings, shardMesh, SH, shards, updateShards

Parte 8

Rayos de plasma y esfera de energía

Entrega esperada: ~330 líneas. Nombres: writeBolt, mpd, newPath, ROOTP, GHOST_TAU, ROOTS, BR, COR, RRING, GH, ghost, taper, strokeMul, strokeTimes, branchColor, addBranch, hitRays, boltRing, orbMat, orb, aura, updateOrb, updateRays

Parte 9

Explosiones, controles e interfaz

Entrega esperada: ~200 líneas. Nombres: BOOM_DIRS, spiralQ, explode, release, updateCharge, TARGETS, CORES, ensureAudio, drawDec, exprBias, mapCurve, showProfile, drawTimeline, resize, FOV

Parte 10

Estado general, combinado y loop principal

Entrega esperada: ~245 líneas. Nombres: SEC_PRIOR, updateArousal, MIXPLAN, clock, frame, la llamada final frame()

Repaso

Revisión de los errores típicos

Corrección

Arreglar un error de la consola

Siguiente paso

¿Querés aprender más?

Estudiar estos prompts te va a ayudar a entender mejor este proyecto, cómo está conformado y cómo funcionan sus partes. Para entender por qué se tomaron algunas decisiones, es necesario profundizar en la lógica de programación. Eso no hace falta que lo hagas solo. Zero te puede ayudar con eso.

Ver clases