Herramienta visual e interactiva para explorar intervalos y relaciones tonales a partir de una nota de referencia central (F4)
Disposición
5 filas × 8–9 columnas de botones (círculos) sobre un SVG de 314 × 182 px
Nota central
F4 (unísono 0), fila central, columna central. Marcada con círculo blanco doble.
Rango
−12 a +12 semitonos respecto a F4 (dos octavas completas)
Círculos dobles
Cada posición de F y C (notas de referencia visual y táctil) tiene un círculo exterior (grande) y uno interior (pequeño), ambos interactivos
| Fila | Semitonos (izquierda → derecha) | Nota ext. izquierdo |
|---|---|---|
| Superior | −10, −7, −4, −1, +2, +5, +8, +11 | G3 |
| 2ª | −11, −8, −5, −2, +1, +4, +7, +10 | F#3 |
| Central | −12, −9, −6, −3, 0, +3, +6, +9, +12 | F3 |
| 4ª | −10, −7, −4, −1, +2, +5, +8, +11 | G3 |
| Inferior | −11, −8, −5, −2, +1, +4, +7, +10 | F#3 |
Los colores de los círculos no son decorativos: codifican el tipo de intervalo según el sistema cromático original del diseño SVG. Cada clase CSS (cls-1 a cls-21) corresponde a un color específico asociado a un intervalo.
El SVG contiene líneas diagonales y horizontales que cruzan la matriz. Cada línea conecta todos los círculos de un mismo intervalo, trazando las "familias" tonales visualmente. Sus colores coinciden con el sistema de clases. Son atenuables con el slider Líneas.
Botones 0–12 (barra superior)
Seleccionan un intervalo. Al pulsar, los círculos de ese valor de semitono (tanto positivo como negativo) se iluminan en verde, los demás se atenúan, y se trazan líneas desde F4 hasta cada posición resaltada. Al mismo tiempo suena el intervalo (onda triangular). Pulsar de nuevo deselecciona.
Etiquetas flotantes (hover sobre círculos)
Al pasar el ratón sobre cualquier círculo aparece su valor en semitonos (p. ej. +5, −3) centrado dentro del círculo. Al hacer clic, el círculo suena y se activa su intervalo.
Slider Botones
Controla la opacidad de los círculos no seleccionados cuando hay un intervalo activo. En 0 los círculos no seleccionados desaparecen; en 1 quedan igual de visibles que los resaltados.
Slider Líneas
Controla la opacidad de las líneas de fondo (las diagonales y horizontales del SVG original). No afecta a las líneas de intervalo dinámicas que se trazan al seleccionar un intervalo.
▶ S — Serie (secuenciador)
Reproduce en bucle continuo todos los intervalos del 0 al 12, avanzando cada ~900 ms. Para cada paso ilumina los círculos correspondientes, activa el botón visual y toca el tono. Pulsando ■ S se detiene y limpia la selección.
🎲 R — Random shuffle (bucle)
Recorre todos los 45 círculos de la matriz en orden aleatorio sin repetición (cada ciclo es una permutación completa), reproduciendo cada sonido y mostrando el patrón visual (resaltando los círculos del mismo intervalo). Velocidad ajustable mediante el deslizador BPM R (30 a 480 pulsaciones por minuto). Por defecto 240 BPM (250 ms entre notas). Al terminar un ciclo, comienza otro con un nuevo orden aleatorio, y continúa indefinidamente hasta pulsar de nuevo el botón.
C — Color alternativo
Toggle que sustituye los colores planos originales por gradientes radiales (inspirados en la matriz M), manteniendo la correspondencia de familia tonal. Los colores vuelven al original al desactivar.
Exportar SVG
Genera un archivo SVG descargable con el estado visual actual: colores, opacidades y líneas de intervalo tal como se ven en pantalla, con atributos inline para compatibilidad con visores externos.
Síntesis por Web Audio API. Oscilador de onda triangular con envolvente de ataque rápido (10 ms) y caída exponencial (~800 ms). La frecuencia base es F4 = 349.23 Hz. Cada intervalo se calcula como 349.23 × 2^(n/12), donde n es el número de semitonos.
Al cargar la página, los círculos aparecen progresivamente (escalonados cada 20 ms) con una transición de escala desde 0 a 1 con rebote suave (cubic-bezier). A continuación aparecen las líneas de fondo con el mismo escalonado. Las líneas de intervalo dinámicas están excluidas de esta animación para no interferir con la interacción.