Show HN: Intuitive Linear Algebra and 3D Geometry
intuitive-math.clubI appreciate the visualizations, but the explanatory approaches follow the same ones I've seen in basically every textbook. The following particularly epitomizes that: "...it is worth defining what a subspace is in terms of its formal properties, then what it is in laymans terms, then the visual definition, showing why it is that those properties need to be satisfied."
Why not... show it visually, manipulate it visually, explain in layman's terms and THEN explain the formal properties? That is the approach 3Blue1Brown takes to great success.
So, definitely useful renderings, but I'm not sure it's any more "intuitive"* than the mainstream approaches.
* In quotes to indicate that there is quite a bit of subjectivity in that term.
Thanks for the feedback! I was a little worried that the explanations would fall back too much on formal properties, so I guess I've got a bit more work to do on the visualization side of things.
I think you are doing a great job here. I looked through your sections on determinants and inverses, and it is so much better than the way I was taught: "this is the formula for inverting a 2x2 matrix. This bit is called the determinant." For me, learning always works best when I know what we are working towards and seeing how it works, and putting the formal definition first is rarely effective in that. Start with a specific example, concrete where possible, and generalize from that.
Indeed. I think one of the thing I wanted to focus on as well in this series was explaining exactly where a lot of the formulas came from. It was a great learning experience, since a lot of what I was taught was basically as you said "here is the formula for the determinant and oh look, NxN determinants can be worked out in such and such a way if you just apply this algorithm". It was super useful to decompose why that algorithm works from a visual perspective. Same thing with surface integrals.
There's no perfect order for everyone. The trick is to spiral around revisiting levels and styles (and don't worry if you don't grok a part yet) until they all start to gel and your brain forms aweb of connections.
So many people think the second book they read on a topic is soooo much clearer than the first. But it doesn't much matter which book they dead first vs second :-)
The 'second book effect' is an interesting point, but that phenomenon, by itself, would suggest that there are improvements to be made in how we teach things from the beginning.
> explain in layman's terms and THEN explain the formal properties?
The explanations are definitely very lacking of formalisms. There even isn't any proper explanation of what a vector space actually is.
It doesn't seem to pretend to be a full textbook replacement, more like a supplementary material, so I don't think it matters all that much.
This seems interesting, but I feel like it would be way more useful if you could drag to rotate however you want, instead of waiting for the animation to get sort of close to the viewpoint you're interested in. It would also be good if the image wasn't covered by a big play button when paused - it's not really possible to pause it to look at things or adjust numbers.
I really like the visual representation of elementary row operations, but the intersection of the three planes is off their edges, so isn't actually shown. Also, "any vector multiplied by the three standard basis vectors in matrix form, i, j, k" uses a really complicated strange way to say "identity matrix" - you're not actually talking about multiplying by the standard basis vectors.
I found a bug (Chrome 65.0.3325.181, Windows): The scroll position is kept when you switch sections, so you have to manually scroll up to the top.
> This seems interesting, but I feel like it would be way more useful if you could drag to rotate however you want, instead of waiting for the animation to get sort of close to the viewpoint you're interested in.
Great feedback! I had been thinking of doing something like this but I was waiting on actual readers to mention it. I'll see if I can get to it this weekend.
> I really like the visual representation of elementary row operations, but the intersection of the three planes is off their edges, so isn't actually shown.
Yeah, good point. In the last visualization we have a vector pointing to the intersection, perhaps a similar sort of thing can be leveraged there.
> I found a bug (Chrome 65.0.3325.181, Windows): The scroll position is kept when you switch sections, so you have to manually scroll up to the top.
Thanks for the report! I think someone else mentioned this already and I filed a ticket on the github repository.
Watch 3blue1brown's linear algebra videos instead: https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2x...
(These are some of the finest educational materials for mathematics that have ever been created in any media, they really are that good.)
I actually got my inspiration to do this from the 3b1b videos. And I agree, they are very fine educational materials.
The gap which I'm trying to fill here is that 3b1b goes over the higher level intuitions but tends to skip over some of the details at times (which is fair enough, they're a pain to demonstrate through video and animation). The idea I had here was to have worked examples as well.
>Watch instead
Different tastes for different people. I found this website to be more useful, since I can browse, reread and skim through the text much more easily/faster than on video.
Indeed - this is one of the main motivations I had for creating this. 3b1b is great, but I much prefer reading than watching.
This is also nice https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2x...
This is the best way of getting an intuition for linear algebra that I'm aware of. One of the few cases where video is the best medium for teaching the subject.
Here is another from the authors of Real-Time Rendering[1].
Super cool, I didn't know that existed. Clearly someone else has had the problem I experienced too. I'll have to add that with a list of other useful resources on the site.
is it just me or is the sidebar broken? Selecting a link on the sidebar after getting to the end of a page doesn't reset scrollY position
Also maybe it's just my phone but on mobile the sidebar covers the whole website making it impossible to read
Oh interesting. What phone are you using? It should enter a mobile-friendly kind of view, but I haven't implemented that on the server side renderer yet.
You may want to consider mobile-friendliness purely client side, using CSS to set up different layouts depending on the resolution - what's typically called Responsive Web Design. Sounds cumbersome, but with just the right couple of design tweaks you may get 90% usability on mobile.
Actually, I think the issue here now that I think of it is that we do media query detection in on the React side to figure out which components to render. Really, we should just render a single component and have CSS to cover both cases.
Other sites do this, so it should be possible, though it would require me to change the react component that renders the sidebar (I'm using Atlaskit, but that doesn't have support for mobile responsive rendering, sadly).
It is! I'll fix it later tonight.
I appreciate any effort to make mathematical explanations more intuitive. A couple of thoughts:
1. There are a few grammatical errors (missing word, missing comma) that are forgivable but I find that any imprecision in language is a big detriment for a student trying to understand an explanation. I tend to get hung up on those since, not knowing the material, I can't resolve ambiguities with context. Since subtleties are important in math it would be worthwhile to go over the explanations again with a fine-toothed comb to ensure there are no typos or amphiboly.
2. The visuals aren't always clear. For example, volumes don't show edges so it's hard to make out that you're seeing a volume rather than an irregular area (and which volume you're seeing). Also I think a caption to each image could be useful, to describe how the shape demonstrates the concept. Something like "this visual represents a shear transformation of the matrix described above", just to be really explicit and clear.
Hey, thanks for the feedback!
> There are a few grammatical errors (missing word, missing comma) that are forgivable but I find that any imprecision in language is a big detriment for a student trying to understand an explanation. I tend to get hung up on those since, not knowing the material, I can't resolve ambiguities with context. Since subtleties are important in math it would be worthwhile to go over the explanations again with a fine-toothed comb to ensure there are no typos or amphiboly.
Yeah, this is a pet peeve of mine for sure. I am not very precise when it comes to written prose.
I was thinking of airtasking out a grammar check, since I'm pretty awful at catching my own mistakes here. I might just do that.
> The visuals aren't always clear. For example, volumes don't show edges so it's hard to make out that you're seeing a volume rather than an irregular area (and which volume you're seeing). Also I think a caption to each image could be useful, to describe how the shape demonstrates the concept. Something like "this visual represents a shear transformation of the matrix described above", just to be really explicit and clear.
Great idea. I've added it to my list at https://github.com/smspillaz/intuitive-math/issues/8
This is incredibly useful and informative. I have a degree in math, and I learned some new intuitive concepts I really wish I had better-grokked in college.
The "voice"/style of the writing has a great balance between giving theoretical information and keeping it comprehensible without having to read like 5 times (which most algebra texts imo really botch!).
Most algebra concepts (in the linear/modern/abstract sense) have an intuitive/mental-model foundation, often graphical. It's disappointing that most texts don't explore the intuition in a friendly way like this text does. (The theory is deeper than the intuition and intuition can be very wrong at times, but anyone studying advanced-ish math like this is capable of realizing that!)
One annoyance is that the graphs don't render if they're slightly off-screen (and they render slowly/fade-in or something) so it can be somewhat annoying to scroll back/forth between graphic examples.
Thanks!
> One annoyance is that the graphs don't render if they're slightly off-screen (and they render slowly/fade-in or something) so it can be somewhat annoying to scroll back/forth between graphic examples.
Yeah. This was an engineering tradeoff - there's a limit on the number of WebGL contexts (15 for Firefox, for instance) that can be running at any time so I had to turn off rendering of the visualizations when offscreen.
If anyone knows a better way to approach this, please let me know!
Love this! I've been meaning to write something similar as appendixes for my (free, online) Computer Graphics book [0], would it be OK to link to this instead / in the meantime?
[0] http://www.gabrielgambetta.com/computer-graphics-from-scratc...
Yes, absolutely.
I'm receiving lots of great links in the comments here, so it'd be great to cross link similar resources on this page too.
Thank you very much. After watching 3B1B linear algebra videos, I wished there was a more in-depth interactive tutorial. You made exactly what I wished.
Thank you! This was exactly my motivation in making it, so I'm glad it helped you!
Gilbert Strand's lecture at MIT are very helpful to start with linear algebra: https://ocw.mit.edu/courses/mathematics/18-06-linear-algebra...
Going to a non root or leaf page gives an internal server error, example: https://intuitive-math.club/linear-algebra
Hey, thanks for pointing this out. I've added it to my list here: https://github.com/smspillaz/intuitive-math/issues/7
Very cool, useful for people learning to write ray tracers
Thanks for this, bookmarked. There is a pretty large community of creative coders that would use this.
Entire site is down :) too much traffic
Yeah, for some reason I saw 60,000(!) requests on lambda all at the same time so I guess it had a bit of trouble scaling up. A scraper or Googlebot perhaps? Should be all fine now.
Just curious - couldn't this perfectly be a static site?
It probably could be, as long as I figure out how to get code splitting to work with it being a static site. Shouldn't be too hard. I imagine its just a case of pre-rendering all the routes and then uploading the whole thing to an S3 bucket.
intetnal server error