Una superficie reglada está hecha íntegramente de rectas, aunque se vea curva. Este visualizador deja mover ese hecho con una perilla: al girarla, el hiperboloide se estira hasta ser un cilindro y se cierra hasta ser un cono, y en todo el recorrido ninguna recta se dobla.
Es un archivo HTML. Se abre con doble clic, no necesita instalación, servidor ni conexión a internet.
index.html
Nació como apoyo de una estación de mediación —2 o 3 minutos junto a un modelo físico de varillas, no como reemplazo— dentro del proyecto Artefactos Matemáticos (VcM PUCV, Instituto de Matemática + Escuela de Arquitectura y Diseño).
Dos superficies, con el mismo control para ambas:
Hiperboloide de una hoja. Dos circunferencias de radio R separadas por una altura h; la de arriba girada un ángulo φ. Cada varilla une el punto i de abajo con el punto i de arriba. El radio a la altura relativa t vale
ρ(t) = R · √( (1−t)² + t² + 2t(1−t)·cos φ )
de donde la cintura, a media altura, mide R·cos(φ/2). Con φ = 0 el radio es constante y aparece el cilindro; con φ = 180° toda recta corta el eje, la cintura vale cero y aparece el cono. Girar en +φ y en −φ produce la misma superficie: por eso el hiperboloide admite dos familias de rectas y cada punto tiene dos que pasan por él.
Las circunferencias marcan dónde termina el objeto que se puede construir. El control de extensión prolonga cada recta más allá de ellas —la misma recta, más larga— y la superficie se abre fuera de la lámina. El encuadre no se reajusta: el artefacto conserva su tamaño en pantalla, de modo que lo que sobresale se lee como «hasta acá llega el objeto, no la superficie».
Paraboloide hiperbólico. Sobre el rectángulo x ∈ [−1, 1], y ∈ [−e, e], la superficie z = w·x·y/e. Las dos familias son las rectas de x constante y las de y constante. Con alabeo w = 0 el rectángulo es plano. Los cortes horizontales son hipérbolas; los cortes por los planos diagonales, parábolas. Al extender crece el dominio en ambas direcciones —si sólo se alargaran las rectas dejando fijas sus posiciones saldría una cruz, no una silla mayor— y el rectángulo original queda dibujado como límite del objeto construible.
| Control | Qué hace |
|---|---|
| Perilla | Torsión del hiperboloide (0°–180°) o alabeo del paraboloide |
| Cilindro · Hiperboloide · Cono | Llevan la perilla a los casos notables, animando la transición |
| Generatrices | Cuántas rectas se dibujan (4 a 48) |
| Proporción | Esbeltez del hiperboloide o del rectángulo |
| Extensión | Prolonga las rectas y las curvas más allá del objeto construible (0 a +100 %) |
| Giro · Altura · Acercamiento | Punto de vista. También se gira arrastrando sobre el dibujo, y se acerca con la rueda |
| 2.ª familia | Muestra la segunda familia de rectas, en otro color |
| Secciones | Cortes horizontales: circunferencias o hipérbolas |
| La curva | El contorno real de la superficie, en línea gruesa: la curva que las rectas producen |
| Girar | Rotación automática, para dejarlo andando sobre la mesa |
| Auto · Claro · Oscuro | Tema. Por defecto sigue al del equipo; fijarlo a mano sirve cuando la sala no se parece al escritorio. Se recuerda entre sesiones |
| Reiniciar | Devuelve todo al estado inicial |
Todo funciona con dedo, mouse o teclado. La lectura numérica de la esquina muestra en todo momento la torsión, la cintura como fracción del radio, y cuántas rectas hay en pantalla.
El visualizador acepta cualquier controlador que envíe mensajes MIDI de Control Change. El botón Perillas físicas lo vincula; no hace falta configurar nada más.
| CC | Parámetro | Rango |
|---|---|---|
| 1 | Torsión / alabeo | 0 – 180° |
| 2 | Generatrices | 4 – 48 |
| 3 | Proporción | 0,5 – 3 |
| 4 | Giro | −180 – 180° |
| 5 | Altura de vista | −70 – 70° |
| 6 | Acercamiento | 30 – 300 % |
| 7 | Extensión | 0 – +100 % |
Los mismos canales están disponibles desde JavaScript, por si se quiere gobernar el visualizador desde otra cosa:
window.AR.setChannel(1, 0.5); // canal CC, valor normalizado 0–1
window.AR.redraw(); // fuerza un repintado inmediatoRequiere un navegador con Web MIDI (Chrome o Edge). Sin controlador, todo se opera igual en pantalla.
Sin dependencias ni proceso de compilación: un archivo, canvas 2D y algo de SVG. No hace ninguna petición externa: la tipografía va incrustada, así que en el pasillo del IMA sin wifi se ve exactamente igual que en el escritorio.
Dos voces tipográficas. JetBrains Mono —variable, subconjuntada a los caracteres que usa la interfaz y comprimida a 37 KB— es la voz de la máquina: rótulos, cifras, botones. La sans del sistema queda para la única línea de prosa, abajo en la lámina, que es la voz que habla al visitante.
Las rectas se subdividen y se reparten en capas de profundidad, que se pintan de atrás hacia adelante variando opacidad y grosor. Eso da la lectura de volumen sin necesidad de 3D por hardware, y mantiene el dibujo fluido en equipos modestos. El contorno del hiperboloide no se aproxima: en proyección ortográfica, la silueta de una superficie de revolución está a distancia ρ(z) del eje en la dirección perpendicular a la vista, y se calcula así.
El lenguaje gráfico viene del dibujo técnico: generatrices finas, contorno grueso, eje en raya-punto, secciones en trazo cortado, y las dos familias de rectas en azul de plano y minio.
La geometría está comprobada contra sus propiedades, no sólo a ojo:
- Ambas familias caen sobre la misma superficie de revolución, de 0° a 180° de torsión (error ≤ 5·10⁻¹⁶).
- Torsión 0 → radio constante: cilindro exacto. Torsión 180° → toda recta corta el eje: cono exacto.
- Cintura mínima = cos(φ/2), alcanzada a media altura.
- La silueta dibujada coincide con el contorno real en proyección ortográfica.
- Paraboloide: ambas familias sobre
z = w·x·y/ey dentro del rectángulo; alabeo 0 → plano; cortes horizontales a z constante; diagonales parabólicas exactas.
Sin licencia definida todavía. Mientras tanto, el material es de uso interno del proyecto; si vas a reutilizarlo, escribe.
La tipografía incrustada es JetBrains Mono, bajo SIL Open Font License 1.1. El texto de la licencia va en OFL-JetBrainsMono.txt, como exige la OFL al redistribuir la fuente.