Mixing Kit
Un laboratorio de mixología en 3D: arma cócteles en una barra virtual y mira cómo se llena el vaso en tiempo real
Aprender coctelería suele ser leer recetas: una lista de mililitros que no dice cómo se ve el trago, por qué va en ese vaso ni qué pasa si cambias algo. La intención fue convertir la receta en un juego de barra: que cualquiera pueda experimentar sin gastar una botella, ver el resultado al instante y entender la lógica del oficio mientras juega.
El vaso tenía que comportarse como uno de verdad: el color de la mezcla, el hielo que flota o se hunde, las capas que se separan, la espuma, el derrame si te pasas. Todo eso en el navegador del móvil, sin descargar modelos pesados, y con una interfaz que no tape la escena 3D, que es la protagonista.
Cómo se hizo, paso a paso
- 01Concepto
La receta como experimento
En vez de un recetario, una barra: eliges la cristalería, agregas ingredientes y aplicas técnicas. La receta aparece sola a partir de lo que haces.
- 02Datos
Un recetario serio
205 cócteles (IBA, clásicos modernos, íconos latinoamericanos y mocktails), 218 ingredientes en 8 categorías y 44 vasos con su perfil interior real.
- 03Física
Un vaso que se comporta
La capacidad se calcula integrando el perfil del vaso. El hielo flota por empuje de Arquímedes, los licores densos se hunden en capas y agitar diluye y le quita gas a la mezcla.
- 04Color
Mezclar como la luz
El color se mezcla de forma sustractiva y la opacidad sigue la ley de Beer-Lambert: 20 ml de curaçao tiñen de azul todo el vaso, el vodka casi no aporta color.
- 053D
Todo hecho con código
Vasos, utensilios, frutas, hielo y botellas se generan con geometría procedural en Three.js. Cero modelos o imágenes descargados; los sonidos también se sintetizan.
- 06Motor
Reconocer el cóctel
Cada mezcla se compara con el recetario: si coincide, muestra su nombre y origen; si no, te invita a bautizarla. Calcula volumen, % de alcohol, calorías y tragos estándar.
- 07Interfaz
Escritorio y móvil
Tres columnas en escritorio (ingredientes, barra, tu cóctel) y en el móvil hojas deslizables con navegación inferior, para que la escena 3D ocupe toda la pantalla.
Decisiones que marcaron el resultado
La escena es la protagonista
Los paneles se apartan y la barra de técnicas flota sobre el 3D. En el móvil, los ingredientes y el cóctel son hojas que suben y bajan sin cambiar de pantalla.
Clasificación automática, editable
La app propone cómo se elaboró (construido, agitado, macerado…) y su perfil (aperitivo, digestivo, refrescante…) con una etiqueta «auto», pero el usuario puede corregirla.
Enseñar sin sermonear
Si preparas un cóctel en un vaso distinto al tradicional, una nota sugiere el correcto con un botón para cambiarlo. Aprendes el oficio sin que nada te bloquee.
Ligera y compartible
Sin modelos 3D descargados, tu creación se guarda en el navegador y se comparte con un enlace que contiene la receta entera.
El trabajo
Una simulación no tiene que ser exacta, tiene que ser creíble. Los detalles que más enseñan (el color de la mezcla, el hielo que flota, el vaso que se desborda) son los que hacen que alguien quiera seguir experimentando.
Wander
Proyecto universitario end-to-end: del research al prototipo de alta fidelidad de una app móvil offline-first para viajeros.
