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.
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.
In my early teens I used to try to create something like a equirectangular projection because when drawing it, it looked cool. Obviously I had no idea that it was called this. I was trying to draw reflections of a square window onto a sphere, and then I moved on to trying to cover the sphere in a checkered pattern. This is awesome to see, thank you!
Except the helix curve shown in OP is NOT a loxodrome or rhumb line.
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:
To quote the storytelling quality of Erdos's abstract:
"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."
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.
For constant speed you need a so-called “Euclidean parameterization” where the t value is proportional to s, the Euclidean distance traveled (and thus no matter the value of t, if you add some dt it always works out to the same ds). This is super commonly needed when animating motion along all sorts of curves, as you might guess.
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!
This pattern of stepping with different ds along a path has a lot of applications in control theory. Often we change the ds/dt ratio based on the known acceleration profile of a motor to minimize jerk and reach our destination as fast as possible.
>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.
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.
The instinct to sort of slow t is right, as the governing functions are maintaining angular velocity with respect to t but scaling radius also with respect to t.
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
> …which we know isn't actually chaotic. It's just a path defined by mathematical functions.
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.
There are a number of sophisticated tests for randomness. You can't prove absolute randomness in any Platonic sense, but you can certainly assess a source for different properties that are useful in applications that require randomness.
In this example the path is neither chaotic (in the formal sense) nor random, because a Fourier transform would identify the harmonic components.
I think that makes sense and I can tell that you understand the distinction. Formally I believe they're different concepts and think it may cause confusion in some cases to use them interchangeably.
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.
I just did a mental substitution for the word "stochastic" and moved on, since it wasn't the main point of the article. But you are correct. Computing the future states of a chaotic system, given the same initial conditions, will produce the same results every time but change the initial conditions ever so slightly and you have no guarante where you will end up next (unless you picked a state from a previous simulation, that is... But that's cheating;) )
> the whole /point/ of chaos is that it's an emergent property of deterministic mathematical functions.
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.
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)
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.
There are instructions on the first slide. I think adding a secondary swipe mechanic would be nice tho (although I prefer the tap), as that's how these "card stack" interfaces are usually navigated in social media apps.
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?
I think this particular function was selected because it happened to be convenient to program and the visual effect was pleasant enough.
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
with outputs,
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 doubt that they did the ln(tan(phi/2)) thing though, but it's what you get when you integrate the k d{phi} = sin{phi} d{theta} equation that you have here.
> You could pick lots of different functions, including simple linear motion (z = c * t)
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.
Just a thought: Make the velocity of the path constant. There should be some way to take a derivative an set it to a constant and solve for z. ( or really reparameterize the curve t' = f(t)) so the velocity is constant.
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.
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.
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.
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).
I encountered similar trouble with both Firefox and Chrome on Ubuntu.
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.
Because any non-broken combination of browser and software platform can run this on any PC made this century. It runs fine on my terrible Atom Chromebook, even.
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.
I think the crazy plot at the end is not intentionally constructed to be exactly that way, just an example of what you can get if you vary the parameters of cosines and sines in parametric equation setups similar to the ones shown earlier (instead of seeking to align them so they wrap a sphere exactly).
> 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.
Man, that whole ‘please make an RSS or JSON feed for me’ request reads like Richard Stallman emailing himself a webpage to print out later, let them use Twitter or whatever medium they wants
That’s a pretty bad faith interpretation. As if a polite suggestion to add a low-effort, universal, unrestricted, and easily automatable alternative would in any way affect what they currently use. The author is asking people to follow them, it benefits them. Letting them know the ways in which people want to do it is a good thing, and it takes a special kind of curmudgeon considerably more obnoxious than Stallman to invent some fault with that.
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.
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.
The content is good, but the weird dither effect is giving me a horrible headache! I'm glad you created it (it's always good to see someone bring an idea to fruition!), and I hope that you continue to create cool things. But please, please, please turn off whatever effect you're using.
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.
It seems like it might be cool but between the background animation and the resource intensiveness I'm having trouble actually reading it. Is there a mostly-text version somewhere?
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.
I'm using dev edition v143.0b2 and I'm apparently not seeing what everyone else is seeing, because I'm just seeing the axis tags moving around using some pretty simple math. Clearly something isn't working and I'm missing something, based on the comments here. Regression in Firefox?
For me, it doesn't work entirely in Librewolf 142 (shows the text, and some tags moving around an otherwise black screen), but does work in Firefox Nightly.
I've recently gotten interested in p5js, which is a fun and easy way to explore this kind of stuff; if anyone here is currently thinking (like I am) that you want to try this out yourself, I'd give it a try: https://p5js.org/tutorials/setting-up-your-environment/
Neat! I was curious as well after reading it and here's a quick parametric visualizer to play with what was described in the text (thanks, Claude!): https://codepen.io/CaptainKeyframe/pen/zxvWVNo
Surprised to not see Acko.net mentioned in comments already - he uses similar aids in one of his blog posts to break down complex numbers and ultimately fractals.
This reminds me of how the spins in MRI are manipulated in order to acquire the signal. Tracking the tips of the spins traces out similar looking paths. https://m.youtube.com/watch?v=vapJRr6gAds&t=2786s
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".
In the olden 8-bit days, we would have to do this in BASIC or assembler with a 3D library that we would have to write ourselves. Then we would run out of memory.
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.
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
I am about to start my computer science degree, so this visualization got me really excited to dive into the mathematics of it all. I love to see these kind of animations, but the math behind them sends my brain spinning! Very cool to see it broken down in a digestible way like this.
when it gets past the "intro" slides and into the A-B-C explanation, slide 11 says "A helix is a shape that loops around and around, like a spring." Unfortunately, what is shown is not a helix nor a normal spring, it's just yet another spherical helix progression.
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
This is fantastic. What a terrific combination of the creative presentation and the clear exposition of information. You've hit on a very nice aesthetic and a stunningly clear articulation of the underlying mechanics.
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.
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.
As a left-handed person I have no problem holding the phone in my right hand when I need to use UI on that side of the screen. Though I do prefer phones on the small side.
I had a similar thought about 3D printing - particularly extruding mathematically defined shapes in vase mode.
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.
so beautiful. thank you for this. I am trying to develop intuition for sine cosine etc. and it did fire some neurons in my brain not sure i can put that into words
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?
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...
You inspired me to submit one of my 2022 projects
https://observablehq.com/@jrus/spheredisksample
https://news.ycombinator.com/item?id=44963521
to fit the trend of the day. People may also enjoy
https://observablehq.com/@jrus/sphere-resample
In my early teens I used to try to create something like a equirectangular projection because when drawing it, it looked cool. Obviously I had no idea that it was called this. I was trying to draw reflections of a square window onto a sphere, and then I moved on to trying to cover the sphere in a checkered pattern. This is awesome to see, thank you!
An equirectangular projection just means plotting latitude and longitude in a rectangle.
Do you mean my diagonal grid that I projected back onto the sphere? I'm not sure that has a name.
Great to see you. I look forward for your comments on geometry, multivariate calculus and rotations.
Edit: fantastic graphics. You should submit the other one as an HN post too.
Except the helix curve shown in OP is NOT a loxodrome or rhumb line.
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:
https://beta.dwitter.net/d/34223
Indeed. It is one of the many well known spherical spirals / seiffert spirals.
Don't forget this post, which spawned a discussion of Rhumb lines etc. in the comments: https://news.ycombinator.com/item?id=44962767
I had missed this one ! Thanks.
It is indeed raining spherical geometry today.
To quote the storytelling quality of Erdos's abstract:
"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."
Jeez Erdos. This man was so prolific he was still publishing 4 years after he died :o
Many after he passed
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.
For constant speed you need a so-called “Euclidean parameterization” where the t value is proportional to s, the Euclidean distance traveled (and thus no matter the value of t, if you add some dt it always works out to the same ds). This is super commonly needed when animating motion along all sorts of curves, as you might guess.
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!
This pattern of stepping with different ds along a path has a lot of applications in control theory. Often we change the ds/dt ratio based on the known acceleration profile of a motor to minimize jerk and reach our destination as fast as possible.
Generally this idea is called motion profiling: https://www.motioncontroltips.com/what-is-a-motion-profile/
>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.
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.
The instinct to sort of slow t is right, as the governing functions are maintaining angular velocity with respect to t but scaling radius also with respect to t.
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.
thanks!
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
> …which we know isn't actually chaotic. It's just a path defined by mathematical functions.
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"?
^^^ This is an extremely underrated nitpick.
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.
'actual' or 'true' randomness is a rabbit hole.
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.
There are a number of sophisticated tests for randomness. You can't prove absolute randomness in any Platonic sense, but you can certainly assess a source for different properties that are useful in applications that require randomness.
In this example the path is neither chaotic (in the formal sense) nor random, because a Fourier transform would identify the harmonic components.
I use "Random" to mean chaotic (extreme sensitivity to initial conditions) but with unknown (or unknowable) initial conditions.
I think that makes sense and I can tell that you understand the distinction. Formally I believe they're different concepts and think it may cause confusion in some cases to use them interchangeably.
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.
I just did a mental substitution for the word "stochastic" and moved on, since it wasn't the main point of the article. But you are correct. Computing the future states of a chaotic system, given the same initial conditions, will produce the same results every time but change the initial conditions ever so slightly and you have no guarante where you will end up next (unless you picked a state from a previous simulation, that is... But that's cheating;) )
> the whole /point/ of chaos is that it's an emergent property of deterministic mathematical functions.
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.
> That path fits that apparent definition.
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.
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)
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.
There are instructions on the first slide. I think adding a secondary swipe mechanic would be nice tho (although I prefer the tap), as that's how these "card stack" interfaces are usually navigated in social media apps.
Oh, you're right. Small and at the bottom. I guess I tried to scroll before my eyes got there. Thanks for pointing out my error.
ah, yes there is an instruction at the bottom, but probably its too small.
thanks for the feedback!
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?
I think this particular function was selected because it happened to be convenient to program and the visual effect was pleasant enough.
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:
with outputs, I doubt that they did the ln(tan(phi/2)) thing though, but it's what you get when you integrate the k d{phi} = sin{phi} d{theta} equation that you have here.> You could pick lots of different functions, including simple linear motion (z = c * t)
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.
Just a thought: Make the velocity of the path constant. There should be some way to take a derivative an set it to a constant and solve for z. ( or really reparameterize the curve t' = f(t)) so the velocity is constant.
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.
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/...
oh wow, the book looks nice. thanks for the recommendation!
You can play with the equations on 3D Desmos here: https://www.desmos.com/3d/t66etxi1y8
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...
this is nice, thanks!
The animations are so fluid!
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.
[1] - https://arxiv.org/pdf/0912.4540
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).
I encountered similar trouble with both Firefox and Chrome on Ubuntu.
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.
Frankly, it seems to work fine on Firefox. It's a Brave issue for me.
> I can't tell why
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
You're just jealous of my 32 GiB.
Crying in Mac mini voice
How is that not relevant?
Because any non-broken combination of browser and software platform can run this on any PC made this century. It runs fine on my terrible Atom Chromebook, even.
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.
I think the crazy plot at the end is not intentionally constructed to be exactly that way, just an example of what you can get if you vary the parameters of cosines and sines in parametric equation setups similar to the ones shown earlier (instead of seeking to align them so they wrap a sphere exactly).
Nifty, but what I'm curious about is how you created the drain/fill effect on the cube.
> 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.
Man, that whole ‘please make an RSS or JSON feed for me’ request reads like Richard Stallman emailing himself a webpage to print out later, let them use Twitter or whatever medium they wants
That’s a pretty bad faith interpretation. As if a polite suggestion to add a low-effort, universal, unrestricted, and easily automatable alternative would in any way affect what they currently use. The author is asking people to follow them, it benefits them. Letting them know the ways in which people want to do it is a good thing, and it takes a special kind of curmudgeon considerably more obnoxious than Stallman to invent some fault with that.
But it's not "for me", it's for everyone who'd be interested in getting regular updates from OP.
Twitter is the absolute worst way to get that, even if I had an account.
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
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...
hi, whoa that's a nice article! simple and easy to follow.
thanks for sharing! definitely an inspiration, I might use it for next project :D
The content is good, but the weird dither effect is giving me a horrible headache! I'm glad you created it (it's always good to see someone bring an idea to fruition!), and I hope that you continue to create cool things. But please, please, please turn off whatever effect you're using.
the dithering is lovely and the OP better not touch it. they can give you a toggle though :P
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.
This is super nice to view, could you share how you made it? I want to make something similar for Rotation Matrices
I think 3blue1brown might have an animation library, the same one he uses in his videos that might help with that
He created a visualization library called Manim and it's great.
I was also hoping to see more about how the animations were done here. They look great. I love the shifting camera perspectives.
AnimeJS, and possibly Three.js
> 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.
It seems like it might be cool but between the background animation and the resource intensiveness I'm having trouble actually reading it. Is there a mostly-text version somewhere?
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.
I use Firefox (dev edition, v142.0b9) and it works great.
I'm using dev edition v143.0b2 and I'm apparently not seeing what everyone else is seeing, because I'm just seeing the axis tags moving around using some pretty simple math. Clearly something isn't working and I'm missing something, based on the comments here. Regression in Firefox?
Worked fine for me using Firefox 142 on Linux. Did you have any errors in the console?
Works great on mobile Safari
Worked perfectly for me on Firefox 142.0 on Arch Linux.
For me, it doesn't work entirely in Librewolf 142 (shows the text, and some tags moving around an otherwise black screen), but does work in Firefox Nightly.
Worked fine here on Firefox/Win11.
Worked fine for me on desktop Safari.
It works for me in Firefox.
works on firefox macos
I've recently gotten interested in p5js, which is a fun and easy way to explore this kind of stuff; if anyone here is currently thinking (like I am) that you want to try this out yourself, I'd give it a try: https://p5js.org/tutorials/setting-up-your-environment/
Neat! I was curious as well after reading it and here's a quick parametric visualizer to play with what was described in the text (thanks, Claude!): https://codepen.io/CaptainKeyframe/pen/zxvWVNo
wow, that's nice. Thanks!
Surprised to not see Acko.net mentioned in comments already - he uses similar aids in one of his blog posts to break down complex numbers and ultimately fractals.
Likely right up your street!
https://acko.net/blog/how-to-fold-a-julia-fractal/
This was amazing! I also checked the understanding neural network. Looking forward to the next part in that one. Keep up the good work!
If you like this, you will probably enjoy https://www.shadertoy.com/ and https://thebookofshaders.com/
This reminds me of how the spins in MRI are manipulated in order to acquire the signal. Tracking the tips of the spins traces out similar looking paths. https://m.youtube.com/watch?v=vapJRr6gAds&t=2786s
https://www.johndcook.com/blog/2023/08/12/fibonacci-lattice/
If you want a spiral that covers the sphere with evenly spaced samples, consider this approach.
And the Matt Parker Stand-up Maths video: "Golf balls: How many holes in one?" https://www.youtube.com/watch?v=dNTnk1VFoJY
Really nice visualisation.
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".
In the olden 8-bit days, we would have to do this in BASIC or assembler with a 3D library that we would have to write ourselves. Then we would run out of memory.
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.
> In the olden 8-bit days
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.
That is beautiful animation. This is a great example of a visual lesson that leaves a chalkboard in the dust (ha).
I am about to start my computer science degree, so this visualization got me really excited to dive into the mathematics of it all. I love to see these kind of animations, but the math behind them sends my brain spinning! Very cool to see it broken down in a digestible way like this.
I applaud anybody who makes visualizations of difficult to grasp concepts - so, thank you very much.
As a visual (spatial) learner, I often wonder how my math/science education could have been improved with learning tools such as these.
when it gets past the "intro" slides and into the A-B-C explanation, slide 11 says "A helix is a shape that loops around and around, like a spring." Unfortunately, what is shown is not a helix nor a normal spring, it's just yet another spherical helix progression.
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
This is fantastic. What a terrific combination of the creative presentation and the clear exposition of information. You've hit on a very nice aesthetic and a stunningly clear articulation of the underlying mechanics.
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.
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.
As a left-handed person I have no problem holding the phone in my right hand when I need to use UI on that side of the screen. Though I do prefer phones on the small side.
This is why I love small phones - I’m able to reach and tap with left thumb quite easily on my iPhone SE.
Best thing I have seen on HN in ages. Also interesting for a CNC geek.
I had a similar thought about 3D printing - particularly extruding mathematically defined shapes in vase mode.
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.
Grammar problem: "In 3D space, we position objects by setting its coordinates" should read either "their coordinates" or "an object".
I love this. It's pretty and really easy to digest.
it's impressive enough to crash my browser (twise) before I got to see it the full digital resource conflict jam and judder!
Wow! You did something amazing! The first few interactions, I felt as if I was actually spinning a wheel. Great job, bravo!
Before I came here, I didn't know there were people using web pages to demonstrate such cool things.
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.
Cool! My first instinct was to scroll. I suggest you treat the scroll down as a signal to move 1 slide further
Cool! My first instinct was to scroll. I suggest you use the scroll down as a signal to move 1 slide further
I love the slight aliasing on the visuals (iOS Safari). It makes it obvious that it’s rendered on the fly.
Wish the bundle.js wasn't minified so I can look at the code and see what's going on!
This is awesome, it was easier to understand that what my uny theacher tried to explain.
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)
Funny I remember blindly stumbling down OP’s same path at 13 using Quickbasic.
/old
This is so cool! Thanks for sharing, stuff like this is why I love HN.
this is so pretty. Have you done any write-ups on how to create this (or any of the other visualisations on your page). I would love to learn more.
I never tought this would be interesting but it is VERY much.
so beautiful. thank you for this. I am trying to develop intuition for sine cosine etc. and it did fire some neurons in my brain not sure i can put that into words
That's an excellent job of teaching - thank you!
The solar system spiraling through the universe.
Beautifully done, thank you for sharing. :-)
Brilliant, I learned something today.
This was delightful - thank you!
Well this is lovely. Well done.
Very distracting to try and read text in the middle of a constantly spinning visualisation
thanks for sharing, really interesting
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?
Without scaling the rate of change of the given curve would not be constant.
Love it
quite beautiful