Visual Sum of Cubes | Hacker News Reader

Visual Sum of Cubes

x.st

362 pointslnyan39 comments

Open articleView on HN

Thanks for the nice comments, everyone! I made this but didn't expect to see it here.

As people have noticed, the spinning diagrams are done with CSS, which was fun.

Basically it's just an `animation: linear infinite;` from `transform: rotateY(0turn);` to `transform: rotateY(1turn);`

(source here https://github.com/hrldcpr/poole/blob/master/_sass/_latex3d.... )

To keep the numbers facing forward, they're all also rotating, but in the opposite direction :p

And all of the numbers' `translate3d(...)` coordinates are generated by a Python script because I didn't want to do that by hand...

I think you've buried the lede here. The sum-of-cubes visualization is neat but IMHO it pales in comparison to your use of the time dimension in mathematical notation allowing you to make 3-D symbols in a medium that has only two physical dimensions. I've never seen that before. It's one of those things that is kind of obvious once you see it for the first time, but AFAICT you are the first person ever to actually do it.

Completely agreed - i was mindblown seeing the rotating formulae, but it is instantly understandable.

I think this sort of visualization is what makes a computer medium better than a paper medium to convey info.

This is delightful! I believe these sums-of-powers formulas can be derived fairly easily with discrete calculus techniques (it's in Knuth's Concrete Mathematics, IIRC), but to see a purely geometric approach succeed is fascinating.

To understand why this technique works with sums of arbitrary powers, the key is to show that summing together rotations of simplices gets you a simplex of constant values. The following geometric argument works:

1. Think of the numbers in the simplex as a function f(x) of the coordinate vector x for the space the simplex is embedded in. Observe that f is linear.

2. A linear function on a simplex is determined uniquely by the values it takes at the vertices. Specifically, the value at any point is a weighted average of vertex point values.

3. If we create a "sum simplex" by summing together all possible rotations of the simplex, the result will also be a linear function on a simplex, and the values at all the vertices will be the same by symmetry.

4. Therefore, the linear function giving the values of the sum simplex is constant.

A rigorous proof could be developed by considering the standard simplex generated by the coordinate unit vectors, but scaled by a factor of n. For example, the equilateral triangle is the 2D simplex generated by connecting the vertices at (n,0,0), (0,n,0), (0,0,n). On this simplex, the integral points (x,y,z), where the coordinates x,y,z are integers, are the points assigned numbers in the blog post. "Rotations" are done by switching coordinate axes (actually a reflection), which preserves the integral points.

Adding a bit more explanation...

4. Therefore, the linear function giving the values of the sum simplex is constant by #2. Since any point's value is a weighted average of vertex values, and all the vertex values are the same, every point's value must also be the same.

A rigorous proof could be developed by considering the standard simplex generated by the coordinate unit vectors, but scaled by a factor of n. For example, the equilateral triangle is the 2D simplex generated by connecting the vertices at (n,0,0), (0,n,0), (0,0,n). On this simplex, the integral points (x,y,z), where the coordinates x,y,z are integers, are the points assigned numbers in the blog post. The numbers are assigned based on the first coordinate: f(x,y,z) = x, and similarly in higher dimensions. "Rotations" are done by switching x with any other coordinate axis (actually a reflection), which maps the simplex to itself and maps integral points to integral points.

The most impressive thing for me is that I could copy and paste the text/numbers in the rotating pyramids!

The most impressive thing to me is seeing a one-letter domain owned by regular folk.

How did he manage to finagle that?

I bought it for 1500€ in 2014, when nic.st had a Black Friday sale. It was the only 3-letter domain I'd ever seen for sale, so I couldn't resist.

How much are the annual renewal fees?

35€

It's all done using CSS!

The sum of S(n) = 1^k + 2^k + ... + n^k is a polynomial of degree k + 1 over n. To find a closed form for S(n) you only need to compute k + 2 points, e.g. S(0), S(1), ..., S(k + 1) and fit a polynomial.

The claim that 1 + 2 + ... + n = n (n + 1) / 2 only requires you to verify it for n = 0, n = 1, and n = 2, e.g. that 0 = 0 * 1 /2, 1 = 1 * 2 / 2, and 1 + 2 = 2 * 3 / 2. I found this really surprising when I first heard it and thought I'd share :)

See: https://en.wikipedia.org/wiki/Lagrange_polynomial

The closed forms of S(n) are known and are related to Bernouilli numbers. See https://en.wikipedia.org/wiki/Faulhaber%27s_formula.

Induction is also a very good way to prove these formulas. In fact, these are just perfect textbook exercises for someone learning induction: try to find formulas for the sum of the first k-th powers (for some not so big integer k), then prove the formulas using induction. As someone else mentions, the formulas themselves are related to the Bernoulli numbers and have some surprising properties, like how formulas for odd values of k can be expressed in terms of k·(k+1)/2.

Ha- I came here to say this - I've solved them this way for decades whenever I need one, since the derivation when I'm doodling is often quicker than finding it (or if I'm out somewhere and internet access is difficult).

Note you can use this trick for all sorts of sums, not just powers. After some experience you realize lots of sums are polynomials in the size, so just guess a polynomial without the coefficients, and plug in a few items to get the coefficients. Once you have a polynomial, you can prove the result by induction.

So, for example, summing terms of form k(k+4) from k=1 to n may be hard to look up, but you can guess the result is a polynomial of degree one more than the terms (so here, a cubic), do the generic trick, obtain the sum n(n+1)(2n+13)/6, then prove it via induction.

You can do generic items too, like sum (k+a)(k+b) to get abn + n(n+1)(3(a+b)+2n+1)/6.

It's a good technique.

Or just use Mathematica :)

A perfect use of animated gifs in mathematical formulae, making things actually clearer.

The article uses a typical math text layout, but is something you cannot easily print.

Yes, those are wonderful. They aren't gifs, though! I can highlight the numerals, so I'm guessing some CSS transformation trick? I'll have to look closer when not on mobile.

Right. Just checked the code, the numbers are layouted by

  transform:translate3d()

My favorite thing from this thread is that this is the first time I've heard "layouted" as a verb used by anyone else since design school in 1998. Also, "layouter" to describe the practitioners of Dutch or Swiss modern design. "Layouted" is not standard English.. a native speaker would say "laid out".. but it is perfect because there is no English word for "layouter".

Outlayer (different from outlier), like bricklayer

Those are not animated gifs. It's all done using CSS

Yeah, I can't stop watching them.

Most interactive or digital documents that people claim are "better than textbooks" have left me disappointed. The paper books is a pretty high standard to try and match or exceed in my mind.

Simple visualizations like this though make a case. (And search does as well, FWIW.)

It was a delight to read, Are there any recommendations for such readable visual proofs of mathematical concepts? I know about YT channels like 3blue1brown, But I'm looking for websites with readable content.

It looks super neat! But if I'm honest with myself I don't actually "see" the numbers being equal after summing these tetrahedra (or even the triangles). I believe it, but I'd find a regular induction proof more believable. Visually, the trick in dimension 1 is a lot more convincing.

I was confused about this too - why should we believe that the numbers should be equal after summing?

There is an explanation based on symmetry, which I outlined here: https://news.ycombinator.com/item?id=32531692

Interestingly, this approach does not seem to require any induction. The argument just works directly for all powers and all dimensions.

That's a great explanation, thanks!

Yeah I agree, it's not 'visually' obvious that the combined entries are all the same. But once I started writing it I had to see where it went :p

(Footnotes 2 and 3 at the end explain why the entries all end up the same. And the same argument works for simplices in any number of dimensions—there's always two directions that change the value by +1 and -1, and the rest are all parallel / keep it the same. In higher dimensions there are more ways to be parallel!)

Proofs Without Words, https://www.amazon.com/dp/1470451867, is a very fun exploration of this general topic.

Nice page! Palette, formatting, animations. Everything.

The n-dimensional generalization of a triangle is a n-simplex, the simplest polytope whose faces are all (n-1)-simplices. A 4-simplex is called a 5-cell and is made of five tetrahedra.

Neat visualisations and very erudite article. Thanks!

My observation is that the final formula is equivalent to two tetrahedra joined on a shared face. There must be a good way to manipulate that directly to get the constant sums. I can find a way but that requires relative rotation of the second tetrahedron. There might be a better way.

Only just saw this comment, that's a great point! (Since the formula is two tetrahedra minus one triangle.)

Now very curious why that shape corresponds to sum of cubes / why it's equivalent to a pyramid...

With tetrahedra, at first I was expecting the n dimensional analog of taking a triangle, area n^2/2, plus the half-squares, area n (1/2), for the sum 1+…+n to equal n^2/2+n/2. This would require 4 dimensions for sum of cubes, though.

I'm trying to figure out if this is using MathJax or KaTeX or what. Pretty neat with the number tetrahedrons.

It does use KaTeX, last line before </head>:

    <link rel="stylesheet" href="/assets/katex.min.css">

Yeah this is KaTeX, pre-rendered with Jekyll.

(Except for the diagrams, which are inserted by a Python script after the KaTeX rendering is done.)

Source here https://github.com/hrldcpr/poole/blob/master/_posts/2022-08-...

Reply on news.ycombinator.com