Full-stack · Front · Back · Hardware

Del navegador al metal.From the browser to the metal.

Soy Pablo Ortiz, desarrollador full-stack. Diseño y construyo el producto entero. La aplicación web, el firmware, y el hardware que se mueve. I'm Pablo Ortiz, a full-stack developer. I design and build the whole product — the web interface, the server and firmware, and the electronics that drive it.

▶ Abrir el secuenciador▶ Open the sequencer Ver el proyecto ↓See the project ↓ LinkedIn GitHub

JavaScript C++ ESP32 Firmware tiempo realReal-time firmware PWA

Un proyecto, tres disciplinasOne project, three disciplines

Un robot que toca el piano de verdad, y todo lo que hay detrásA robot that really plays the piano — and everything behind it

Frontend

La aplicación webThe web app

Un secuenciador musical completo que funciona dentro del navegador: editor visual de notas, análisis de la música en tiempo real y la interfaz que manda al robot qué tocar. Compatible con MIDI, arrastrar y soltar, y MML.A full music sequencer that runs inside the browser: a visual note editor, real-time music analysis and the interface that tells the robot what to play. Compatible with MIDI, drag and drop, and MML.

~30 módulos · PWA instalable~30 modules · installable PWA

Abrir la app ↗Open the app ↗

Backend · Firmware

El cerebro del robotThe robot's brain

El programa que vive dentro del chip: recibe la música por WiFi o por cable, la coordina y decide milisegundo a milisegundo qué mueve cada motor y qué luz se enciende. C++ sobre ESP32.The program that lives inside the chip: it receives the music over WiFi or cable, coordinates it and decides millisecond by millisecond which motor moves and which light turns on. C++ on ESP32.

Tiempo real · protocolo propioReal-time · custom protocol

Ver el firmware ↗View the firmware ↗

Hardware

La máquina físicaThe physical machine

Electrónica, motores y piezas diseñadas e impresas en 3D. Hasta 128 dedos robóticos que pulsan las teclas y 60 luces que se encienden con cada nota, como en un piano de Synthesia.Electronics, motors and parts designed and 3D-printed. Up to 128 robotic fingers pressing the keys and 60 lights that fire with every note, Synthesia-style.

128 servos · 60 LEDs

Ver las piezas 3D ↗View the 3D parts ↗

Por qué tiene méritoWhy it's hard

Lo difícil no se ve, pero estáThe hard part is invisible — but it's there

Tiempo real de verdadReal real-time

Coordinar decenas de motores, luces y sonido con precisión de milisegundos, y que el sistema se autocorrija solo cuando empieza a desincronizarse. No es "que funcione": es que no se note el desfase.Coordinating dozens of motors, lights and sound with millisecond precision, and having the system self-correct when it starts drifting. It's not "make it work": it's make the lag invisible.

Dos mundos, un lenguajeTwo worlds, one language

Diseñé un protocolo de comunicación propio que funciona igual por WiFi que por cable USB. La app no necesita saber cómo está conectado el robot — simplemente habla, y el robot obedece.I designed a custom communication protocol that works the same over WiFi as over USB. The app doesn't need to know how the robot is connected — it just speaks, and the robot obeys.

Sin frameworks, sin atajosNo frameworks, no shortcuts

La aplicación web está construida a mano, con la arquitectura pensada de cero. Demuestra que entiendo lo que ocurre por debajo, no solo cómo encajar piezas que ya hizo otro.The web app is built by hand, with the architecture designed from scratch. It shows I understand what happens underneath, not just how to wire together pieces someone else made.

Interfaz del secuenciador musical web construido por Pablo Ortiz

La parte softwareThe software side

No solo mueve motores: entiende músicaIt doesn't just move motors: it understands music

El secuenciador web no se limita a reproducir notas. Las analiza mientras compones —detecta la tonalidad, los acordes y las cadencias— y les aplica una capa de interpretación expresiva antes de enviarlas al robot.The web sequencer doesn't just play notes back. It analyzes them as you compose — detecting key, chords and cadences — and applies a layer of expressive interpretation before sending them to the robot.

Editor visual de notas con arrastrar y soltarDrag-and-drop visual note editor
Análisis armónico en tiempo real, sin frenar la interfazReal-time harmonic analysis without freezing the UI
Importación y exportación de archivos MIDI estándarStandard MIDI file import and export
Compatible con Synthesia y cualquier reproductor MIDI (USB-MIDI)Works with Synthesia and any MIDI player (USB-MIDI)

▶ Probar el secuenciador▶ Try the sequencer

La construcciónThe build

El robot por dentroInside the robot

Servos ES08MA, piezas diseñadas e impresas en 3D, cableado y una tira de LEDs — todo montado y ajustado a mano, pieza a pieza.ES08MA servos, parts designed and 3D-printed, wiring and an LED strip — all assembled and tuned by hand, piece by piece.

Vista panorámica del robot pianista completo — Robot completo — vista panorámicaFull robot — panoramic view

Servos ES08MA en detalleES08MA servos, close-up

Cableado completo de los servos — Cableado de los servosServo wiring

Teclas negras con LEDs — Teclas negras + LEDsBlack keys + LEDs

Mecanismo completo visto desde abajo — Mecanismo completoFull mechanism

LEDs en perspectiva interior — Iluminación — vista interiorLighting — interior view

⬇ Descargar las piezas 3D (STL) en Printables⬇ Download the 3D parts (STL) on Printables

Stack

Con qué trabajoWhat I work with

Todo lo de abajo lo he usado de verdad, construyendo y depurando un sistema real de principio a fin.Everything below I've actually used, building and debugging a real system end to end.

Frontend

JavaScript (ES6 modules)HTMLCSS PWAWeb Audio APIWeb Serial API WebSocketWeb Workers Arquitectura modularModular architecture

Backend · EmbebidoBackend · Embedded

C++ESP32 / ESP32-S3 Firmware tiempo realReal-time firmware WebSocket serverSerial / USB Diseño de protocolosProtocol design Scheduling de eventosEvent scheduling

Hardware

Electrónica de servosServo electronics PCA9685LEDs WS2812BI²C Diseño 3D3D design Impresión 3D3D printing

Herramientas · ConceptosTools · Concepts

Git / GitHub AlgoritmosAlgorithms Análisis armónicoHarmonic analysis Depuración de sistemasSystems debugging Autonomía end-to-endEnd-to-end autonomy

ContactoContact

¿Hablamos?Let's talk?

Disponible para incorporarme a un equipo. Encantado de enseñar el proyecto en detalle o resolver cualquier duda técnica.Available to join a team. Happy to walk through the project in detail or answer any technical questions.

LinkedIn → Email GitHub Ver el proyecto completo + vídeoSee the full project + video