Show HN: I was curious about spherical helix, ended up making this visualization

Summary

MOVING OBJECTS IN 3D SPACEtap/click the right side of the screen to go forward →Have you ever wondered how to move objects along a spherical helix path?Okay… probably not, right?But one morning, this question popped into my head.It stuck with me long enough that I ended up diving into a few articles about it.From there, it spiraled into lots of explorations, trying to figure out how to move objects in 3D space.From a simple circle......to a spiral......to this complex, chaotic path.All these explorations made me want to share what I learned with you.I hope you enjoy this as much as I did.Let’s start!A helix is a shape that loops around and around, like a spring.In a spherical helix, it loops around a sphere.To move an object along a spherical helix path, we need to define its 3D coordinates to follow a helical pattern around a sphere.How do we do this?We'll get there! But first, let’s see how to position and move objects in 3D space.In 3D space, we position objects by setting its coordinates along three axes: x,y, and z.The x-axis typically represents horizontal movement—left or right.The y-axis typically represents vertical movement—up or down.The z-axis typically represents depth—forward or backwardTo move an object in 3D space, we can use mathematical functions to set its position over time.For example, this cube's x position is set to 10 * cos(πt/2), where t is time (in seconds).x-labelThe result? It oscillates from 10 to -10 along the x-axis every 2 seconds, following a cosine wave.x-labelSimilarly, setting the y position to 10 * cos(πt/2) makes the cube oscillates vertically, from 10 to -10 every 2 seconds.y-labelWe can create a two-dimensional path by setting the x and y positions to different functions.For example, a circle.For this circle, the x position is set to 10 * cos(πt/2).The cube starts at x = 10, moves to -10 in 2 seconds, then back to 10, and so on.x-labelMeanwhile, the y position is set to 10 * sin(πt/2).y-labelThe movement for x and y may look s...