Hình trực quan hóa được tạo ra từ sự tò mò về đường xoắn cầu

• Giới thiệu khái niệm về cách biểu diễn chuyển động của vật thể trong không gian 3D bằng hàm tham số
• Giải thích quá trình xây dựng bằng toán học các quỹ đạo ngày càng phức tạp, từ đường tròn, đường xoắn cho đến quỹ đạo xoắn cầu
• Có thể hiện thực nhiều kiểu chuyển động khác nhau bằng cách định nghĩa mỗi trục tọa độ (x, y, z) là một hàm của thời gian
• Đặc biệt, với đường xoắn cầu, quỹ đạo xoắn 3 chiều được tạo ra bằng phép nhân các hàm lượng giác để làm thay đổi bán kính
• Đây là một ví dụ sáng tạo cho thấy có thể di chuyển vật thể theo những quỹ đạo tùy ý bằng cách làm này

---

Khám phá chuyển động của vật thể trong không gian 3D

Bài viết này là kết quả của một quá trình tìm hiểu cá nhân về nhiều cách khác nhau để di chuyển vật thể trong không gian 3D, đặc biệt là cách định nghĩa và hiện thực về mặt toán học quỹ đạo đường xoắn cầu (spherical helix)

Cơ bản về helix và chuyển động 3 chiều

• Helix là một cấu trúc 3 chiều cuộn xoay như lò xo

• Đường xoắn cầu là khái niệm chuyển động theo hình xoắn trên bề mặt của một hình cầu

• Vị trí của một vật thể trong không gian 3D được xác định bởi tọa độ trên 3 trục x, y, z

  • Trục x: đảm nhiệm chuyển động trái phải
  • Trục y: tương ứng với chuyển động lên xuống
  • Trục z: thay đổi theo hướng trước sau (chiều sâu)

• Có thể tạo ra quỹ đạo chuyển động bằng cách định nghĩa vị trí của vật thể theo thời gian (t) bằng các hàm toán học

Hàm tham số và các ví dụ quỹ đạo đơn giản

• Ví dụ: nếu định nghĩa vị trí x là 10 * cos(πt/2) thì sẽ tạo ra chuyển động dạng sóng cosine qua lại từ -10 đến 10 mỗi 2 giây

• Theo cách tương tự, nếu đặt vị trí y là 10 * cos(πt/2) thì cũng có thể tạo chuyển động qua lại theo phương thẳng đứng

• Nếu dùng các hàm khác nhau cho x và y (ví dụ: x = 10 * cos(πt/2), y = 10 * sin(πt/2)) thì sẽ tạo ra các chuyển động lệch pha, và khi kết hợp hai chuyển động này sẽ sinh ra quỹ đạo tròn

• Nếu nhân thêm một hạng tỷ lệ với thời gian vào hàm (ví dụ: x = 0.03 * t * cos(πt/2)) thì có thể tạo ra một mẫu có bán kính tăng dần, tức là quỹ đạo xoắn ốc (spiral)

Tạo quỹ đạo đường xoắn cầu (spherical helix)

• Khác với đường xoắn trong mặt phẳng, đường xoắn cầu cần một quỹ đạo 3 chiều

  • Có thể làm thay đổi dần vị trí trước sau bằng cách dùng 10 * cos(0.02 * πt) cho giá trị z

• Với x và y, có thể tận dụng phép nhân các hàm lượng giác như sin(0.02 * πt) để tạo hiệu ứng bán kính lớn nhất ở giữa và nhỏ dần ở hai đầu

• Khi áp dụng phép nhân này cho cả x và y, có thể tạo ra quỹ đạo di chuyển theo chuyển động tròn đồng thời bám trên bề mặt của hình cầu, tức là di chuyển theo đường xoắn trong không gian 3 chiều

• Bằng sự kết hợp các hàm như vậy, có thể hoàn thiện việc hiện thực toán học của quỹ đạo đường xoắn cầu

Tóm tắt và ứng dụng

• Mọi quỹ đạo 3D đều có thể được tạo ra bằng cách định nghĩa x, y, z lần lượt là các hàm tham số của thời gian
• Điều này có nghĩa là từ đường tròn, đường xoắn ốc đơn giản đến các quỹ đạo phức tạp đều có thể được chỉ định bằng toán học
• Thông qua cách tiếp cận này, có thể hiểu một cách trực quan rằng ngay cả những chuyển động trông phức tạp cũng không phải là hỗn loạn mà là những quỹ đạo toán học được định nghĩa rõ ràng

---

visualrambling.space là dự án cá nhân nơi Damar học về nhiều chủ đề khác nhau và kể lại chúng theo cách trực quan

[GN⁺]

Ý kiến Hacker News

• Ngày xưa trong hàng hải biển, các đường cong kiểu này (rhumb line, loxodrome) từng rất quan trọng
  bởi vì việc giữ cùng một hướng đi trong suốt hành trình dễ hơn rất nhiều
  vì thế các thủy thủ cố gắng đi theo loại lộ trình này nhiều nhất có thể
  từ đó mới xuất hiện khái niệm rhumb line
  Xem thêm Wikipedia về Rhumb line
  Bản đồ Mercator giúp việc tính toán các hướng đi như vậy dễ hơn
  Xem thêm Wikipedia về Mercator projection
  Chính thiết lập này đã liên tục dẫn đến những khám phá toán học mới
  Ví dụ, khi nhìn dưới phép chiếu cực (polar projection) thì nó trở thành một đường xoắn ốc logarit
  Nhìn từ bên cạnh thì nó trở thành một gói sóng (wave packet)
  Sự thú vị về mặt toán học của nó thậm chí còn khiến cả Paul Erdős tham gia tìm hiểu
  Bài báo tham khảo: Spiraling the Earth with C. G. J. Jacobi. Paul Erdös
  Ngoài lề một chút, hôm nay có vẻ là ngày Hacker News đăng khá nhiều câu chuyện về hình học cầu (spherical geometry)
  Liên kết thảo luận liên quan:
  số 1
  số 2
  số 3

  • Nhưng đường xoắn ốc trong bài gốc OP nêu ra không phải là rhumb line (loxodrome, rhumb line)
    Đường cong này có khoảng cách đều trên bề mặt, còn rhumb line theo định nghĩa luôn cắt các kinh tuyến dưới cùng một góc, nên càng gần vùng cực thì các đường càng dày đặc hơn
    Viết theo công thức,
    x = 10 · cos(π·t/2) · sin(0.02·π·t)
    y = 10 · sin(π·t/2) · sin(0.02·π·t)
    z = 10 · cos(0.02·π·t)
    Nếu đổi các phương trình này sang tọa độ cầu (R=10),
    λ(t) = π/2 · t (longitude)
    φ(t) = π/2 - 0.02·π·t (latitude)
    Lấy vi phân thì d(λ)/d(φ) = -25 (giá trị hằng)
    Rhumb line thật sự có d(λ)/d(φ) ở dạng tan(α) · sec(φ), nên thay đổi theo vĩ độ
    Tức là đường cong này không phải rhumb line
    Nếu muốn xem một đường cong có góc giao thay đổi, tôi khuyên nên xem liên kết trực quan hóa này

• Nhờ bài này mà tôi nhớ lại và muốn giới thiệu một dự án thú vị liên quan đến hình cầu mà tôi làm vào năm 2022
  dự án spheredisksample
  Tôi nghĩ đây là một dự án rất hợp với xu hướng hôm nay
  Cũng xin đề xuất thêm dự án sphere-resample, có lẽ nhiều người sẽ thích

• Cũng nên tham khảo bài đăng này, nơi có thảo luận liên quan đến rhumb line và các chủ đề tương tự

• Tôi thấy phần trực quan hóa thực sự rất đẹp
  Điều tôi còn mong chờ thêm là nội dung về câu hỏi “liệu có thể chuyển động với tốc độ không đổi không?”
  Nếu mục đích chỉ là đặt các điểm dọc theo đường đi thì không sao, nhưng khi xem chuyển động thực tế có thể thấy nó di chuyển chậm hơn hẳn ở đầu và cuối (gần như do bán kính quyết định)
  Nếu muốn nó chuyển động với tốc độ đều, hoặc thậm chí áp dụng cả hàm easing để lúc chậm lúc nhanh, tôi tò mò không biết sẽ làm theo cách nào
  Có lẽ sẽ có một mẹo toán học khá hay ở đây
  Tôi chỉ đoán đại rằng phải vi phân công thức để tạo ra hàm vận tốc, rồi dùng định lý Pythagore để xử lý dx, dy, dz, sau đó dùng hàm nghịch đảo của hàm vận tốc để tái tham số hóa (reparameterization) về t'
  Nhưng tôi không đủ quen với phần toán này nên cảm giác như chỉ đang nói suông

  • Để di chuyển với tốc độ không đổi thì cần “Euclidean parameterization”
    Nghĩa là giá trị t phải được điều chỉnh sao cho tỉ lệ với quãng đường Euclid đã đi
    Đây là một khái niệm luôn cần đến khi làm animation chuyển động theo đường cong
    Nhưng đa số trường hợp không có closed-form solution, nên phải giải bằng phương pháp số (tính toán)
    Trong thực tế, với mỗi t, người ta tìm dt ứng với khoảng cách mong muốn (ds) bằng tìm kiếm nhị phân hoặc interpolation search
    Sau đó lưu kết quả này lại để tạo polyline gồm các điểm cách đều nhau là cách tiếp cận thực dụng (miễn là đường cong không tiếp tục thay đổi theo thời gian)

  • Mẹo toán học được nhắc đến trong câu hỏi chính là “arc length parameterization”
    Đó là việc hợp thành với hàm nghịch đảo của hàm độ dài cung (arc length) của đường cong
    Ngoại trừ một vài họ đường cong nhất định, đa phần đều không có closed form, nên phải tiếp cận theo hướng tính toán

  • Trực giác muốn làm cho t thay đổi chậm lại là đúng
    Tốc độ góc được giữ theo t, nhưng bán kính cũng thay đổi theo t
    Nó là một kiểu ý tưởng Archimedean spiral
    Nếu tham số hóa sao cho độ lớn vận tốc là hằng số thì chuyển động sẽ đều hơn
    Tuy vậy, vì bán kính bắt đầu từ 0 nên bằng cách nào đó vẫn phải xử lý giá trị giới hạn (limit)
    Nếu cần bám theo đường đi trong game chẳng hạn, một cách đơn giản thực tế là nhắm vào đường và tiếp tuyến của nó theo trục Z, rồi lặp lại việc áp ràng buộc tốc độ và kéo vật thể di chuyển kiểu bead toy

• Về câu “...thực ra nó không hỗn loạn (chaotic). Nó chỉ đơn giản là một đường đi được xác định bởi hàm toán học”,
  Tôi không biết hàm được nêu ra có thực sự thể hiện hiện tượng hỗn loạn hay không, nhưng bản thân khái niệm hỗn loạn vốn là hiện tượng xuất hiện trong các hàm toán học mang tính xác định (deterministic), với độ nhạy cực cao với điều kiện ban đầu
  Có lẽ tác giả đã chọn từ “chaotic” thay vì “random” hoặc “non-deterministic”

  • Tôi nghĩ kiểu chỉ ra chi tiết kỹ thuật như trên là rất quan trọng
    Với độc giả Hacker News (hoặc ít nhất là nên như vậy), những phân biệt như thế rất đáng quan tâm
    Về mặt toán học, hỗn loạn là một hệ xác định cực kỳ nhạy với điều kiện ban đầu
    Kết quả có thể trông ngẫu nhiên, nhưng về mặt khái niệm thì hoàn toàn khác với tính ngẫu nhiên (randomness)

  • Tôi đồng ý rằng bản thân thuật ngữ hỗn loạn là một tính chất phát sinh từ các hàm toán học xác định
    Tuy nhiên, theo nghĩa từ điển trong đời sống thường ngày, nó thường mang nghĩa như “sự vô trật tự và hỗn mang hoàn toàn”, “trạng thái bị chi phối bởi ngẫu nhiên”, hay “tính không thể dự đoán của các hệ tự nhiên phức tạp”
    Để phù hợp với kỳ vọng và thói quen ngôn ngữ của người đọc phổ thông, tôi nghĩ cách giải thích bằng ngôn ngữ dễ hiểu thay vì quá chặt chẽ theo toán học cũng hoàn toàn có ý nghĩa

• Một góp ý là trên di động, cách điều hướng khác với điều tôi dự đoán
  Tôi không biết phải thao tác thế nào nên đã thử cuộn
  Khi chạm vào màn hình thì nó sang trang tiếp theo, nên tôi nghĩ “à, ra vậy”
  Tôi bấm bên phải và nó sang trang kế, đến lúc bấm thêm lần nữa thì tôi bấm bên trái để thử quay lại, nhưng lại khiến nó nhảy qua thêm hai trang
  Thế là tôi bị lỡ mất vài màn hình nên hơi tiếc
  Không phải vấn đề lớn, nhưng nếu có thêm chút hướng dẫn thì hẳn sẽ bớt bối rối và tập trung hơn

  • Ở slide đầu tiên có hướng dẫn cách dùng
    Dù vậy, tôi nghĩ thêm thao tác swipe như một phương án phụ trợ cũng sẽ hay (cá nhân tôi vẫn thích thao tác tap hơn)
    Nếu muốn giống giao diện “card stack” của các app mạng xã hội thì swipe cũng sẽ khá tự nhiên

• Nội dung ở mức cơ bản nền tảng nên có vẻ phù hợp để trẻ em tham khảo khi học toán
  Sẽ còn hay hơn nếu thỉnh thoảng nhắc thêm các khái niệm toán như công thức đường tròn (x = r cos t, y = r sin t)
  Những chủ đề tốt để mở rộng thêm là tọa độ cực (polar coordinate) và đại số tuyến tính (vector, biến đổi, biến đổi trong không gian 3D, v.v.)
  Nếu chính tác giả chưa quen với các chủ đề này thì tôi đề xuất video YouTube của 3blue1brown
  Từ góc nhìn của lập trình viên, phần coding, thư viện hoặc xử lý object 3D thực tế (vertex, deformation, v.v.) còn thiếu, nên nếu nói thêm đến phần đó thì sẽ càng tốt hơn

• Tôi tò mò về “độ chính xác” của chuyển động theo trục z trong spherical helix
  Có thể tạo chuyển động đơn giản bằng nhiều hàm như z = c * t, và khi đó độ dày, tính nhất quán, độ đồng đều của các “lớp vỏ” sẽ khác nhau
  Hàm được dùng ở đây trông rất đẹp về mặt thị giác, nhưng nếu xét theo tiêu chí như khoảng cách đều giữa các vòng xoắn (hoặc chia đều diện tích bề mặt chẳng hạn) thì tôi không rõ nên đặt mục tiêu thế nào
  Tôi muốn biết hàm này được chọn thông qua quá trình nào, hay đơn giản chỉ vì nhìn đẹp nên chọn vậy thôi

  • Có lẽ hàm này được chọn đơn giản vì thuận tiện cho việc lập trình và nhìn đẹp mắt
    Tôi nghĩ cách “chính xác” thật sự sẽ là để điểm di chuyển trong không gian 3D với tốc độ không đổi (ví dụ như một con tàu đi trên Trái Đất thật)
    Khi đó công thức sẽ là (xem ví dụ mã)
    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))
    chuyển sang tọa độ 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))
    Trên thực tế phải dùng đến cả hàm log của tan(phi/2), và dạng này xuất hiện khi giải phương trình vi phân
    Tôi đoán tác giả có lẽ không đi theo hướng phức tạp đến mức phải dùng ln(tan(phi/2))

  • Cốt lõi là làm cho vận tốc của đường đi là hằng số
    Có thể tiếp cận bằng cách thiết lập đạo hàm để vận tốc trở thành hằng số, rồi giải theo z, hoặc tái tham số hóa (reparameterization) theo t'
    Việc chọn z = c * t đồng thời ảnh hưởng cả đến cách tham số hóa của đường đi lẫn quỹ đạo thực tế

• Animation rất mượt nên gây ấn tượng mạnh
  Gần đây tôi có dịp làm việc với bài toán phân bố N điểm trên mặt cầu, và trong quá trình đó đã tìm thấy một thuật toán đơn giản tên là “fibonacci-sphere”
  Cách này cũng dùng để tạo một đường xoắn trên mặt cầu rồi đặt các điểm lên đó
  Bài báo liên quan: PDF bài báo fibonacci-sphere

• Tôi ngạc nhiên là Acko.net vẫn chưa được nhắc đến
  Có một bài blog rất hay dùng công cụ tương tự để giải thích trực quan về số phức và fractal, đặc biệt là Julia fractal
  Nếu quan tâm đến chủ đề này thì rất đáng đọc
  How to fold a julia fractal - blog Acko.net

• Có thể tự tay chỉnh các phương trình đường cong này trong 3D Desmos Liên kết trực quan hóa Desmos 3D
  Điểm thú vị là phương trình tham số của đường xoắn này lại tuyến tính trong hệ tọa độ cầu
  Xem thêm Wikipedia về chuyển đổi tọa độ

• Cảm ơn vì đã chia sẻ, tôi thấy nó thực sự rất thú vị