Key Features
Tech Stack
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...
https://observablehq.com/@jrus/spheredisksample
https://news.ycombinator.com/item?id=44963521
to fit the trend of the day. People may also enjoy
Do you mean my diagonal grid that I projected back onto the sphere? I'm not sure that has a name.
Edit: fantastic graphics. You should submit the other one as an HN post too.
It is indeed raining spherical geometry today.
It has equal spacing on the surface between lines, a loxodrome can't have that property since by definition it must cross the meridians at the same angle at all times. That means it always gets denser near the poles.
---
Start with the curve:
x = 10 · cos(π·t/2) · sin(0.02·π·t)
y = 10 · sin(π·t/2) · sin(0.02·π·t)
z = 10 · cos(0.02·π·t)
Convert to spherical coordinates (radius R=10):
λ(t) = π/2 · t (longitude)
φ(t) = π/2 - 0.02·π·t (latitude)
Compute derivative d(λ)/d(φ):
d(λ)/dt = π/2
d(φ)/dt = -0.02·π
d(λ)/d(φ) = (π/2)/(-0.02·π) = -25 (constant)
A true rhumb line must satisfy:
d(λ)/d(φ) = tan(α) · sec(φ)
which depends on latitude φ.
Since φ(t) changes, sec(φ) changes, so no fixed α can satisfy this.
Conclusion: the curve is not a rhumb line.
this is how one should look for varying intersection angles:
"The simple requirement that one should move on the surface of a sphere with constant speed while maintaining a constant angular velocity with respect to a fixed diameter, leads to a path whose cylindrical coordinates turn out to be given by the Jacobian elliptic functions."
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/...
In both of these cases, mathematically generating the points to visit (in gcode) is needed, and we don't care about constant speed - the firmware handles the instruction->motion part.
I am thinking about non-planar printing mostly, but this could also apply to CNC finishing passes.
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?
that was also my first intuition when making this, but turned out making the z function linear won't make it a sphere.
to make a sphere, you have to configure it in a way so that it forms a circle with the other axes. In this vis, its the sin(0.02 * πt) and cos(0.02 * πt) part that do this.
someone makes an interactive version here: https://www.desmos.com/3d/t66etxi1y8 (thanks!) so you can try changing the z function for yourself.
Actually, now that I think about it, choosing z = c * t is kind of both influencing how the path is parameterized as well as the path carved out on the sphere.
The actual "correct" thing to do would probably be to have the point maintain constant speed in 3D space like a real boat sailing on a globe, right? But that's a rather bigger lift:
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))
* I wrote a similar article around making "blobs" a while back: https://www.hailpixel.com/articles/generative-art-simple-mat...
thanks for sharing! definitely an inspiration, I might use it for next project :D
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.
Twitter is the absolute worst way to get that, even if I had an account.
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.
Unfortunately, there’s usually no closed-form solution for it, so we have to do it numerically. And for doing that there’s in general no better way than at each t, binary/interpolation search a dt that roughly corresponds to the ds that you want (start with the previous dt, it’s likely a very good approximation).
In practice, you’d do that once and store the results, basically approximating the curve as a polyline of evenly-spaced points– at least assuming that the curve itself isn’t changing over time!
Generally this idea is called motion profiling: https://www.motioncontroltips.com/what-is-a-motion-profile/
It’s sort of like an Archimedean spiral. So, yeah, if you parameterize velocity and make that constant, you’re in better shape. Note that the radius starts at zero, though, so something is going to have to deal with limits.
A simpler path following approximation (e.g., for a game) might be to just give an iterative system path and tangent targets with respect to Z and then provide an iterative constraint on velocity with some sort of basic tweening (e.g., new = a * old + (1 - a) * target). Then just drag the thing along Z, like bead toys for toddlers.
currently the path is expressed as function of (t), and it's the t that progressed at the constant speed.
so the cube will finished one loop at the same duration, and thats why it moves much slowly at the beginning and end, where distance of one loop is smaller.
I have to admit I made it that way because it's simpler to implement:D. Making it move at constant speed require some more works, but others have provided some solutions here so I think I'll try
What you're looking for is called arc length parameterization. Basically, you need to compose the curve with the inverse of its arc length function. Aside from a few special curve families, closed-form solutions don't exist.
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.
thanks for the feedback!
Let's find out where this sentence goes!
> Linux
Would look into that.
> Brave.
Definitely would look into that.
> 32 GiB RAM, Intel i9 w/ 24 cores
This part is not relevant
Based on a quick Firefox performance report on the minified source code, most of the time seems to be spent in functionality looking like frame handling. There are some signs of time calculations.
One educated guess would be that something in frame time calculations goes off, possibly due to restricted time resolution to prevent timing related fingerprinting. This would cause next frame computation to start immediately instead of after the intended timeout.
If you want a spiral that covers the sphere with evenly spaced samples, consider this approach.
Does anyone know of any tooling I could use to do some plotting like this in 3D space even a fraction as nice looking as OPs? I'm not a web dev but I am a dev, but would prefer something high enough level that I can focus on the "what" (to plot) rather than the "how".
Later on - about a quarter of a century ago - we had VRML which enables anyone to just focus on the what rather than the how. But VRML always needed a plugin to download, which was no fun at all in the dial-up days. We almost had a 3D web, but no, it ended up 2D.
I digress. However, if you want 3D plots without having to reinvent the wheel, three.js is fit for purpose, with the right CodePen example to get you started.
I hear you.
My first real experience with drawing anything was with Postscript, but then I did my fair share of blitting, and a bit of OpenGL. These days I'm just looking to visualise some data in a nice looking way with minimal effort.
> if you want 3D plots without having to reinvent the wheel, three.js is fit for purpose, with the right CodePen example
Amazing, thanks for the tips.
Interesting to note that the parametric equations of the spiral are linear in spherical coordinates. https://en.wikipedia.org/wiki/List_of_common_coordinate_tran...
I don't know what function is being presented, so I can't speak to whether it demonstrates chaotic behavior -- but the whole /point/ of chaos is that it's an emergent property of deterministic mathematical functions. Perhaps the author meant "random" or "non-deterministic" rather than "chaotic"?
I am guessing that the HN audience would be / should be interested in that distinction. Mathematically speaking, chaos is an extreme sensitivity to initial conditions, and is very much still in line with deterministic systems. The resulting output, while seemingly random (since there is no easily identifiable pattern), is mathematically and conceptually different from actual randomness.
https://en.wikipedia.org/wiki/Randomness
It really depends on the exact definition of what you are quantifying 'random' to be.
There is no proof (in the mathematical sense) of real randomness.
The chaotic nature of a system is one thing.
Our lack of knowledge of the governing laws, initial conditions, feasibility of simulation forcing us to use the mathematical tools of probability (i.e. randomness) to describe our uncertainty about said system is another thing.
The reason why it matters is that a statement like "a double inverted pendulum behaves randomly" is just wrong as it would imply that you couldn't even do a simulation of one in theory without throwing some dice.
However, it is totally uncontroversial that if someone gave you a measured initial position and velocity of one with 'really good' precision and asked you to predict its state 5 seconds forward you would likely have a big smeared-out probability density function to deal with.
In this example the path is neither chaotic (in the formal sense) nor random, because a Fourier transform would identify the harmonic components.
I believe you. But the colloquial definition (I’m looking at a dictionary right now) is “complete disorder and confusion”; “a state of things in which chance is supreme”; “the inherent unpredictability in the behavior of a complex natural system”. That path fits that apparent definition. The post is written in a way that a relative layman would understand, so it makes sense to speak/write in a way non-mathematicians would expect.
Then saying it "isn't actually chaotic" is mis-aligned with the layman's understanding, and the disagreement is not explained (either by explaining a more technical definition, or otherwise).
I continue to think that substituting "non-deterministic" or "random" would be more both understandable to the layman, and more correct to the advanced reader.
/old
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.
As a visual (spatial) learner, I often wonder how my math/science education could have been improved with learning tools such as these.
also, the progress dots at the bottom should be toc nav buttons, single stepping backward to find the slide above was torture.
and the derivation of a circle from two sines and a sphere from three, to me should really be separated out as a "pre req" presentation. this thought goes along with the above "hey, where's my helix" thought
Likely right up your street!
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)
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 ;-)
y = 10 * sin(πt/2) * sin(0.02 * πt)
On the previous two slides the end is sin(0.2 * πt)
I very recently was looking to generate some complex shapes, and stumbled onto the complex problem of "disperse N points on sphere" and all its nuances.
There was a really cool / simple algorithm that was mentioned called the fibonacci-sphere that also generates a spiral around a sphere, but for the point dispersal. Here's a paper [1] on it that talks more about it.
Not affiliated with Hacker News or Y Combinator. We simply enrich the public API with analytics.