Hacker News new | past | comments | ask | show | jobs | submit login
Tools for thought: graphical algebra and Fourier analysis (acko.net)
344 points by michael_nielsen on March 27, 2016 | hide | past | favorite | 29 comments



Breath taking.

This technique could be used to visually prove many interesting properties of the continuous fourier transform.

For example, you can visually prove that the fourier transform is its own inverse, up to a constant factor. It's a bit tricky to communicate such a visual proof in text, but here's a sketch: First, consider the fourier transform of the dirac delta function, which this visualization would reveal to be a wave. Apply the transform again, and it's visually clear that the wave destructively interferes and has a transform of 0, except for a single value. This reveals that, applying the Fourier transform twice gives you the original function, up to a constant inverse. (If you work through this carefully, you see the constant is negative.)

What's interesting is that a visual proof like this can make a pretty non-trivial fact visually obvious.

You could take this further. I'm pretty certain that one could get visual proofs that taking the derivative is multiplying by i times the frequency in frequency space. Or get a visual proof of the convolution theorem. If you have a visual proof of the convolution theorem, you can probably get a visual proof of the central limit theorem. [1]

I actually tried to illustrate this visual proof of the Fourier transform's inverse several years ago. I tried to make static diagrams, not an animated version. I failed. I say this to emphasize how impressive Steven's feat is: not only did he make a beautiful visualization of this, not only did he make it a live animation, but he did it in a freaking web browser. It's really incredible.

[1] These ideas come from a conversation between Michael Nielsen and I, after we saw Steven's talk.


It could work. I just want to emphasize this is really an incomplete DFT. It's missing the upper bands and it's also sparsely sampling the ones it does show (the full DFT would have 512 non-aliased bands). I also think in the general case, what you describe only works for the CFT. Making it work with the DFT means you have to lie a little bit, because your "dirac delta" is really a sinc function sampled at the knots to come out [… 0, 0, 1, 0, 0 …].

In the case of the final visualization, it was produced on short notice, so my bands aren't actually perfectly aligned with the true DFT bands either. On the plus side, taking one frequency band and making the full-size one only took me an hour and that's because it was a lazy copy/paste job:

https://gitgud.io/unconed/toolsforthought/blob/master/iframe...

It could be made more compact with a for loop too, but I like the pedagogical value of just having the full JS DOM spelled out like that.

The entire point of MathBox2 was to be able to produce visualizations like this without breaking my head or taking weeks. People seem to assume it's still a crazy amount of work, it's really not. e.g. The twisting transformation is just an affine skewing matrix in polar/cylindrical coordinates (.polar() + .transform()). The fades and other transitions are composable operators. Figuring out how to shove it into the GPU is now ShaderGraph's job, not mine, and the emitter API ensures the JS VM will inline and optimize it close to native, asm.js style. It all comes built-in and you can keyframe the parameters or specify them with live expressions.

The fact that people keep bringing up "beauty" is mystifying to me, it's really not what I'm aiming for. This is just what the math looks like when you remove all the extraneous visual noise and let motion and space do the talking instead. I use the same bog-standard colors, curves and surfaces every time. Why that translates into "beauty", I really don't know, except that maybe beauty is simply what we call it when our brain recognizes symmetries and patterns we don't have conscious words for.

https://acko.net/blog/mathbox2


This is amazing, no doubt. Not just the craft but the ideas and presentation.

However, I can't help but feel uncomfortable that this is not part of 'something bigger' -as many of the disconnected knowledge pieces across the web- that we could all contribute to (at the least for teaching/sharing/tweaking mathematics).

I am talking about a vague idea of what LaTeX was for unifying typesetting but for unifying collaborative proofs+visualization. Call it "VS" [1] to make the following analogy:

Before LaTeX, no one would have questioned your thesis for having handwritten equations on the gaps purposely left by you with the typewriter. It would not matter if you penciled the equation in or physically pasted a picture of it. No one would question the choice.

Similarly, before this hypothetical VS, people use Matlab, Mathematica, Sage, CoQ etc without anyone questioning any of the choices for a result/proof/visualization.

Even worse, before VS++ people publish papers on different journals with different degrees of access, many not even sharing the code used for arriving at such results, no way of verifying/visualizing unless you're running it in your head's OS.

[1] https://www.youtube.com/watch?v=KvMxLpce3Xw (Vulcan School)

[+] I may be repeating myself https://news.ycombinator.com/item?id=11129297



> An algorithm which verifies "reliability" is applied to the constructed solution (e.g a proof). If this algorithm terminates then we know that we have a good solution of the original problem. If it does not then we may have to start looking for another solution.

I might be misunderstanding things here, but doesn't that mean that there would exist proofs that are impossible to know the answer to, since there exist algorithms that are finite but will not terminate in human time? My brain is throwing up the Halting Problem, but I'm not entirely sure if that has any concrete relation to this.


First of all, know that the Halting problem and incompleteness are very related, so you are on the right track :). Here the idea is that to type-check our proofs, if the proof language is sufficiently expressive, we need to run a program which may not terminate. But if it does terminate, we know the proof is good.

From Gödel's perspective, the proof-checker is written in an inconsistent language, because infinite loops themselves prove anything! But us humans are only finite-time-patient, and we have Ctrl-C, so such technicalities are irrelevant :)


Disregarding speech would be terrible, wouldn't it?

Thanks for the pointers.


All the code is open source, under a do-what-you-want license, including the slides, and the bulk of it is the MathBox library, designed to do exactly this sort of thing. You are free to build upon it. If this isn't considered "accessible/shareable/tweakeable" it's because the web has regressed into a bunch of walled gardens that only serve up text and media.

What isn't available is a nice visual editor or a hosting platform, but that gets us into the old code vs clicking dichotomy. I don't think I'm the right person to address that, I'm far too comfortable writing code. If I make an editor, it'll still end up a tool meant to save people like me time.


This is beautiful.

Another nice explanation in a similar vein: http://betterexplained.com/articles/an-interactive-guide-to-...


Spectacular.

The only reason I was ever good at Math is because I found relationships like these despite my math teachers' best attempts to crush exploratory math. I can still remember them chiding me for not doing math their way.

Certain great teachers aside, of course.


Goddamnit Steven. Stop making everything you do so beautiful.


Agreed with other comments. Some really good insights. I wish I had those in school when I was learning this stuff:

Some gems:

> Every exponential curve of any base or offset can be drawn by scaling/ translating any other exponential curve, vertically/horizontally.

> ... a cosine (or sine) is essentially an approximate sequence of parabolas, alternating upside down. This tells you about the Taylor series expansion, and is not that surprising if you know that sine and cosine are solutions to a second order differential equation.

This one I found not completely intiuitive at first, had to think about it a bit:

> With complex numbers, it is trivial to twist the graph


Well explained! If anyone's got something similar to this, please share.


In Conway's book of numbers, there are many similar visual explanations for beautiful combinatorial formulas in terms of pebbles and polygons.


I absolutely love graphical explanations for concepts. Keep 'em coming!


This is exactly how Math should be explained, connecting the dots between abstractions and the real world! beautifully done!


Am I the only one who this doesn't work for? Tried in Chromium, Firefox and Conkeror; the best I get is a progress bar, then a set of axes with a single dot plotted on the y axis. :(


I'm on mobile; all I get is the title.


Impressive. No-brainer, awesome work.

I actually used the mathematics behind some algorithms to design my own Blog.

[0] http://leonardofed.io


Aren't those exact copies from Mike Bostock's Visualizing Algorithms? https://bost.ocks.org/mike/algorithms/ Please give credit where it's due!


Cool

I wish the explanatory text weren't shoved off into a box below the cool stuff I want to be looking at. I think ideally the textual explanations should be overlaid on the graphical representations and at the very least they should be close to each other and within the same screen element. Personally I think I experience some type of distracting cognitive load when I have to switch contexts like that.


These are slides from a lecture. The bit below would be spoken aloud.


That makes more sense


2 slides in and I thought "Wow, this is awesome!" Great way to show beauty in math. (It's more than just numbers and formulas!)


Make sure you get to the last slide, it is stunning. This one: http://i.imgur.com/QWx4lVX.png (but a screenshot is nothing).


Very cool. I remember attending a lecture in Buenos Aires on "Fourier Analysis for Dummies" and this complicated mathematical term that had scared me for years suddenly seemed so straightforward. It's a neat thing to see others explain it in ways that don't involve all the equations.


Couldn't see it for lack of webgl but makes me wonder, how did people visualize/understand Fourier without all the neat abstractions, metaphors, and history ?


> how did people visualize/understand Fourier without all the neat abstractions, metaphors, and history ?

The answer to that is, I think, exactly why so many people don't like math; because, in math discovery, first comes the history, in the sense of the problem that motivates the nrew technique, then comes the metaphor comes, and only then is the math (which I suppose is what you mean by 'abstractions'?) built around it.

Math professors, whether out of ignorance (we don't know the history), or preference (we learned this way and we like it), or even just time constraints (there's not time in a standard semester class to tell the full story of the concepts), will often teach only the math, or treat the intuition and metaphor as secondary; but they were, of course, the entire genesis of the subject.

No-one retrofits intuition to mathematics; mathematics is rather a way for experienced practitioners to 'sanity-check' and formalise the intuition that they already have.


RIP headphone users on slide 29.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: