It's funny. A few years ago I gave a short talk/lesson at my workplace on the mathematics behind ECDSA and coded a visualization of the procedure very similar to this. An interesting fact about the finite field curve is that, because the plane loops around on both axes, given an addition A + B = C, there's many straight lines that pass through A, B, and -C. When animating the line to find the sum, I had to optimize the path taken to not fill the screen with lines, because the most straightforward line has a slope comparable to the height of the screen (i.e. it's nearly vertical), so rendering it is almost equivalent to a rectangle fill.
The Animated Elliptic Curve
11–20 of 20 posts
Re: The Animated Elliptic Curve
#12It's funny. A few years ago I gave a short talk/lesson at my workplace on the mathematics behind ECDSA and coded a visualization of the procedure very similar to this. An interesting fact about the finite field curve is that, because the plane loops around on both axes, given an addition A + B = C, there's many straight lines that pass through A, B, and -C. When animating the line to find the sum, I had to optimize t…
There’s an interesting (to me) implementation detail in the A+B=-C lines on this page.
It's possible to show the true lines with the toy curve, but the X25519 animation at the top of the page is a cheat: it uses the correct slope IIRC, draws the dot following that slope for five wraparounds, but then cheats and jumps to the needed height and does only the last line to its destination.
If I'd done the actual number of wraparounds used in a typical X25519 point addition it'd be like TV snow, or would take hours!
Re: The Animated Elliptic Curve
#13amazing work, so readble and fun to watch the animation woth clear text explanation.
even for a short attention person like me, thr author got me hooked
Re: The Animated Elliptic Curve
#14given a curve, how do you find the corresponding finite field? The article seems to pull it out of thin air (?)
The details of the curve, the finite field, and point P are chosen ahead of time (at least with modern curves… you used to be able to choose a custom P and it led to security flaws). When we refer to something like “X25519” or “NIST P256” it means the combined set of all three things. In TLS terms the client connects and says “is X25519 good? I can also do these other curves” and the server either agrees or chooses a…
I’ve just reread my reply and could have been clearer: the curve, finite field, and base point are chosen ahead of time _by the standards body_. When two endpoints agree to use e.g. the NIST P-256 curve, then they are agreeing on the curve equation, the finite field, and the base point, all together as a set of items.
Re: The Animated Elliptic Curve
#15This was quite lovely. Cryptography was something I missed in my mathematics education (well, I did cover RSA) and this gave me the gist of what all these elliptic curves are about!
Re: The Animated Elliptic Curve
#16Earlier quoted context omitted.
The details of the curve, the finite field, and point P are chosen ahead of time (at least with modern curves… you used to be able to choose a custom P and it led to security flaws). When we refer to something like “X25519” or “NIST P256” it means the combined set of all three things. In TLS terms the client connects and says “is X25519 good? I can also do these other curves” and the server either agrees or chooses a…
I’ve just reread my reply and could have been clearer: the curve, finite field, and base point are chosen ahead of time _by the standards body_. When two endpoints agree to use e.g. the NIST P-256 curve, then they are agreeing on the curve equation, the finite field, and the base point, all together as a set of items.
No worries your initial response was clear to me. My question was under the assumption that you couldn’t mathematically pick an arbitrary pair of curve and finite field, but I guess any choice is fine as long as the parties agree ahead of time.
Re: The Animated Elliptic Curve
#17Nice!
One thing I think this doesn’t explain or mention is that, if you draw a line between two of those points derived from the finite field and find the curve intersection, then negate the point's y-value, the resulting point also is a point derived from the finite field. The computation of λ involves a division, so it isn’t obvious to me that x3 is an integer.
Re: The Animated Elliptic Curve
#18An important point to note, that is not very obvious from the text, is that it is (very, very) difficult to retrieve ka from A=ka.P and kb from B=kb.P. For an attacker who has A and B, it's close to impossible to recover P and ka.kb.P
Isn't P always the same? Or is it shared before the exchange? Edit: just looked it up and the base point for curve25519 is x=9 so no point in recovering it.
Sorry, I wrote that comment too quickly. It is close to impossible to recover ka, kb and ka.kb.P, even given A=ka.P, B=kb.P and P.
Re: The Animated Elliptic Curve
#19Previous discussion from last year: https://news.ycombinator.com/item?id=31769059
Re: The Animated Elliptic Curve
#20What a super resource. I (a civilian with some maths skills - roughly undergrad) can actually start to appreciate how these things work. I generally pick Group 31 when setting up IPSEC tunnels. I use that for Phase 1 DH group and Phase 2 PFS key group. My choice is somewhat biased by this bloke: https://cr.yp.to/ecdh.html I do not have the skills to decide what is actually secure, so I have to rely on reputation. Dan…
Author here. I’m 46 and just staring to lose my close vision, so I understand. I did my best to collapse margins on small screens, though there’s still a thin bit of margin around the animations. I think I constrained the max width to keep the text from being harder to read, that’s probably what you’re running into. As for pixelation, I did all the animations in canvas with 2x subsampling (for retina support) so it s…
This page is a great piece of work overall. I want to nitpick on two things:
> I did all the animations in canvas with 2x subsampling (for retina support) so it should hold up well to zooming
I think a better fit is to do your animations in SVG. It is definitely possible, for example: https://www.nayuki.io/page/animated-floating-graph-nodes , https://www.nayuki.io/page/smallest-enclosing-circle .
> I did have to hit Ctrl+ to get it to 200% for comfort
I think the best thing to do is that the user configures the default font size in their browser, the author uses it as the body text size, and scales headings relative to it (e.g. 200% for ). It looks like the author did well here, setting "--bs-body-font-size: 1rem;" instead of something like 16px or 12pt.