Visualização criada por curiosidade sobre uma hélice esférica

• Introdução ao conceito de como expressar o movimento de objetos no espaço 3D com funções paramétricas
• Explica o processo de criar matematicamente trajetórias cada vez mais complexas, de círculos e espirais até a trajetória de hélice esférica
• Ao definir cada eixo de coordenadas (x, y, z) como uma função do tempo, é possível implementar vários tipos de movimento
• No caso da hélice esférica em especial, uma trajetória helicoidal em 3D é criada multiplicando funções trigonométricas para variar o raio
• Este é um exemplo criativo que mostra como esse método permite mover objetos por trajetórias arbitrárias

---

Explorando o movimento de objetos no espaço 3D

Este texto é o resultado de uma exploração pessoal sobre diferentes formas de mover objetos no espaço 3D e, em especial, sobre como definir e implementar matematicamente uma trajetória de hélice esférica (spherical helix)

Fundamentos da hélice e do movimento tridimensional

• Hélice se refere a uma estrutura tridimensional que gira e se enrola como uma mola

• Hélice esférica é o conceito de girar em forma de espiral ao longo da superfície de uma esfera

• A posição de um objeto no espaço 3D é determinada pelas coordenadas dos três eixos x, y e z

  • eixo x: responsável pelo movimento para a esquerda e direita
  • eixo y: corresponde ao movimento para cima e para baixo
  • eixo z: variação para frente e para trás (profundidade)

• Se a posição do objeto for definida com funções matemáticas em função do tempo (t), é possível criar uma trajetória de movimento

Funções paramétricas e exemplos de trajetórias simples

• Exemplo: se a posição em x for definida como 10 * cos(πt/2), isso se torna um movimento oscilatório em forma de cosseno que vai e volta entre -10 e 10 a cada 2 segundos

• Da mesma forma, definir a posição em y como 10 * cos(πt/2) também permite um movimento vertical de vai e vem

• Se forem usadas funções diferentes em x e y (por exemplo, x = 10 * cos(πt/2), y = 10 * sin(πt/2)), o movimento fica com fases diferentes e, ao combinar os dois, cria-se uma trajetória circular

• Ao multiplicar a função por um termo proporcional ao tempo (por exemplo, x = 0.03 * t * cos(πt/2)), é possível criar um padrão cujo raio aumenta gradualmente, ou seja, uma trajetória em espiral (spiral)

Criando uma trajetória de hélice esférica (spherical helix)

• Diferentemente da espiral plana tradicional, a hélice esférica exige uma trajetória tridimensional

  • É possível alterar gradualmente a posição para frente e para trás em z usando algo como 10 * cos(0.02 * πt)

• Em x e y, usar o produto de funções trigonométricas como sin(0.02 * πt) permite criar o efeito em que o raio é maior no meio e menor nas duas extremidades

• Aplicando esse produto tanto em x quanto em y, torna-se possível gerar uma trajetória que faz movimento circular enquanto se desloca em espiral pela superfície da esfera, ou seja, em 3D

• Com essa combinação de funções, conclui-se a implementação matemática de uma trajetória de hélice esférica

Resumo e aplicações

• Toda trajetória 3D pode ser criada definindo x, y e z, respectivamente, como funções paramétricas do tempo
• Isso significa que é possível especificar matematicamente desde círculos e espirais simples até trajetórias complexas
• Com essa abordagem, é possível entender visualmente que até movimentos complexos não são, na prática, caos, mas trajetórias matemáticas claramente definidas

---

visualrambling.space é um projeto pessoal em que Damar aprende vários temas e os apresenta de forma visual

[GN⁺]

Comentários do Hacker News

• Antigamente, na navegação marítima, esse tipo de curva (linha de rumo, loxodrome) era muito importante
  porque manter a mesma direção durante a viagem era bem mais fácil
  então os marinheiros tentavam seguir esse tipo de trajeto sempre que possível
  foi assim que surgiu o conceito de linha de rumo
  veja a Wikipedia sobre Rhumb line
  a projeção de Mercator facilitava o cálculo dessas direções
  veja a Wikipedia sobre Mercator projection
  esse contexto em si continuou produzindo novas descobertas matemáticas
  por exemplo, numa projeção polar ela se torna uma espiral logarítmica
  vista de lado, vira um pacote de ondas
  essa curiosidade matemática, até Paul Erdos acabou se interessando
  artigo de referência: Spiraling the Earth with C. G. J. Jacobi. Paul Erdös
  e, como observação à parte, hoje parece ser um dia em que estão surgindo muitas postagens sobre geometria esférica no Hacker News
  links para discussões relacionadas:
  1
  2
  3

  • Mas a curva em espiral mostrada pelo OP não é uma linha de rumo (loxodrome, rhumb line)
    a curva tem espaçamento constante sobre a superfície, mas uma linha de rumo, por definição, cruza os meridianos sempre no mesmo ângulo, então as linhas ficam mais densas conforme se aproximam das regiões polares
    em termos de 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)
    se convertermos isso para coordenadas esféricas (R=10),
    λ(t) = π/2 · t (longitude)
    φ(t) = π/2 - 0.02·π·t (latitude)
    diferenciando, obtemos d(λ)/d(φ) = -25 (valor constante)
    uma linha de rumo real tem d(λ)/d(φ) na forma tan(α) · sec(φ), então varia com a latitude
    ou seja, essa curva não é uma linha de rumo
    se você tem curiosidade sobre uma curva com ângulo de cruzamento variável, recomendo dar uma olhada neste link de visualização

• Isso me inspirou a apresentar um projeto esférico divertido que fiz em 2022
  projeto spheredisksample
  acho que combina perfeitamente com a tendência de hoje
  e também recomendo o projeto sphere-resample, que as pessoas provavelmente vão gostar

• Também vale não esquecer de consultar esta postagem, que tem discussão relacionada a Rhumb line e afins

• Acho a visualização realmente muito bonita
  uma coisa que eu também esperava ver era algo sobre “dá para se mover em velocidade constante?”
  se o objetivo é apenas posicionar pontos ao longo do caminho, tudo bem, mas ao observar o movimento real dá para notar que ele fica muito mais lento no começo e no fim (quase inteiramente determinado pelo raio)
  se a ideia fosse mover em velocidade constante, ou até aplicar uma função de easing para desacelerar e acelerar, fico curioso sobre qual seria a abordagem
  imagino que deva existir algum truque matemático elegante
  pensei vagamente em diferenciar a fórmula para obter a função de velocidade, depois tratar dx, dy, dz com a fórmula de Pitágoras, e então usar a inversa da função velocidade para reparametrizar em t'
  mas não sou familiar o bastante com essa parte da matemática, então sinto que estou só falando por alto

  • Para se mover em velocidade constante, você precisa de uma “parametrização euclidiana”
    ou seja, o valor de t precisa ser ajustado para ser proporcional à distância euclidiana percorrida
    é um conceito sempre necessário ao animar movimento ao longo de um caminho
    mas, na maioria dos casos, não existe solução em forma fechada, então isso precisa ser resolvido numericamente
    na prática, para cada t, encontra-se o dt correspondente à distância desejada (ds) usando busca binária ou algo como interpolation search
    armazenar esses resultados e gerar uma polilinha com pontos igualmente espaçados é uma abordagem prática (desde que a curva não continue mudando ao longo do tempo)

  • O truque matemático mencionado na pergunta é justamente a “parametrização por comprimento de arco”
    consiste em compor com a inversa da função de comprimento de arco da curva
    com exceção de algumas famílias específicas de curvas, quase sempre não há forma fechada, então a abordagem acaba sendo computacional

  • A intuição de fazer t avançar mais devagar está correta
    a velocidade angular se mantém em função de t, mas o raio também varia com t
    é uma espécie de conceito de espiral de Arquimedes
    se você parametrizar tornando o módulo da velocidade constante, o movimento fica mais uniforme
    mas, como o raio começa em 0, você vai ter de tratar o limite de alguma forma
    se o objetivo for seguir esse caminho em algo como um jogo, uma simplificação prática também é mirar no caminho e na tangente com base no eixo Z e aplicar arrasto iterativamente com restrições de velocidade, como um brinquedo de contas deslizantes

• Sobre a parte “...na verdade não é caótico. É só um caminho definido por uma função matemática”,
  não sei se a função apresentada realmente exibe comportamento caótico, mas o próprio conceito de caos surge justamente em funções matemáticas determinísticas (com sensibilidade extrema às condições iniciais)
  provavelmente o autor escolheu a palavra “chaotic” quando queria dizer algo mais como “random” ou “non-deterministic”

  • Acho esse tipo de correção técnica muito importante
    um leitor do Hacker News provavelmente acha esse tipo de distinção interessante, ou deveria achar
    em matemática, caos é um sistema determinístico extremamente sensível às condições iniciais
    o resultado pode parecer aleatório, mas conceitualmente é algo totalmente diferente de aleatoriedade

  • Concordo que o termo caos se refere a uma propriedade que surge em funções matemáticas determinísticas
    mas, no uso cotidiano de dicionário, ele também significa “desordem e confusão completas”, “um estado dominado pelo acaso” ou “a imprevisibilidade de sistemas naturais complexos”
    para atender à expectativa e ao hábito linguístico de leitores comuns, acho perfeitamente válido explicar isso com uma linguagem mais acessível, em vez de priorizar o rigor matemático

• Um feedback: no celular, a forma de navegação foi diferente do que eu esperava
  como eu não sabia como interagir, tentei rolar a tela
  quando vi que tocar na tela passava para a próxima página, pensei “ah, entendi”
  aí toquei à direita, fui para a próxima página e, mais tarde, quando cliquei de novo, tentei tocar à esquerda para voltar, mas acabei pulando duas páginas
  isso foi um pouco frustrante porque perdi algumas telas
  não é um grande problema, mas uma orientação mínima teria evitado a confusão e ajudado a manter o foco

  • Há instruções de uso no primeiro slide
    mesmo assim, talvez valha a pena adicionar também o gesto de swipe como apoio (pessoalmente eu prefiro toque)
    se a ideia for lembrar a interface de “pilha de cartões” dos apps de redes sociais, swipe também parece natural

• O conteúdo é bem básico, em nível introdutório, então parece ótimo para crianças aprendendo matemática
  teria sido ainda melhor se houvesse menções ocasionais a conceitos como a fórmula do círculo (x = r cos t, y = r sin t)
  como temas bons para expandir depois, há coordenadas polares e álgebra linear (vetores, transformações, transformações em espaço 3D etc.)
  se o próprio autor não estiver muito à vontade com esses temas, recomendo os vídeos do 3blue1brown no YouTube
  do ponto de vista de um programador, também faria falta falar mais sobre código, bibliotecas ou objetos 3D reais (vértices, deformações etc.), então cobrir isso também seria legal

• Fiquei curioso sobre a “correção” do deslocamento no eixo z em uma hélice esférica
  dá para fazer esse deslocamento de forma simples com várias funções, como z = c * t, e isso muda a espessura, consistência e uniformidade das “cascas”
  a função usada aqui parece visualmente bonita, mas fico na dúvida sobre como definir o objetivo em termos de distância constante entre espiras (ou até divisão uniforme de área)
  gostaria de saber como essa função foi escolhida, ou se foi apenas uma escolha por estética

  • Acho que essa função provavelmente foi escolhida apenas por ser prática de programar e agradável visualmente
    uma forma realmente “correta” provavelmente seria manter o ponto se movendo em velocidade constante no espaço 3D (como um barco real se movendo sobre a Terra)
    nesse caso, a fórmula seria algo assim (veja o exemplo de código)
    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))
    convertendo para 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))
    na prática, é preciso até usar a função logarítmica de tan(phi/2), e isso aparece ao resolver a equação diferencial
    acho que o autor provavelmente não foi por esse caminho mais complexo (ln(tan(phi/2)))

  • O ponto central é tornar a velocidade do trajeto constante
    você pode definir a derivada para fixar a velocidade como constante e então resolver em relação a z, ou reparametrizar em t'
    escolher z = c * t afeta ao mesmo tempo a parametrização do caminho e a trajetória real

• A animação é extremamente suave e impressionante
  recentemente precisei lidar com o problema de distribuir N pontos sobre uma esfera, e nesse processo encontrei um algoritmo simples chamado “fibonacci-sphere”
  essa abordagem também se usa uma espiral sobre a esfera para posicionar os pontos
  artigo relacionado: PDF do artigo sobre fibonacci-sphere

• Estou surpreso que Acko.net ainda não tenha sido mencionado
  há um excelente post de blog que usa ferramentas parecidas para explicar visualmente números complexos e fractais, especialmente o fractal de Julia
  recomendo muito para quem se interessa pelo tema
  How to fold a julia fractal - blog Acko.net

• Dá para manipular diretamente a fórmula dessa curva no 3D Desmos link da visualização 3D no Desmos
  também é interessante que a equação paramétrica dessa espiral seja linear em coordenadas esféricas
  veja Wikipedia sobre transformação de coordenadas

• Obrigado por compartilhar, achei realmente fascinante