Visualisasi yang dibuat dari rasa ingin tahu tentang heliks sferis

• Pengenalan konsep tentang cara merepresentasikan pergerakan objek di ruang 3D dengan fungsi parametrik
• Menjelaskan proses membangun jalur matematis yang makin kompleks, mulai dari lingkaran, heliks, hingga lintasan heliks sferis
• Berbagai gerakan dapat diwujudkan dengan mendefinisikan setiap sumbu koordinat (x, y, z) sebagai fungsi waktu
• Khusus untuk heliks sferis, lintasan spiral 3D dibuat melalui perkalian fungsi trigonometri yang mengubah jari-jari
• Ini adalah contoh kreatif yang menunjukkan bahwa objek dapat digerakkan mengikuti lintasan arbitrer

---

Eksplorasi Pergerakan Objek di Ruang 3D

Tulisan ini merupakan hasil eksplorasi pribadi tentang berbagai cara memindahkan objek di ruang 3D, dan khususnya bagaimana heliks sferis (spherical helix) dapat didefinisikan serta diimplementasikan secara matematis

Dasar-Dasar Heliks dan Pergerakan Tiga Dimensi

• Heliks berarti struktur 3D yang melilit sambil berputar seperti pegas

• Heliks sferis adalah konsep bergerak berputar dalam bentuk spiral mengikuti permukaan bola

• Posisi objek di ruang 3D ditentukan oleh koordinat pada 3 sumbu x, y, z

  • sumbu x: bertugas untuk pergerakan kiri-kanan
  • sumbu y: berkaitan dengan pergerakan atas-bawah
  • sumbu z: perubahan arah depan-belakang (kedalaman)

• Jika posisi objek didefinisikan dengan fungsi matematika terhadap waktu (t), lintasan pergerakan dapat dibuat

Fungsi Parametrik dan Contoh Lintasan Sederhana

• Contoh: jika posisi x didefinisikan sebagai 10 * cos(πt/2), maka akan menjadi gerakan bolak-balik berbentuk gelombang kosinus dari -10 ke 10 setiap 2 detik

• Dengan cara yang sama, jika posisi y ditetapkan sebagai 10 * cos(πt/2), gerak bolak-balik vertikal juga dapat dibuat

• Jika x dan y memakai fungsi berbeda (misalnya x = 10 * cos(πt/2), y = 10 * sin(πt/2)), gerakannya memiliki fase berbeda, dan jika keduanya digabungkan akan terbentuk lintasan melingkar

• Jika fungsi dikalikan dengan suku yang sebanding dengan waktu (misalnya x = 0.03 * t * cos(πt/2)), dapat dibuat pola dengan jari-jari yang makin membesar, yaitu lintasan spiral

Membuat Lintasan Heliks Sferis (spherical helix)

• Berbeda dari spiral pada bidang datar, heliks sferis memerlukan lintasan 3D

  • Nilai z dapat menggunakan 10 * cos(0.02 * πt) dan sejenisnya untuk mengubah posisi depan-belakang secara bertahap

• Pada x dan y, penggunaan perkalian fungsi trigonometri seperti sin(0.02 * πt) dapat menghasilkan efek jari-jari yang paling besar di tengah dan mengecil di kedua ujung

• Dengan menerapkan perkalian ini pada x dan y, dimungkinkan untuk membuat lintasan yang bergerak memutar sambil mengikuti permukaan bola, yaitu spiral dalam ruang 3D

• Dengan kombinasi fungsi seperti ini, implementasi matematis dari lintasan heliks sferis dapat diselesaikan

Ringkasan dan Pemanfaatan

• Semua lintasan 3D dapat dibuat dengan mendefinisikan x, y, z masing-masing sebagai fungsi parametrik terhadap waktu
• Ini berarti lintasan dari lingkaran sederhana, spiral, hingga jalur yang kompleks dapat ditentukan secara matematis
• Melalui pendekatan ini, gerakan yang tampak rumit pun dapat dipahami secara visual sebagai lintasan matematis yang jelas, bukan kekacauan semata

---

visualrambling.space adalah proyek pribadi Damar untuk mempelajari beragam topik dan menceritakannya secara visual

[GN⁺]

Komentar Hacker News

• Dalam navigasi laut zaman dulu, kurva seperti ini (rhumb line, loxodrome) sangat penting.
  Karena mempertahankan arah yang sama selama berlayar jauh lebih mudah.
  Karena itu para pelaut berusaha mengikuti jalur seperti ini semaksimal mungkin.
  Dari sinilah konsep rhumb line muncul.
  Lihat Wikipedia Rhumb line.
  Peta Mercator juga membuat perhitungan arah seperti ini jadi lebih mudah.
  Lihat Wikipedia Mercator projection.
  Pengaturan ini sendiri terus melahirkan penemuan matematika baru.
  Misalnya, jika dilihat dalam proyeksi polar, bentuknya menjadi spiral logaritmik.
  Jika dilihat dari samping, bentuknya menjadi paket gelombang (wave packet).
  Karena menarik secara matematis, bahkan Paul Erdos pun tertantang olehnya.
  Makalah rujukan: Spiraling the Earth with C. G. J. Jacobi. Paul Erdös
  Sedikit tambahan, sepertinya hari ini di Hacker News memang banyak muncul topik tentang geometri bola (spherical geometry).
  Tautan diskusi terkait:
  1
  2
  3

  • Tetapi spiral pada postingan OP bukan loxodrome atau rhumb line.
    Kurva itu memiliki jarak antarlintasan yang tetap di permukaan, sedangkan rhumb line menurut definisinya selalu memotong meridian pada sudut yang sama, sehingga garisnya akan makin rapat saat mendekati kutub.
    Secara matematis juga,
    x = 10 · cos(π·t/2) · sin(0.02·π·t)
    y = 10 · sin(π·t/2) · sin(0.02·π·t)
    z = 10 · cos(0.02·π·t)
    jika persamaan ini diubah ke koordinat bola (R=10),
    λ(t) = π/2 · t (longitude)
    φ(t) = π/2 - 0.02·π·t (latitude)
    dan jika diturunkan maka d(λ)/d(φ) = -25 (nilai konstan).
    Rhumb line yang sebenarnya memiliki bentuk d(λ)/d(φ) = tan(α) · sec(φ), jadi berubah sesuai garis lintang.
    Artinya, kurva ini bukan rhumb line.
    Kalau penasaran dengan kurva yang sudut potongnya berubah, saya sarankan melihat tautan visualisasi ini.

• Terinspirasi oleh ini, saya jadi ingin memperkenalkan proyek seru terkait bola yang saya buat pada 2022.
  proyek spheredisksample
  Menurut saya ini proyek yang sangat cocok dengan tren hari ini.
  Saya juga merekomendasikan proyek sphere-resample yang mungkin akan disukai orang.

• Jangan lupa juga melihat postingan ini yang berisi diskusi terkait Rhumb line dan sebagainya.

• Menurut saya visualisasinya sangat keren.
  Satu hal lain yang saya harapkan adalah pembahasan tentang “apakah bisa bergerak dengan kecepatan konstan?”.
  Kalau tujuannya hanya menempatkan titik di sepanjang lintasan, itu tidak masalah, tetapi jika melihat gerakan nyatanya, akan terlihat bahwa pergerakannya jauh lebih lambat di awal dan akhir (hampir sepenuhnya ditentukan oleh radius).
  Kalau ingin bergerak dengan kecepatan konstan, atau bahkan menerapkan fungsi easing yang melambat lalu mempercepat, saya penasaran metode apa yang bisa dipakai.
  Mungkin ada trik matematika yang elegan.
  Saya cuma membayangkan secara kasar: menurunkan persamaan untuk mendapatkan fungsi kecepatan, lalu memproses dx, dy, dz dengan rumus Pythagoras, kemudian menggunakan invers fungsi kecepatan itu untuk mereparameterisasi menjadi t'.
  Tapi saya tidak terlalu akrab dengan matematika ini, jadi rasanya seperti asal bicara saja.

  • Untuk bergerak dengan kecepatan konstan, yang dibutuhkan adalah Euclidean parameterization.
    Artinya, nilai t harus disesuaikan agar proporsional dengan jarak Euclidean yang sudah ditempuh.
    Ini adalah konsep yang selalu dibutuhkan saat membuat animasi yang bergerak mengikuti lintasan.
    Namun biasanya tidak ada closed-form solution, jadi perlu diselesaikan secara numerik atau komputasional.
    Dalam praktiknya, untuk setiap t, kita mencari dt yang sesuai dengan jarak yang diinginkan (ds) menggunakan pencarian biner atau interpolation search.
    Lalu hasilnya disimpan untuk membuat polyline dari titik-titik dengan jarak tetap; ini pendekatan yang praktis, selama kurvanya sendiri tidak terus berubah terhadap waktu.

  • Trik matematika yang disebut di pertanyaan itu memang arc length parameterization.
    Yaitu mengomposisikannya dengan invers dari fungsi panjang busur (arc length) kurva.
    Kecuali untuk beberapa keluarga kurva tertentu, kebanyakan tidak memiliki bentuk tertutup, jadi biasanya didekati secara komputasional.

  • Intuisi untuk memperlambat t itu memang benar.
    Kecepatan sudut tetap terjaga terhadap t, tetapi radiusnya juga berubah terhadap t.
    Ini semacam konsep spiral Archimedean.
    Kalau diparameterisasi sehingga besar kecepatannya konstan, gerakannya bisa dibuat lebih seragam.
    Hanya saja, karena radius mulai dari 0, nilai limit itu harus ditangani dengan satu atau lain cara.
    Kalau tujuannya agar sebuah objek mengikuti lintasan di game misalnya, pendekatan yang lebih praktis juga bisa dengan menargetkan lintasan dan garis singgung terhadap sumbu Z, lalu berulang kali memberi batasan kecepatan dan menariknya seperti mainan manik (bead toy).

• Soal bagian yang mengatakan, “…sebenarnya ini tidak chaotic. Ini hanya lintasan yang didefinisikan oleh fungsi matematika”,
  saya tidak tahu apakah fungsi yang ditampilkan benar-benar menunjukkan fenomena chaos, tetapi konsep chaos sendiri pada dasarnya memang muncul dari fungsi matematika deterministik yang sangat sensitif terhadap kondisi awal.
  Mungkin penulis memilih kata “chaotic” saat sebenarnya yang dimaksud adalah “random” atau “non-deterministic”.

  • Menurut saya koreksi teknis seperti ini sangat penting.
    Pembaca Hacker News pasti, atau setidaknya seharusnya, menganggap pembedaan seperti ini menarik.
    Dalam matematika, chaos adalah sistem deterministik yang sangat sensitif terhadap kondisi awal.
    Hasilnya mungkin tampak acak, tetapi secara konsep sepenuhnya berbeda dari randomness.

  • Saya setuju bahwa istilah chaos memang merujuk pada sifat yang muncul dari fungsi matematika deterministik.
    Tetapi dalam definisi kamus sehari-hari, istilah ini juga berarti “ketidakteraturan dan kebingungan total”, “keadaan yang dikuasai kebetulan”, atau “ketidakdapatdiprediksiannya sistem alam yang kompleks”.
    Agar sesuai dengan ekspektasi pembaca umum dan kebiasaan bahasa sehari-hari, menurut saya cukup masuk akal untuk menjelaskannya dengan bahasa yang mudah dipahami alih-alih menekankan ketelitian matematis.

• Sedikit masukan: di ponsel, cara navigasinya terasa berbeda dari yang saya perkirakan.
  Saya tidak tahu cara mengoperasikannya, jadi saya sempat mencoba scroll.
  Saat menyentuh layar ternyata pindah ke halaman berikutnya, saya jadi berpikir “oh, begitu caranya.”
  Saya menekan sisi kanan lalu berpindah ke halaman berikutnya, dan saat kemudian saya menekan lagi di sisi kiri untuk mencoba kembali, ternyata malah melewati dua halaman.
  Akibatnya saya jadi melewatkan beberapa layar dan agak kecewa.
  Bukan masalah besar, tetapi sedikit petunjuk akan mengurangi kebingungan dan membuat saya bisa lebih fokus.

  • Ada petunjuk penggunaan di slide pertama.
    Tetapi sebagai pelengkap, menambahkan gestur swipe juga sepertinya bagus (meski saya pribadi lebih suka kontrol tap).
    Kalau ingin meniru antarmuka card stack ala aplikasi media sosial, swipe juga akan terasa natural.

• Isinya berada di level dasar, jadi tampaknya bagus untuk anak-anak yang sedang belajar matematika.
  Akan lebih bagus lagi kalau konsep matematika seperti rumus lingkaran (x = r cos t, y = r sin t) juga disebutkan di beberapa bagian.
  Topik bagus untuk dikembangkan lebih lanjut adalah koordinat polar dan aljabar linear (vektor, transformasi, transformasi dalam ruang 3D, dan sebagainya).
  Kalau penulis belum terlalu akrab dengan topik-topik ini, saya merekomendasikan video YouTube 3blue1brown.
  Dari sudut pandang programmer, bagian tentang coding, library, atau objek 3D nyata (vertex, deformasi, dan sebagainya) tidak dibahas, jadi akan lebih baik jika itu juga disertakan.

• Saya penasaran soal “ketepatan” pergerakan pada sumbu z dalam heliks bola.
  Dengan berbagai fungsi seperti z = c * t, kita bisa membuat pergerakan sederhana, dan dari sana ketebalan, konsistensi, serta keseragaman “lapisan” akan berubah.
  Fungsi yang dipakai di sini memang terlihat bagus secara visual, tetapi dari sudut pandang jarak antarpilinan yang konstan, atau pembagian luas yang seragam, saya penasaran bagaimana sebaiknya tujuan itu ditentukan.
  Saya juga ingin tahu bagaimana fungsi ini dipilih, atau apakah memang hanya dipilih karena terlihat bagus.

  • Kemungkinan besar fungsi ini dipilih hanya karena mudah diprogram dan enak dilihat.
    Menurut saya cara yang benar-benar “tepat” adalah membuat titik bergerak dengan kecepatan konstan di ruang 3D, seperti kapal yang benar-benar bergerak di atas Bumi.
    Dalam kasus itu, persamaannya (lihat contoh kode):
    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))
    ubah ke koordinat 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))
    Dalam praktiknya memang harus sampai memakai fungsi logaritma dari tan(phi/2), dan bentuk ini muncul dari penyelesaian persamaan diferensial.
    Saya rasa penulis mungkin tidak sampai memakai pendekatan serumit ini (ln(tan(phi/2))).

  • Kuncinya adalah membuat kecepatan lintasan konstan.
    Kita bisa menyusun turunannya agar kecepatannya konstan, lalu menyelesaikannya terhadap z, atau mereparameterisasi ulang menjadi t’.
    Memilih z = c * t memengaruhi parameterisasi lintasan sekaligus trajektori nyatanya.

• Animasi ini sangat halus dan mengesankan.
  Belakangan ini saya sempat menangani masalah penyebaran N titik di atas bola, dan dalam prosesnya saya menemukan algoritma sederhana bernama fibonacci-sphere.
  Metode ini juga digunakan untuk membuat spiral di atas permukaan bola guna menempatkan titik-titik.
  Makalah terkait: PDF makalah fibonacci-sphere

• Saya heran belum ada yang menyebut Acko.net.
  Ada posting blog yang sangat bagus yang memakai alat serupa untuk menjelaskan bilangan kompleks dan fraktal, terutama fractal Julia, secara visual.
  Kalau tertarik dengan topik ini, wajib dibaca.
  How to fold a julia fractal - blog Acko.net

• Di Desmos 3D, persamaan kurva ini bisa dimanipulasi langsung.
  tautan visualisasi Desmos 3D
  Menarik juga bahwa persamaan parametrik spiral ini bersifat linear dalam sistem koordinat bola.
  Lihat Wikipedia transformasi koordinat.

• Terima kasih sudah membagikannya, sangat menarik untuk dilihat.