Visualización creada por curiosidad sobre una hélice esférica

• Introducción conceptual a cómo expresar el movimiento de objetos en el espacio 3D mediante funciones paramétricas
• Explica el proceso de construir matemáticamente trayectorias cada vez más complejas, desde círculos y espirales hasta una trayectoria de hélice esférica
• Al definir cada eje de coordenadas (x, y, z) como una función del tiempo, es posible implementar movimientos diversos
• En particular, en el caso de la hélice esférica, se genera una trayectoria helicoidal en 3D multiplicando funciones trigonométricas que hacen variar el radio
• Es un ejemplo creativo que muestra que este enfoque permite mover un objeto a lo largo de trayectorias arbitrarias

---

Explorando el movimiento de objetos en el espacio 3D

Este texto presenta una exploración personal sobre distintas formas de mover objetos en el espacio 3D y, en particular, sobre cómo definir e implementar matemáticamente una trayectoria de hélice esférica (spherical helix)

Fundamentos de la hélice y del movimiento en 3D

• Una hélice es una estructura tridimensional que gira y se enrolla, como un resorte

• Una hélice esférica es la idea de girar en forma de espiral a lo largo de la superficie de una esfera

• La posición de un objeto en el espacio 3D se determina por las coordenadas de los tres ejes x, y, z

  • Eje x: se encarga del movimiento izquierda-derecha
  • Eje y: corresponde al movimiento arriba-abajo
  • Eje z: cambio en la dirección adelante-atrás (profundidad)

• Si la posición del objeto se define con funciones matemáticas en función del tiempo (t), se puede crear una trayectoria de movimiento

Funciones paramétricas y ejemplos de trayectorias simples

• Ejemplo: si la posición x se define como 10 * cos(πt/2), se obtiene un movimiento oscilatorio con forma de onda coseno que va y vuelve entre -10 y 10 cada 2 segundos

• Del mismo modo, si la posición y se define como 10 * cos(πt/2), también se puede lograr un movimiento vertical de ida y vuelta

• Si se usan funciones distintas en x e y (por ejemplo, x = 10 * cos(πt/2), y = 10 * sin(πt/2)), se obtiene un movimiento con desfase entre ambas, y al combinarlas se genera una trayectoria circular

• Si se multiplica la función por un término proporcional al tiempo (por ejemplo, x = 0.03 * t * cos(πt/2)), se puede crear un patrón cuyo radio crece gradualmente, es decir, una trayectoria en espiral (spiral)

Cómo crear una trayectoria de hélice esférica (spherical helix)

• A diferencia de una espiral plana convencional, una hélice esférica requiere una trayectoria tridimensional

  • En z se puede usar algo como 10 * cos(0.02 * πt) para cambiar gradualmente la posición adelante-atrás

• En x e y, al usar el producto de funciones trigonométricas como sin(0.02 * πt), se logra un efecto en el que el radio es mayor en la parte media y menor en ambos extremos

• Al aplicar este producto tanto en x como en y, se puede generar una trayectoria que realiza un movimiento circular mientras avanza en espiral sobre la superficie de la esfera, es decir, en tres dimensiones

• Con esta combinación de funciones se completa la implementación matemática de una trayectoria de hélice esférica

Resumen y aplicaciones

• Cualquier trayectoria 3D puede crearse definiendo x, y y z como funciones paramétricas del tiempo
• Esto significa que se pueden especificar matemáticamente desde círculos y espirales simples hasta trayectorias complejas
• Con este enfoque, es posible comprender visualmente que incluso los movimientos complejos no son en realidad caos, sino trayectorias matemáticas claramente definidas

---

visualrambling.space es un proyecto personal de Damar donde aprende sobre diversos temas y los cuenta de forma visual

[GN⁺]

Comentarios en Hacker News

• En la navegación marítima antigua, este tipo de curvas (línea loxodrómica, loxodrome) eran muy importantes.
  Esto se debía a que durante la navegación era mucho más fácil mantener el mismo rumbo.
  Por eso los marineros intentaban seguir este tipo de trayectorias tanto como fuera posible.
  De ahí surgió el concepto de línea loxodrómica.
  Consulta Rhumb line en Wikipedia.
  La proyección de Mercator facilitaba el cálculo de estos rumbos.
  Consulta Mercator projection en Wikipedia.
  Toda esta configuración ha seguido produciendo nuevos descubrimientos matemáticos.
  Por ejemplo, vista en una proyección polar, se convierte en una espiral logarítmica.
  Vista de lado, se convierte en un paquete de ondas (wave packet).
  Su interés matemático fue tal que incluso Paul Erdos se sintió atraído por el reto.
  Artículo de referencia: Spiraling the Earth with C. G. J. Jacobi. Paul Erdös
  Como nota al margen, hoy parece ser uno de esos días en Hacker News en los que abundan los temas de geometría esférica (spherical geometry).
  Enlaces a discusiones relacionadas:
  1
  2
  3

  • Pero la curva en espiral del OP (publicación original) no es una línea loxodrómica (loxodrome, rhumb line).
    La curva tiene un espaciado uniforme sobre la superficie, mientras que una línea loxodrómica, por definición, siempre cruza los meridianos con el mismo ángulo, por lo que las líneas se vuelven más densas al acercarse a las regiones polares.
    También puede verse en la fórmula:
    x = 10 · cos(π·t/2) · sin(0.02·π·t)
    y = 10 · sin(π·t/2) · sin(0.02·π·t)
    z = 10 · cos(0.02·π·t)
    Si convertimos esta expresión a coordenadas esféricas (R=10):
    λ(t) = π/2 · t (longitud)
    φ(t) = π/2 - 0.02·π·t (latitud)
    Al derivar, obtenemos d(λ)/d(φ) = -25 (valor constante).
    Una línea loxodrómica real tiene d(λ)/d(φ) con la forma tan(α) · sec(φ), por lo que cambia según la latitud.
    Es decir, esta curva no es una línea loxodrómica.
    Si te interesa una curva con ángulo de cruce variable, recomiendo verla en este enlace de visualización.

• Gracias a esto me inspiré para compartir un proyecto esférico divertido que hice en 2022.
  proyecto spheredisksample
  Creo que encaja perfecto con tendencias como la de hoy.
  También recomiendo el proyecto sphere-resample, que probablemente le guste a la gente.

• También vale la pena no olvidar esta publicación, que tiene discusión relacionada con Rhumb line y temas afines.

• La visualización me parece realmente genial.
  Algo adicional que esperaba ver era si “se puede mover a velocidad constante”.
  Si el objetivo es solo colocar puntos a lo largo de la trayectoria, no importa tanto, pero al verlo moverse de verdad se nota que avanza mucho más lento al inicio y al final (casi totalmente determinado por el radio).
  Si quisieras moverlo a velocidad constante, o incluso aplicar una función de easing para que desacelere y acelere, me pregunto qué método se podría usar.
  Supongo que debe haber algún truco matemático elegante.
  A grandes rasgos imagino derivar la fórmula para obtener una función de velocidad, luego procesar dx, dy, dz con la fórmula de Pitágoras y usar la inversa de la función de velocidad para reparametrizar con t'.
  Pero no me siento tan cómodo con esta parte matemática, así que siento que solo estoy especulando.

  • Para moverlo a velocidad constante necesitas una “parametrización euclidiana” (Euclidean parameterization).
    Es decir, hay que ajustar el valor de t para que sea proporcional a la distancia euclidiana recorrida.
    Es un concepto necesario siempre que animas movimiento a lo largo de una trayectoria.
    Pero en la mayoría de los casos no existe una solución en forma cerrada (closed-form solution), así que hay que resolverlo numéricamente.
    En la práctica, para cada t se encuentra el dt correspondiente a la distancia deseada (ds) usando búsqueda binaria o métodos de interpolación (interpolation search).
    Luego se guarda ese resultado y se construye una polilínea con puntos equiespaciados, lo cual es un enfoque práctico (siempre que la curva no cambie continuamente con el tiempo).

  • El truco matemático que mencionas es precisamente la “parametrización por longitud de arco” (arc length parameterization).
    Consiste en componer con la inversa de la función de longitud de arco de la curva.
    Salvo unas pocas familias de curvas, en la mayoría de los casos no existe una forma cerrada y hay que abordarlo computacionalmente.

  • Tu intuición de hacer que t avance más lento es correcta.
    La velocidad angular se mantiene según t, pero el radio también cambia con t.
    Es una idea similar a una espiral de Arquímedes (Archimedean spiral).
    Si parametrizas haciendo que la magnitud de la velocidad sea constante, puedes lograr un movimiento más uniforme.
    Eso sí, como el radio comienza en 0, de algún modo tendrás que tratar el valor límite (limit).
    Si lo que quieres es seguir una trayectoria en un juego o algo similar, también puede ser práctico simplificarlo: orientar el movimiento y la tangente respecto al eje Z, e ir arrastrándolo con restricciones de velocidad de forma iterativa, como un bead toy.

• Sobre la parte de “...en realidad no es algo caótico (chaotic). Solo es una trayectoria definida por una función matemática”:
  No sé si la función presentada realmente muestra comportamiento caótico, pero el concepto de caos en sí mismo es un fenómeno que aparece precisamente en funciones matemáticas deterministas (extremadamente sensibles a las condiciones iniciales).
  Probablemente el autor eligió la palabra “chaotic” en lugar de “random” o “non-deterministic”.

  • Me parece muy importante hacer este tipo de precisiones técnicas.
    Para lectores de Hacker News, esa distinción resulta interesante (o debería serlo).
    En matemáticas, el caos es un sistema determinista extremadamente sensible a las condiciones iniciales.
    Aunque el resultado parezca aleatorio, conceptualmente es algo completamente distinto de la aleatoriedad (randomness).

  • Estoy de acuerdo en que el término caos es una propiedad que surge de funciones matemáticas deterministas.
    Pero en el sentido cotidiano de diccionario también puede significar “desorden y confusión total”, “un estado dominado por el azar” o “la imprevisibilidad de sistemas naturales complejos”.
    Para ajustarse a las expectativas y hábitos lingüísticos de quienes leen de forma cotidiana, también me parece válido explicar con un lenguaje más accesible en lugar de priorizar la precisión matemática estricta.

• Un comentario de retroalimentación: en móvil, la navegación no fue como esperaba.
  Intenté hacer scroll porque no sabía cómo interactuar.
  Cuando tocar la pantalla me llevó a la siguiente página pensé “ah, ya entendí”.
  Luego toqué a la derecha y avancé a la siguiente página, pero más tarde, cuando volví a tocar, intenté usar la izquierda para retroceder y terminé saltándome dos páginas.
  Eso hizo que me perdiera algunas pantallas y me dio un poco de pena.
  No es un gran problema, pero una pequeña indicación habría reducido la confusión y me habría permitido concentrarme mejor.

  • En la primera diapositiva sí hay una guía de uso.
    Aun así, podría ser buena idea añadir también el gesto de swipe como apoyo (aunque personalmente prefiero la interacción por tap).
    Si buscas parecerte a la interfaz tipo “stack de tarjetas” de las apps de redes sociales, el swipe también se sentiría natural.

• El contenido está en un nivel básico, así que parece bueno para que niños aprendan matemáticas.
  Creo que habría sido aún mejor mencionar de vez en cuando conceptos como la fórmula del círculo (x = r cos t, y = r sin t).
  Como temas buenos para expandir, están las coordenadas polares (polar coordinate) y el álgebra lineal (vectores, transformaciones, transformaciones en espacio 3D, etc.).
  Si el propio autor no está familiarizado con estos temas, recomiendo los videos de YouTube de 3blue1brown.
  Desde la perspectiva de un programador, también faltó cubrir la parte de código, bibliotecas o manejo de objetos 3D reales (vértices, deformaciones, etc.), así que estaría bien si eso también se incluyera.

• Me dio curiosidad la “precisión” del movimiento en el eje z dentro de una hélice esférica.
  Puedes hacer un movimiento simple con varias funciones, como z = c * t, y eso cambia el grosor, la consistencia y la uniformidad de las “capas” (peels).
  La función usada aquí se ve bien visualmente, pero me pregunto cuál sería un buen criterio si el objetivo fuera algo como mantener distancias constantes entre espirales (o una división uniforme del área, por ejemplo).
  Me da curiosidad saber cómo se eligió esta función, o si simplemente se escogió porque se veía bien.

  • Probablemente esta función se eligió simplemente porque es cómoda de programar y se ve bien.
    Creo que la forma verdaderamente “correcta” sería que el punto se mueva en el espacio 3D a velocidad constante (por ejemplo, como un barco moviéndose sobre la Tierra real).
    En ese caso, la fórmula (ver el ejemplo de código) sería:
    const degrees = Math.PI / 180
    const bearing = 5 * degrees
    const k = Math.tan(bearing)
    const v = 0.001
    const phi = (t) => vt/Math.sqrt(1 + kk)
    const theta = (t) => k*Math.ln(Math.tan(phi(t)/2))
    convertir a coordenadas x, y, z
    const x = (t) => Math.sin(phi(t)) * Math.cos(theta(t))
    const y = (t) => Math.sin(phi(t)) * Math.sin(theta(t))
    const z = (t) => Math.cos(phi(t))
    En la práctica hay que llegar hasta la función logarítmica de tan(phi/2), y esa forma sale al resolver la ecuación diferencial.
    Probablemente el autor no quiso usar un método tan complejo como ln(tan(phi/2)).

  • La clave es hacer constante la velocidad de la trayectoria (velocity constant).
    Puedes abordarlo definiendo la derivada para que la velocidad sea constante y luego despejando respecto a z, o reparametrizando con t' (reparameterization).
    Elegir z = c * t afecta tanto la parametrización de la trayectoria como la trayectoria real en sí.

• La animación es muy fluida y me impresionó bastante.
  Hace poco tuve que trabajar en un problema de distribuir N puntos sobre una esfera, y en ese proceso encontré un algoritmo sencillo llamado fibonacci-sphere.
  Ese método también se usa para colocar puntos generando una espiral sobre la esfera.
  Artículo relacionado: PDF del artículo sobre fibonacci-sphere

• Me sorprende que todavía nadie haya mencionado Acko.net.
  Tiene una excelente entrada de blog que usa herramientas parecidas para explicar visualmente números complejos y fractales, especialmente el fractal de Julia.
  Si te interesa este tipo de cosas, de verdad vale la pena leerla.
  How to fold a julia fractal - blog de Acko.net

• Puedes manipular directamente la ecuación de esta curva en 3D Desmos.
  Enlace a la visualización en Desmos 3D
  También es interesante que la ecuación paramétrica de esta espiral sea lineal en coordenadas esféricas.
  Consulta Coordinate transformations en Wikipedia.

• Gracias por compartirlo, me pareció realmente interesante.