🎹 Mi Generador de Diagramas de Piano
Hace un poco más de lo que imaginas
Cómo empezó todo esto
Esto nació de experimentar con JavaScript, y con tener algo de tiempo y también de necesidad para recursos de enseñanza. En algunos casos resulta mucho más sencillo usar estos diagramas en vez de partituras, sobre todo para comunicar rápidamente acordes, posiciones y algunos conceptos a los que están iniciando con el piano (tal vez incluso los que llevan un año tocando se benefician de algunas cosas que puede haber aquí para cosas de teoría más avanzada). Si no quieres leer tanto, puedes simplemente 🎹 Probar el generador
Traté de hacer esto lo más intuitivo de usar y lo más agnóstico a sistemas operativos y plataformas, de manera que es una aplicación web que se puede usar en casi que todo dispositivo. Para usarlo se seleccionan las notas que quieres mostrar, ajustas un par de cosas, y listo, tienes una imagen en formato versátil para usarla donde quieras.
Más detalles: cuatro formas de generar diagramas de piano
- Nota individual: Para cuando quieres mostrar dónde está cada nota por separado, ideal para enseñar a leer con pentagrama o algún juego para identificar las notas en el piano
- Notas múltiples: Para intervalos y acordes – se puede resaltar hasta 8 notas en el mismo diagrama.
- Cuadrícula de una sola nota: Crea una tabla de hasta 3×3 con diferentes diagramas, una nota en cada uno, ideal para mostrar fragmentos melódicos o anotar escalas
- Progresiones de acordes:Hasta 8 acordes en una cuadrícula de 2×8. Ideal para mostrar secciones de canciones pop obviamente. Sobretodo es útil cuando aún no se han terminado de memorizar las inversiones.
Nombres de notas en las teclas
Se me hace un poco redundante ponerle nombres de notas a las teclas del piano, pero tal vez ayude a interiorizarlas y uno se ahorra gastar cinta innecesariamente y ojalá la frustración. Aquí puedes elegir entre el sistema americano (C-D-E) o solfeo (Do-Re-Mi), y las teclas negras las puedes mostrar como sostenidos o bemoles según te convenga. Eso sí, no se pueden mezclar sostenidos con bemoles.
Lo de las funciones numéricas
Esto fue algo que agregué después, cuando me di cuenta que tal vez se le puede prolongar la utilidad a los diagramas, en especial para análisis de acordes. Puedes poner la nota raíz y automáticamente te muestra las funciones (1, 3, 5, 7, etc.).
Para acordes de jazz más complejos
Si usas esto para jazz o música más avanzada, hay un modo especial (control avanzado de intervalos) donde puedes controlar manualmente cada intervalo. Por ejemplo, para un acorde como C7♯11♭13, puedes especificar exactamente cómo quieres que aparezca cada función numérica. Admito que esto es para los más nerds de la teoría, pero cuando lo necesitas, lo agradeces. Y además cómo voy a dejar el jazz que es de mis grandes pasiones a su suerte?
Crea varios diagramas de una vez
Esto es probablemente lo más útil de todo. Por ejemplo, si necesitas mostrar un acorde en todos los 12 tonos, seleccionas tus notas una vez y usas la sección de operaciones en grupo, seleccionas un rango y se transportan automáticamente. En vez de hacer 12 diagramas por separado tienes los 12 listos en segundos.
También puedes descargar todo como un archivo ZIP para que no se te bombardee el navegador con ventanas de descarga.
Formatos que espero, funcionan en todos lados
Los diagramas salen en SVG (que se ven perfectos al escalarlos a cualquier tamaño) o PNG (para cuando necesitas algo más compatible para redes, imprimir tarjetas físicas, ETC).
Los colores y otras cosas
Se puede seleccionar un conjunto de 12 colores predefinidos para resaltar las teclas. Incorporé la selección básica de bootstrap, que es una plataforma para construir aplicaciones web sencillas y ligeras, y agregué algunos que uso para explicar acordes con sus tensiones en jazz. También se puede personalizar el color usando el selector de colores nativo del navegador que sea que estés usando. También se le puede poner el título a los diagramas por ejemplo para nombrar la progresión de alguna canción y se puede configurar la fuente y el tamaño. Todo se genera de manera local y sin conexión necesaria a internet. El programa también es totalmente accesible para usuarios de lectores de pantalla ya que casi todas las selecciones y acciones se confirman en texto desde la misma página. Ah sí! y también, es bilingüe, en Inglés y español.