An vibe-coded interactive demo illustrating elliptic curves in projective coordinates. Drag around to rotate the view, scroll to zoom in/out.

The idea to make this came to me when I was writing the posts on elliptic curves back in 2021. Back then I did not have the skills to make such a demo, especially with 3D graphics. Now, I still don't have the skills, but I have ChatGPT to help me! I was also motivated by a remark made by a CTF teammate about the fact that exists people who actually learn elliptic curves through my blogs (!), so I decided to spend some time to vibe-code this demo now, and finally post something after much silence, but I will probably save the rant for another time.

There are two main parts to this demo:

  1. Visualizing the elliptic curve in projective coordinates (\(\mathbb{P}^2(\mathbb{R})\)) as a surface in 3D (\(\mathbb{A}^3(\mathbb{R})=\mathbb{R}^3\)).
  2. Visualizing the elliptic curve group law in projective coordinates, including the point at infinity.

For 1, we may recall that \(\mathbb{P}^2(\mathbb{R})=\mathbb{R}^2\sqcup\mathbb{P}^1(\mathbb{R})\), and that if we have an elliptic curve with equation \(y^2=x^3+Ax+B\), then the homogenized version looks like \(y^2z = x^3 + A x z^2 + B z^3\). The \(\mathbb{R}^2\) can be visualized by taking the affine plane \(z=1\) as the representative. The green curve is the interscetion with \(z=1\), which means that it is just the regular elliptic curve in affine coordinates if you imagine projecting the curve onto the 2D plane.

The \(\mathbb{P}^1(\mathbb{R})\) part is the line at infinity \(z=0\). Here we only need to look at the point at infinity \((0:1:0)\) since it is the only point on the elliptic curve. If you toggle the z<0 checkbox, you can see the surface extending below the \(xy\)-plane and it is mirrored, which reflects the projective equivalence relation \((x,y,z)\sim(-x,-y,-z)\).

For 2, there are two buttons: "Show P + Q" and "Show R + -R = O". Clicking on "Show P + Q" shows an example of an elliptic curve addition with chord-and-tangent. When we draw the line in \(\mathbb{R}^2\) joining the two points (say \(y=mx+c\)), we are actually drawing a plane that is the homogenized version of the line \(y=mx+cz\). We find that the plane, as with the line, only intercepted another point in the projective plane (note that the origin \((0,0,0)\) is in fact, not a point in the projective plane) because the other "points" it intercepted in our 3D view are actually the not new points, but same points under the equivalence relation.

The interesting observation can be made by clicking "Show R + -R = O". When we draw the plane that joins R and -R, we find that it actually does intercept the point at infinity \((0:1:0)\)!

Going back to "Show P + Q", you can also change the point we use to add. Enter the x coordinate of the point that you want to add, and the coordinate of the point will be computed by taking the positive root. If you enter the same value for both, then you can also observe the tangent also intersects exactly one more point in the projective plane.