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

These used to be super important in early oceanic navigation. It is easier to maintain a constant bearing throughout the voyage. So that's the plan sailors would try to stick close to. These led to let loxodromic curves or rhumb lines.

https://en.m.wikipedia.org/wiki/Rhumb_line

Mercator maps made it easier to compute what that bearing ought to be.

https://en.m.wikipedia.org/wiki/Mercator_projection

This configuration is a mathematical gift that keeps giving. Look at it side on in a polar projection you get a logarithmic spiral. Look at it side on you get a wave packet. It's mathematics is so interesting that Erdos had to have a go at it [0]

On a meta note, today seems spherical geometry day on HN.

https://news.ycombinator.com/item?id=44956297

https://news.ycombinator.com/item?id=44939456

https://news.ycombinator.com/item?id=44938622

[0] Spiraling the Earth with C. G. J. Jacobi. Paul Erdös

https://pubs.aip.org/aapt/ajp/article-abstract/68/10/888/105...

Awesome visualizations.

The part that I was expecting to see but didn't: how can you move at a constant speed? For the original purpose of positioning objects along a path, it doesn't matter. But when moving, you can see it's moving much more slowly at the beginning and end (mostly determined by the radius). What if I want it to travel at a constant rate? Or even apply an easing function to the speed?

I'm sure there's some fancy mathematical trick that would just do it. If I were only more comfortable with math... my handwavy sketch would be to compute the speed function by differentiating the formulas to get dx, dy, and dz and passing them through the Pythagorean equation, then reparameterize on a t' variable using the inverse of the speed function? Maybe? I feel like I'm speaking using words I don't understand.

> If you like this, please consider following me on Twitter and sharing this with your friends.

I do like this and will share with a couple of friends. But I no longer have a Twitter account and will definitely not rejoin. Would you consider adding an RSS or JSON feed to your website? Or make a Mastodon account, those provide RSS feeds by default.

I can't tell why, but I'm getting terrible performance on Linux/Brave. The CPU spikes immediately on visit. I'm on a powerful machine (32 GiB RAM, Intel i9 w/ 24 cores).

Thanks. My useful feedback is that navigation violated my expectations. I was in mobile FWIW. I didn't know what to do so I started to scroll. My touch to the screen kicked into the next pane so I'm like "oh, okay". I happened to touch the right side so I thought that advanced it and so when I later clicked an extra time unintentionally, I tried to click the left side to go back (note that people who read right to left it top to bottom may have different intuitions [or be used to an insensitive web]). Unfortunately that just skipped another screen so that I missed two in a row. Not fatal because I kept going but disappointing and micro-sad. I think some subtle guidance could have removed the ambiguity and helped me focus and engage better.

I was wondering about the “correctness” of the z-axis movement for the spherical helix. You could pick lots of different functions, including simple linear motion (z = c * t). This would obviously affect the thickness and consistency of the “peels”.

The equation used creates a visually appealing result but I’m wondering what a good goal would be in terms of consistency in the distance between the spirals, or evenness in area divided, or something like that.

How was this particular function selected? Was it derived in some way or simply hand-selected to look pleasing?

    const degrees = Math.PI / 180;
    const bearing = 5 * degrees; // or it might be 85 degrees? Not sure off the top of my head
    const k = Math.tan(bearing);
    const v = 0.001 // some velocity, adjust as needed
    const phi = (t) => v*t/Math.sqrt(1 + k*k) // the sqrt is not strictly needed
    const theta = (t) => k*Math.ln(Math.tan(phi(t)/2)) // this is the annoying one haha

    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))

It's a pretty basic primer to the subject, but good for kids learning maths. Could do with some callbacks to maths concepts like the circle equation ( x = r cos (t) and y = r sin (t) ).

Possible topics to branch further into would be polar coordinates and linear algebra basics (vectors, transformations, transformations in 3d space). If you the author aren't sure of such topics, I would recommend 3blue1brown yt videos on the matter

Possibly better for that than for programmers (given it doesn't include code or libraries used or anything about actually manipulating 3d objects like vertices, stretching and morphing to achieve the effect shown etc)

> Together, these functions create a spherical helix... That's all!

This strikes me as backwards reasoning.

You are showing "these functions" -> spherical helix

But I actually want spherical helix -> "these functions"

1. What if I want to make some other shape? I'm lost.

2. I have learned nothing about the spherical helix.

This is excellent. I'm always looking for good things to show my students on coordinate systems and geometry, and this joins the list. Thank you for diving down the rabbit hole and bringing this back for everyone.

If you want really great further consideration of creating geometric figures with parametric equations, Joseph Choma's book "Morphing" is an all-timer.

https://www.quercusbooks.co.uk/titles/joseph-choma/morphing/...

Very cool & pretty, but I feel a little let down. There is a huge leap from the basics of 3d plotting & spheres to the crazy pattern you tease and then show at the end. I understand it as someone who kind of knows this stuff already, but I think its way too big of a leap for someone who doesn't have the background.

For me personally it's simpler to think about it as having an f(theta, r) = r (cos(thetha), sin(theta)), interpreting theta as a compass direction and r as a distance to walk along a great circle. So g(t) = polar_to_R3(f(t k, t l)). Changing the relative sizes of k and l changes the tightness of the helix.

I love the slight aliasing on the visuals (iOS Safari). It makes it obvious that it’s rendered on the fly.

This was amazing! I also checked the understanding neural network. Looking forward to the next part in that one. Keep up the good work!

When I first opened it, its basically a bunch of static pages that made absolutely no sense. My first question was 'why is this garbage being #1 on HN?'

Then I realized that, unlike the early web with banners of "best viewed in Netscape navigator", this was an unstated "best viewed in google chrome".

Alas. At least please check and validate if the site works in Firefox, or notify appropriately. Because this demonstrably does not.

Nifty, but what I'm curious about is how you created the drain/fill effect on the cube.

I LOVE when people geek out about the most simple mathematical things*, especially discovering the animation power of the trigonometric functions... or any of mathematics underlying modern interactive stuff. It's one thing to know what they do, it's another to understand the power of that tool.

* I wrote a similar article around making "blobs" a while back: https://www.hailpixel.com/articles/generative-art-simple-mat...

I believe there is a typo here:

y = 10 * sin(πt/2) * sin(0.02 * πt)

On the previous two slides the end is sin(0.2 * πt)

Brilliant, I learned something today.

Really love this project, I only have small little UX nitpick: as lefthanded person it is quite cumbersome to tap right side of screen. Go to solution is to navigate using swiping which is ambidexterous.

That is beautiful animation. This is a great example of a visual lesson that leaves a chalkboard in the dust (ha).

Well this is lovely. Well done.

Best thing I have seen on HN in ages. Also interesting for a CNC geek.

That's an excellent job of teaching - thank you!

Really nice animations! This is the type of thing that was really hard for me to grasp in school. This lays it out so plainly.

I love this. It's pretty and really easy to digest.

This is super nice to view, could you share how you made it? I want to make something similar for Rotation Matrices

Beautifully done, thank you for sharing. :-)

The solar system spiraling through the universe.

I was expecting linear progression on z and some nasty square root for amplitude of x,y. It's cool that he basically just used another parametric circle drawn on coordinates z and amplitude of x,y oscillations.

Okay, I have some followup questions. Are the points equally spaced? I.e. the cube's |∆p| is constant? I see you scale z by the sin. What happens of you don't?

This is very cool, but somewhat confusing to the eye, because you are actually demonstrating the movement of a point along a path, while visualising it with a cube whose orientation doesn't change when it feels like it should.

The point that is moving is in the centre of the cube. But the cube's orientation is fixed in global space.

So the cube's orientation relative to the path of the spiral/helix is not quite the same as its orientation relative to the path of the straight line.

Your mission, should you choose to accept it ;-)

https://en.wikipedia.org/wiki/Frenet–Serret_formulas

quite beautiful