Exactly. Or put another way, why is there not more pedagogic material like this on the web? We have Jupyter notebooks in many different academic subjects but so many of them are half-baked. This website serves as an example of how good web-based teaching material can truly be.
I think we'll get there. Part of the problem has been ensuring that the content keeps working. There has been so much educational content produced on Flash, Java Applets, and other platforms that currently have no support.
But the "modern web" (HTML5 and javascript) seem likely to last a long time and be supported on many, many platforms. So now we need better authoring tools, because as another comment suggests, not everyone is up for writing 4K lines of code.
That's what I thought, but now more and more features are being disabled either entirely (as with the SQLite interface in WebKit) or for unencrypted sites, which — correct me if I'm wrong here — includes web pages you've archived on your local filesystem. Maybe <canvas> will survive that, despite its use in browser fingerprinting, but camera access and appcache are already nuked, and the only interface that let you do custom realtime DSP on audio streams from an unencrypted origin is deprecated.
I'm going to add very little to this discussion, but it's the second article from this blog I've seen here, and - like the other one, about the Earth and the Sun - it's absolutely amazing. This is some of the finest work in "explorable explanations". I'm going to save the copy of both just to be sure to show them to my kid in a couple of years; this beats any educational material on the topic I've been exposed to before.
It is indeed great, and probably one reason you don't see it more is that it's a ton of work! That's 5K lines of hand-written code! (view source and it's at the end of the page)
I've wanted to make visualizations like this for my blog. Writing a blog post takes me around 10 hours, which is a fair amount of effort.
I believe that the visualizations will take more time than writing in general -- i.e. it would be more like 20 hours, bringing the total to 30.
If you consider that it's 4K lines of code (assuming the base library is reused), it's very easy to see that it could take 20+ hours. Probably more like 40-80 to be honest.
I guess there is that other thread that says people only write 10 lines of code a day, which would make it 400 hours ;) I don't think that applies here but it could be closer to 400 than 10 or 20.
----
I also wonder if you can save time by using a less "hand-written" style (e.g. d3.js, which seems to be on everyone's wishlist to learn).
My inclination is also to go "hand-written" rather than using a bunch of JS libraries. I think you get a better result that way. It's interesting to see that I'm not totally wrong -- the thing everyone praises ends up being very hand-written. And it's smooth and fast, etc.
----
another edit: I also believe one reason that this visualization is good is because there's no build process in the JS. The author clearly just edits the code and refreshes the browser. You need that kind of fast edit-view loop to make good visualizations.
IOW, consider using plain JS for blog posts. They are documents and not apps.
Having been down this road, yes, it does take time, but you can save some time by using SVG and some DOM library. Although canvas is faster, most diagrams don't really need it, so I use SVG unless I really need to switch to canvas. SVG also adjusts for screen dpi automatically.
The things I like:
1. Reactivity (ObservableHQ, Vue.js, hyperactiv.js, etc.). There's usually some underlying data and then a corresponding visualization. These reactive systems let you modify the underlying data and then the visualization updates automatically. You don't have to figure out which diagrams to update when. Even easier: just redraw everything every time you change anything.
2. Some easier way to write the DOM (d3.js, jsx, vue, lit-html, etc.). Since I'm writing a blog post with html, I usually prefer writing my js-in-html (vue) rather than html-in-js (jsx) but try both directions and see which you prefer.
3. No build step. This is especially important when I want to update a page years later and don't want to figure out which build tools I was using in 1997 or 2007 or 2017. I want my pages to last for decades, and I still update my pages from 25 years ago.
I tried recreating one of the gear page diagrams in ObservableHQ https://observablehq.com/@redblobgames/unwind-circle-example . It's not a lot of code. There's a slider, there's a loop to generate the lines, and there's the output svg. Whenever you move the slider it recalculates the output.
I admit that I'm not using ObservableHQ much for my own projects because I want more of a "hand-written" style. I used d3.js for my older pages and vue.js for my newer pages. Vue's reactivity and templates save me probably a factor of 2 or 3 over d3.js.
I love ObservableHQ! I think it's a neat model that fixes a lot of things I didn't like about notebooks. I don't use it much though. It makes the simple things easier but it makes the complex things harder. Examples:
1. I often start making a diagram interactive by adding a slider connected to some state. The slider/state is in one "viewof" cell and the diagram is in another cell. But for more polished work I often want to use direct manipulation, where you move something around in the diagram itself. In my usual JS+Vue code it's a small amount of extra work. But in ObservableHQ it seems like a lot of work: the diagram has to modify state defined in a different cell (breaking the simple spreadsheet model in my head), and the diagram is being re-rendered while it has event handlers active.
2. I often start out by making one diagram. This is nice and easy. But then I want to make multiple diagrams with some shared state. In my usual JS+Vue code I can lift the diagram code into a function, pass in a shared object for shared state, and instantiate objects for non-shared state. In ObservableHQ those properties are in cells, and I can't generate multiple cells programatically (afaik).
I also would prefer to host things myself, both because of longevity, but also because I sometimes work offline (e.g. in a park or on a train). And the biggest reason I'm not using ObservableHQ is that I'm so much slower editing text on it than I am in Emacs. So I continue to use ObservableHQ for some simple projects/prototypes but I don't do a lot with it.
Yeah, the centralization aspect is a big turnoff for me. I'd thought about the direct-manipulation issue (the rather crude visualization of skeletonization I linked below benefits a lot from it) but not the multiple-projections problem. Can't you put the entire state in one cell and then create multiple cells that render some reduced dimensionality projection of it? Or do you mean that there's no way to factor out the aggregation of three such projections into a reusable unit?
I recently walked my girlfriend through your explorable on populating landscapes with Perlin noise btw. It was great.
Observable is amazing! Some time ago, I prototyped half of the 2.0 version of a company's product in it in a scope of a few days; that's how nicely the notebook interface and reactive programming fit together.
I didn't realize Vue can work without a build step; that's actually great. While I so far avoided using any JS on my tiny little blog, I'd really like to do some interactive explanations. I'll check this workflow out. Thanks!
Last but not least, I'm a great fan of your articles! Keep up the great work!
Thanks for these tips -- I've seen your visualizations and it's nice to hear from people who have done it!
It's cool that you were able to reproduce the diagram quickly and in a small amount of code. It looks a bit foreign to me, probably because I don't know much about SVG (or canvas for that matter). And as I understand it Observable is almost another language on top. (I do know HTML, CSS, and JS pretty well, but there's still a gap.)
Do you ever mock visualizations up in a WYSIWIG tool, or do you always use web technologies in a text editor?
Doing it programmatically has advantages when you need to make 30 similar diagrams, as in this post about gears.
But I also feel WYSIWIG tools could help in prototyping to avoid throwing away a lot of code that wasn't properly conceived of. That is, implementing the visualization is only part of the huge amount of work; the other part is designing it of course. And in many cases the design effort is probably larger.
For example, I have wanted to write an article about regexes, visualizing NFAs and DFAs. I find that some programmers have trouble with the idea of nondeterminism, which is more of a mathematical thing. A subtitle would be something like "A trie is a special case of a DFA".
This post has some nice diagrams, and you can easily imagine them being interactive and more approachable:
(in fact a few months ago else I posited that a textual summary of these great but dense posts would be useful too)
I can sort of imagine what I want to visualize, but I also think there will also be many false starts. Though maybe a pencil and paper is sufficient. I'm not sure I will get to it, but this polished and smooth gears post got me thinking again! Using something reactive like vue rather than doing it "vanilla JS" is also probably something I should look into as well.
SVG is declarative. You write <circle cx=300 cy=400 r=100 fill=red/> to make a red circle at (300,400) with radius 100. You can then change any of these properties and the system will redraw automatically. Canvas is imperative. You write ctx = canvas.getContext('2d'); ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(300, 400, 100, 0, 2 * Math.PI); ctx.fill(); and the system will draw that circle. You handle redraw yourself by redrawing everything on that canvas, so you need to keep track of it all. The DOM helpers (React, Vue, etc.) help you with SVG but not with Canvas.
I usually mock visualizations on paper! I'm interested in using WYSIWIG interactive diagram tools like http://aprt.us/ but I never seem to get into them. When I started, making the visualizations was the largest part of the work, but now I've gotten better at it, and making the explanation is now the part that takes the most time.
After paper, I often use SVG to make a non interactive diagram, either by hand, or in inkscape. One of my guiding principles is that the page should be usable without interaction, so the static diagram is a test of that. If it looks promising I can then gradually transform it into an interactive diagram. For example if I had the circle above, and I am using vue.js, I can change it to <circle :cx=x :cy=y r=100 fill=red/> (note the ":" before attributes), and then vue will fill those values in from the object I give it. I can give it {x: 300, y: 400}, and any time I change x or y, it will automatically redraw. I can then hook up x or y to a slider to try out the interactivity. This allows me to start with a static diagram, gradually add interactivity, and then build reusable abstractions that I can apply to multiple diagrams. ObservableHQ and React/JSX allow something similar, with slightly different syntax.
I'd love to see an article about regexes with interactive diagrams. There's a standalone diagram tool https://regexper.com/ and an interactive tutorial https://regexone.com/ but neither is an essay in the style of the Gears article. If you're pursuing this, let me know at redblobgames@gmail.com and I can send over more resources.
Writing a small program takes much less effort per line than writing a large program, especially if it doesn't have to be maintainable and extensible, especially by other people. http://canonical.org/~kragen/sw/dev3/circlegrid.html only took me three hours of JS hacking, and it's like 200 lines of code. The simplified version of the basic COCOMO model in David A. Wheeler's "SLOCCount" is Person-Months = 2.4 * (KSLOC1.05), which suggests a budget of 0.44 person-months for this code, about two weeks, which is clearly too high; we've all written and debugged a few hundred lines of code in a day on some occasion after getting out of the larval stage. This probably would have been faster if I hadn't been so out of practice with DHTML.
Another thing, though, is that some things are easier than other things. Usually in a programming job you have to do the easy things and also the hard things. This brings down the average. If you're writing a bunch of blog posts for fun, though, you can just publish the ones where good visualizations came out pretty quickly and discard the others that are much more effort for less return.
I feel like visualizations using d3.js are still pretty "hand-written".
That's true, and like everything I'm sure writing JS visualizations gets faster with practice, and you become more familiar with the tools.
Still, after finishing the article, I'm impressed by not just the the number visualizations, but by their legibility and smoothness. I can't in any universe imagine it taking less than a week of full-time work. If you told me it took a month of full-time work I wouldn't be surprised at all.
----
I liked this concept of "interpretive labor" and that's what I'm really getting at:
There’s a tradeoff between the energy put into explaining an idea, and the energy needed to understand it. On one extreme, the explainer can painstakingly craft a beautiful explanation, leading their audience to understanding without even realizing it could have been difficult. On the other extreme, the explainer can do the absolute minimum and abandon their audience to struggle.
I've been writing for public consumption for about 3 years and really feel that tradeoff. When I put effort into some writing or explanation, the result is better. People tell me it clicked, etc.
And I would say you can go a lot further than you think in bridging the gap. This article is evidence of that! Lots of people here are saying they wished they had this in high school, etc.
3Blue1Brown's videos are another example of that. I was fairly good at math in high school but if those videos existed then, I would have probably gotten a lot further.
----
This ties in nicely to your Dercuano notes which I have had open in my browser for awhile! There are many interesting topics there. But I also feel like you went to the other extreme and there's a lot of interpretive labor involved in reading them :)
Why did you decide to polish and publish the "memory models" post? I'd like to see more posts like that. (I could send you the notes that jumped out at me if interested.) Whenever I've taken the time to polish some writing, I've never regretted it. For some reason it feels annoying to start (probably because I have to clear my brain of other things), but when I'm doing it it's fun, and when I'm done, it's worthwhile.
> Still, after finishing the article, I'm impressed by not just the the number visualizations, but by their legibility and smoothness
I think the author probably had to try a lot of things
before hitting on such a well-balanced set of visualizations: not too much detail, not too little, not too many degrees of freedom, not too few, usable on hand computers, usable on laptops. But I think that if you gave someone the web page to look at and asked them to make similar visualizations, it would probably take them a day or two.
> I would say you can go a lot further than you think in bridging the gap.
You might be right, but I'm kind of cynical about it. I think it's easy for people to fool themselves into thinking they understand things after seeing a good explanation. Nova on PBS resulted not in rapidly advancing physics from the generation of kids who grew up watching it, but instead Deepak Chopra and The Secret — the fruit of the illusion of fluency without the corresponding skill.
Worse, the educational system is in many ways optimized to promote the illusion of fluency. You have textbooks of the variety Feynman complained about, with the wakalixes. You have semester-long self-contained courses, discouraging spaced learning. You have pre-announced big-bang exam dates for those courses, so students game the system by cramming to get better grades. In many cases you have multiple-choice tests to make grading easier, so guessing the teacher's password is the highest-return gaming strategy, even if often insufficient by itself. The whole educational experience is compressed into a degree program of four years or thereabouts, further discouraging spaced learning. Students rarely attend any classes they aren't getting credit for, even though this is technically permitted at most universities I've visited. It's a commonplace observation that students forget almost everything they "learn" within a few years. So the idea students get of learning is very different from what learning is; schooling systematically distorts their ability to evaluate whether they are learning or not.
(Paul Graham has explored this theme from a different angle in http://www.paulgraham.com/lesson.html as well.)
How would we distinguish a universe in which this beautiful post on gears successfully transmitted learning to its readers from a universe in which it only transmitted the illusion of learning to them? In both universes the post is popular. In both universes people say things like "I wish I had this in high school!" But in one universe people are able to do things they couldn't do before; perhaps design gear trains for 3-D printing that show up in Hackaday projects, or perhaps laser-cut unusual gear-tooth profiles with different pressure angles or different depthing/ripple tradeoffs or something. But that could take a while, and it might be really hard to trace back. Is there a lower-latency indicator we could observe, even if it's something hackable like school exams?
I don't want to sound like I'm above all this. I feel like I have new gear knowledge from reading this post, despite having read hundreds of pages about gears and watched hours of gears videos previously; it happens to be something I can state, namely that the pressure angle always needs to point at the point of tangency of the pitch circles. But I'm not yet sure if that's really true or what happens if it's false (you can definitely design gears for which it is false). I'd need to struggle with the problem for a while in order to really understand it.
(A different learning effect would be that people learn that posts like this are very popular and make more of them, having been inspired by this one. I'm pretty sure that will happen whether or not people learned things about gears from this post.)
I'm with you that there can be an illusion of fluency, but I don't think that casts any doubt on the value of the article.
Most people will read it and say "fun" (including me, since I don't work with gears) and maybe 5-10% will go on to do something else with it, but that's working as intended.
I agree you can't really say you know something without testing the knowledge. You need to do more work to test whether you know it or not, but having the concepts and words at hand is a prerequisite for that. I'm certain if I were to actually work with gears I would come back to this article. (I would probably also learn where it falls short in practice, but I would learn that about any resource AFAICT.)
-----
Testing your knowledge is one reason my brain flipped from math to programming over 20 years. Math is hard to test but programming is easy to test.
However, one thing I found surprising is that publishing tests your knowledge, but writing does not. I would categorize Dercuano as writing but not publishing at the moment.
Blogging is a public act. Anyone can read this. When I write a blog post, I imagine my supervisor, a respected colleague, or a future employer reading my explanation. These imagined readers force me to ask myself honestly if I understand what I am writing.
I found the same thing while writing my posts on https://www.oilshell.org. If someone digs this up in 5 years, is it going to look dumb? And of course simply not knowing something is not dumb, but pretending you know something you don't is dumb (likewise with promising something you can't deliver, which I've been careful not to do).
I can see there are a lot of great ideas in your notes, but I have 100% certainty that polishing those ideas will lead to a better understanding, more ideas, and forcing a focus. The writing alone alone doesn't cut it. (I know because I also have 3382 personal wiki pages with notes and URLs accumulated over 15+ years with overlapping research!)
I would definitely comment on drafts. I was paid to review the second edition of Effective Python last year, and am also reviewing a book for a friend currently, so I have some experience with that. I'm most interested in the posts on parsing, automata, languages, compilers, and (parallel) algorithms -- I have less experience with graphics. I didn't know you were working on HAMMER -- that line of research is also in my wiki pages and I have several thoughts about it. I'll send you a mail with the ones that jumped out at me.
> another edit: I also believe one reason that this visualization is good is because there's no build process in the JS. The author clearly just edits the code and refreshes the browser. You need that kind of fast edit-view loop to make good visualizations.
You can go a step further and reload code without refreshing the page. This makes it even easier to make the sort of fiddly tweaks that visualizations require while avoid change blindness.
In some cases I've exposed sliders to enable a 60Hz feedback loop on those fiddly tweaks. In other cases Firebug or its modern successors already expose enough.
This. The time and effort it takes to put such a visualization together for a target audience that might possibly just gloss over the content is immense. Its like making a multi-million dollar movie about people who have no money just to show thier situation. Instead of giving them the money directly. And on top of that you need all the requirements to actually be able to view it in the latest browser.
I can't quite remember what the software was, but I vaguely recall something in school that we used to explore various topics in physics which used an approach very similar to this. Literate text with interactive diagrams and input variables.
It wasn't web delivered and was a Windows, perhaps Win 3.1 application. This was in mid 90s
Wow!. I always blank out when my MEs talk to me about Gear ratios and TOrque when designing Electro mechanical systems. This is really helpful. Thanks for making this.
The illustrations are what draws attention and they are very nice and informative.
In context of parallel HN discussion¹ on merits of animated SVG, I consider it a loss for open standards that these animations are not made in SVG. If you try to inspect this page, the design and animation is hidden behind canvas and some (nicely written BTW) imperative javascript. It is hard to replicate, and hard to compose with other elements. The illustrations are completely white when disabling JS, which is less than ideal graceful degradation. Some people would argue that executing custom scripts should not be required to show animated graphics, even if it includes basic interactivity.
For comparison, visit this page² and try to 'inspect' animated graphics. Observe the SVG element in DOM and see how it changes when you scroll. Just by spending few minutes exploring you could probably recreate them, or at least reuse them somewhere else. We still don't see what's driving the animation (also JS), so that could still be improved using SMIL, but there is obvious benefit for using SVG here.
Don't take me wrong, it is really a nice article with very pleasant and clear animations. I'm merely speaking from perspective of open standards, and technology stack that provides good foundation for building complex illustrations. The author is not to blame here, as we lack decent tools for declarative graphics/animations.
It's really funny you mentioned the other discussion because that's what I immediately thought when I looked at this page: that's a great use of SVG animations.
It's why I made this comment in response to a UX designer (many people on the thread seem to think that SVG animations are mainly for animating UX components):
"There are whole worlds of use-cases outside the very restricted design paradigm you're describing."
I personally disagree with people who disable JS and expect the web to continue working as expected, but one of the other downsides of using Canvas for such animations is that there is no good way of exposing that animation to screen readers. Some projects get around this by having an accessibility layer in DOM that overlays the Canvas which renders the actual animations (e.g. https://proxx.app/), but I imagine that a11y animated SVGs would be a better approach here (if they were easier to create).
> I personally disagree with people who disable JS and expect the web to continue working as expected
In a general sense, I agree with you.
But pages that are generally static, like a blog or news article, should still work.
I think it's completely reasonable that the animations in the linked article break with JS disabled. Could they have been done differently and had graceful degradation? Yeah, I suppose. But I think it's fine as-is.
> The author is not to blame here, as we lack decent tools for declarative graphics/animations.
Please show me the pure SMIL declaration for a pixel-exact replica of the example from the wonderful article: number and size of teeth on a spinning gear scales based on the horizontal position of a draggable slider.
On a related note: this wonderful article is an article. The next time an HN article about web complexity triggers another HTML Class of 4.01 Reunion, it would be great if admirers of this article would post the link and force them to reveal the true depths of their asceticism.
I think I win either way. If there really is an SMIL solution then then the 4.01 grumps would be forced to backport declarative graphics/animation into their nostalgia. If not, then my point stands.
Can you explain what is it that you win? Because the current state where it takes a talented programmer + mathematician + designer to create this kind of content is loss for everyone.
No, SMIL on its own cannot replicate these illustrations. I hope that some future standard for declarative reactive graphics will be able to.
It's easy to lose track of in the face of scene graph vector formats like svg but you have to remember canvas + javascript can be thought of as a procedural cad system, that is, the epitome of drawing tools.
The svg is a static weak alternative to true procedural generation.
For reference the postscript language is the same way. hand written procedural postscript is an amazing drawing tool.
The diversity of topics, hand-crafted graphics, and quality of explanation on all the posts on this blog remind me a lot of Andrew Glassner's columns from IEEE CG&A. Really delightful work (in both cases).
There should be some tool to make such nice animations easily. Not just gears, but any other illustrations with moving parts with the ability to have a zoomed in detail beside the animation, etc.
Wow this is great OP! If you like this check out http://507movements.com/ - an animated webpage of 507 mechanical movements with descriptions from a classic book.
I was on a Chromebook with a touchscreen. Maybe you do "platform detection" and don't register touch handlers on laptops. I haven't looked at your code (I didn't see a repository link and I didn't bother looking further).
Cheers on the cool demos, I think it could be the start of a great resource for elementary school teachers introducing machines. I know this sort of thing would have been great when I was in grade 3.
This may be a stupid question, but it is something I always wondered.
Torque is effective due to the mass of the lever having a force applied to it, right? Is the length of the lever being used as a stand-in for the mass being affected (a longer lever would necessarily have more mass)? If the lever had no mass, would there be no torque? If the lever did not have a uniform mass distribution, would the difference in applied torque differ based on where on the lever you applied the force (is the derivative of torque with respect to mass not constant for a non-uniform mass distribution)?
No, the mass of the object that has a force applied to it has absolutely nothing to do with the torque.
Here is how Wikipedia defines the torque caused by a force acting on an object with a rotation axis: Torque is the product of the magnitude of the force and the perpendicular distance of the line of action of force from the axis of rotation.
So the force generated by the torque is completely unaffected by the mass of the lever? Then, why does applying the force on a longer portion of the lever create more torque? I had thought it was because there is more mass acting on the point of rotation (longer lever = more mass).
It's the distance that matters. If you push a car it will speed up. If you push it twice as far it will speed up more.
If you apply the same force using a longer lever then the end of the lever moves further (it follows a bigger circle) so you are applying the same force over a bigger distance.
> So the force generated by the torque is completely unaffected by the mass of the lever?
Yes, that's right.
> Then, why does applying the force on a longer portion of the lever create more torque?
Most of the answers to this question reduce, upon examination, to "that's how we define torque". We define the torque of 100 newtons at a lever distance of one meter as the product of 100 newtons and a meter, which we can call 100 newton-meters, which is equal to 1000 newtons at a lever distance of 0.1 meters.
But that doesn't really answer the question, which becomes, why is torque defined in this way an interesting thing to think about? And the answer is that if the lever is a rigid body free to rotate around a fulcrum, then 100 newtons at one meter in one direction will make it start to rotate, while 1000 newtons at 0.1 meters in the opposite direction will precisely cancel that "moment", as we call it, and there will be no tendency to start rotating. It's about what forces are needed to cancel each other.
Well, but, why should that be? Why does it take exactly 1000 newtons and not, say, 316.2 newtons? And I don't think I have a really good answer for that question. In the case of an elastic solid body it falls out of Hooke's law and the geometry of the situation, which you can reduce to two long, skinny triangles sharing a common side bisected by the fulcrum. But it seems to be much more general than that.
> I had thought it was because there is more mass acting on the point of rotation (longer lever = more mass).
Nope. You can try using a pair of scissors or a folding ladder as a lever, or pull in different directions on the end of a fixed-geometry lever. The lever's mass doesn't change, but the leverage certainly does.
A generalization which applies to levers, pulleys, and hydraulics is mechanical advantage while conserving energy. You have a system with input work and output work (energy) that are the same, ignoring frictional losses.
Recall that work is force over distance. The mechanical system relates the input and output distances by a scalar coefficient. Since the working distances are related by a ratio, the working forces are related by the reciprocal of that ratio.
You can find the lever and fulcrum ratio with simple geometry. The input and output lever segments are radii, and the travel is distance along two arcs. Since the arc length is directly proportional to radius, the ratio of lever radii translates directly to the same ratio of arc lengths, and the reciprocal ratio is the force multiplier. Your 10:1 lever sweeps 10:1 arc lengths and balances with 1:10 opposing forces.
Yes, that's an excellent point, but I think the lever law is more general than that. For example, it continues to apply when the lever in question is stationary, even though no value of the forces involved would violate conservation. In fact, it holds to higher precision in that situation because your measurements aren't confounded by vibration and accelerating masses.
Maybe you can derive it from some kind of generalization of Hooke’s Law to cover nonlinear stress–strain relationships, elastic hysteresis, anisotropy, viscoelastic behavior, and so on, but it's not obvious to me what that would be. Also, I feel like the concept of angular moments acting to produce angular acceleration is simpler and more general than all that stuff, but I'm not sure if conservation of energy and geometry alone are sufficient to derive it.
Torque is nothing more than "spinny" force. For example, sometimes you will see the term "generalized force" to mean both force and torque, because it doesn't really matter in some contexts. For example, if I have a robot arm that has some linear joints (like that of a 3D printer) and rotational joints (like that of an arm), you can talk about the generalized forces of each joint. Some of those generalized forces are linear (and people call that "force"), and some of them are rotational (and people call that "torque").
They are exactly analogous to (linear) velocity and _angular_ velocity.
When you talk about force _generating_ a torque, the only thing I can understand is how the linear velocity at a point on a disk (say you blow across its surface) _generates_ an angular velocity.
Nope, the mass of the lever doesn't play in to the torque that is applied at all. All that matters is that the force be transmitted via atom-to-atom motion. It's the rigidity of the wrench that mediates that, not its mass.
Of course, to create rigid objects, practically speaking they need to be made of something that will have mass. So the rigidity and the mass are related in a very loose sense. In any case, from a Newtonian physics perspective, you'll see none of those terms in there - neither a "rigidity" nor a mass. The torque is simply the length of the wrench multiplied by the magnitude of the force.
In a more detailed analysis, you might consider the flexure of the wrench by analyzing the stress and strain inside the wrench. That would no longer treat the wrench as a perfect idealized body that is completely rigid, but rather a body that can stretch based on the internal compressive or tensile forces that arise inside of it. Sometimes we don't think of metals as being stretchy, but with enough force, they're not so different from a rubber band.
With all that said, once you consider the _dynamics_ of the situation - how the forces applied give rise to motion - then mass does come into play. If you apply torque to a wheel, that will cause an angular acceleration proportional to the mass of the wheel. If you were using a wrench to spin a gear, then the mass of the gear decides how fast it will start to spin. Also, the mass of the wrench matters here, since presumably it will be spinning too: some of your effort has to go into angularly rotating the wrench. So it would have a "parasitic" effect on how fast you could get your gear spinning.
The mass of the lever just adds or subtracts from any other external force(s) applied to the lever - depending on the direction of the external force relative to the direction of gravity.
So a heavy wrench is helpful when pushing down, while loosening a rusty nut. But a light carbon fibre wrench would be better when pulling up.
How much torque gravity adds or subtracts in that case is also dependent on the distribution of mass along the length of the lever.
And to add to the fun, the mass of the leaver does add momentum into the equation, which comes into play as extra work required when changing speed of the rotation (e.g. starting, stopping the turn). And how much momentum also depends on the distribution of mass along the length of the lever.
This is great! The visual representation of rotation speed at each point makes a confusing subject much clearer. Is anyone familiar with the gear wars? I know it wasn't all about the gears, but I would love to get more insight into it
This is an absolutely phenomenal 'explorable explanation'. It methodically layers concepts to foster understanding, deploys interactivity to build intuition, and on top of all that provides crisp, clear narrative on top of all of the amazing visualizations.
We are all sitting here in collective awe, and the JS source contains this header:
> /* Dear explorer, this code works, but is by no means of high quality. Once a post is written I don't go back to the source code again and the formatting, robustness, DRYness and abstraction choices reflect that. */
I wish I had sites or visualizations like this when I had to do maths, I mean for example I've had to use sin/cos/tan in all kinds of calculations without ever being explained what they actually are, and the formulas without being explained what they're good for.
This is a really awesome article and brought me back to intro physics class, saving it and will return to it in the evening so I can fully digest :) Thanks!
While I appreciate the beauty this piece, I can't help but think of the irony of such a complicated piece to explain something which mechanics and engineers, who actually use gears, understand completely intuitively.
I had the same feeling, hoping to receive an epiphany, perhaps on the bevel of the gear teeth, but nope. Then I thought, ok, surely there's an insight to be gained regarding helical gears, but it was never discussed.
I'm not sure this is intuitive for many mechanics. I can remember studying for the ASVABs in high school (it has, or at least it did, have a whole section on spatial orientation and gears and pulleys), and it was pretty common for people to be flummoxed by the questions about picking which direction a gear in a set would turn when another was rotated. And this was with a set of people that tended to tinker on cars and snowmobiles all the time for fun.
229 comments
[ 2.0 ms ] story [ 221 ms ] threadBut the "modern web" (HTML5 and javascript) seem likely to last a long time and be supported on many, many platforms. So now we need better authoring tools, because as another comment suggests, not everyone is up for writing 4K lines of code.
https://woodgears.ca/gear_cutting/index.html
I believe that the visualizations will take more time than writing in general -- i.e. it would be more like 20 hours, bringing the total to 30.
If you consider that it's 4K lines of code (assuming the base library is reused), it's very easy to see that it could take 20+ hours. Probably more like 40-80 to be honest.
I guess there is that other thread that says people only write 10 lines of code a day, which would make it 400 hours ;) I don't think that applies here but it could be closer to 400 than 10 or 20.
----
I also wonder if you can save time by using a less "hand-written" style (e.g. d3.js, which seems to be on everyone's wishlist to learn).
My inclination is also to go "hand-written" rather than using a bunch of JS libraries. I think you get a better result that way. It's interesting to see that I'm not totally wrong -- the thing everyone praises ends up being very hand-written. And it's smooth and fast, etc.
----
another edit: I also believe one reason that this visualization is good is because there's no build process in the JS. The author clearly just edits the code and refreshes the browser. You need that kind of fast edit-view loop to make good visualizations.
IOW, consider using plain JS for blog posts. They are documents and not apps.
The things I like:
1. Reactivity (ObservableHQ, Vue.js, hyperactiv.js, etc.). There's usually some underlying data and then a corresponding visualization. These reactive systems let you modify the underlying data and then the visualization updates automatically. You don't have to figure out which diagrams to update when. Even easier: just redraw everything every time you change anything.
2. Some easier way to write the DOM (d3.js, jsx, vue, lit-html, etc.). Since I'm writing a blog post with html, I usually prefer writing my js-in-html (vue) rather than html-in-js (jsx) but try both directions and see which you prefer.
3. No build step. This is especially important when I want to update a page years later and don't want to figure out which build tools I was using in 1997 or 2007 or 2017. I want my pages to last for decades, and I still update my pages from 25 years ago.
I tried recreating one of the gear page diagrams in ObservableHQ https://observablehq.com/@redblobgames/unwind-circle-example . It's not a lot of code. There's a slider, there's a loop to generate the lines, and there's the output svg. Whenever you move the slider it recalculates the output.
I admit that I'm not using ObservableHQ much for my own projects because I want more of a "hand-written" style. I used d3.js for my older pages and vue.js for my newer pages. Vue's reactivity and templates save me probably a factor of 2 or 3 over d3.js.
1. I often start making a diagram interactive by adding a slider connected to some state. The slider/state is in one "viewof" cell and the diagram is in another cell. But for more polished work I often want to use direct manipulation, where you move something around in the diagram itself. In my usual JS+Vue code it's a small amount of extra work. But in ObservableHQ it seems like a lot of work: the diagram has to modify state defined in a different cell (breaking the simple spreadsheet model in my head), and the diagram is being re-rendered while it has event handlers active.
2. I often start out by making one diagram. This is nice and easy. But then I want to make multiple diagrams with some shared state. In my usual JS+Vue code I can lift the diagram code into a function, pass in a shared object for shared state, and instantiate objects for non-shared state. In ObservableHQ those properties are in cells, and I can't generate multiple cells programatically (afaik).
I also would prefer to host things myself, both because of longevity, but also because I sometimes work offline (e.g. in a park or on a train). And the biggest reason I'm not using ObservableHQ is that I'm so much slower editing text on it than I am in Emacs. So I continue to use ObservableHQ for some simple projects/prototypes but I don't do a lot with it.
I recently walked my girlfriend through your explorable on populating landscapes with Perlin noise btw. It was great.
I didn't realize Vue can work without a build step; that's actually great. While I so far avoided using any JS on my tiny little blog, I'd really like to do some interactive explanations. I'll check this workflow out. Thanks!
Last but not least, I'm a great fan of your articles! Keep up the great work!
It's cool that you were able to reproduce the diagram quickly and in a small amount of code. It looks a bit foreign to me, probably because I don't know much about SVG (or canvas for that matter). And as I understand it Observable is almost another language on top. (I do know HTML, CSS, and JS pretty well, but there's still a gap.)
Do you ever mock visualizations up in a WYSIWIG tool, or do you always use web technologies in a text editor?
Doing it programmatically has advantages when you need to make 30 similar diagrams, as in this post about gears.
But I also feel WYSIWIG tools could help in prototyping to avoid throwing away a lot of code that wasn't properly conceived of. That is, implementing the visualization is only part of the huge amount of work; the other part is designing it of course. And in many cases the design effort is probably larger.
For example, I have wanted to write an article about regexes, visualizing NFAs and DFAs. I find that some programmers have trouble with the idea of nondeterminism, which is more of a mathematical thing. A subtitle would be something like "A trie is a special case of a DFA".
This post has some nice diagrams, and you can easily imagine them being interactive and more approachable:
https://swtch.com/~rsc/regexp/regexp1.html
(in fact a few months ago else I posited that a textual summary of these great but dense posts would be useful too)
I can sort of imagine what I want to visualize, but I also think there will also be many false starts. Though maybe a pencil and paper is sufficient. I'm not sure I will get to it, but this polished and smooth gears post got me thinking again! Using something reactive like vue rather than doing it "vanilla JS" is also probably something I should look into as well.
I usually mock visualizations on paper! I'm interested in using WYSIWIG interactive diagram tools like http://aprt.us/ but I never seem to get into them. When I started, making the visualizations was the largest part of the work, but now I've gotten better at it, and making the explanation is now the part that takes the most time.
After paper, I often use SVG to make a non interactive diagram, either by hand, or in inkscape. One of my guiding principles is that the page should be usable without interaction, so the static diagram is a test of that. If it looks promising I can then gradually transform it into an interactive diagram. For example if I had the circle above, and I am using vue.js, I can change it to <circle :cx=x :cy=y r=100 fill=red/> (note the ":" before attributes), and then vue will fill those values in from the object I give it. I can give it {x: 300, y: 400}, and any time I change x or y, it will automatically redraw. I can then hook up x or y to a slider to try out the interactivity. This allows me to start with a static diagram, gradually add interactivity, and then build reusable abstractions that I can apply to multiple diagrams. ObservableHQ and React/JSX allow something similar, with slightly different syntax.
I'd love to see an article about regexes with interactive diagrams. There's a standalone diagram tool https://regexper.com/ and an interactive tutorial https://regexone.com/ but neither is an essay in the style of the Gears article. If you're pursuing this, let me know at redblobgames@gmail.com and I can send over more resources.
Another thing, though, is that some things are easier than other things. Usually in a programming job you have to do the easy things and also the hard things. This brings down the average. If you're writing a bunch of blog posts for fun, though, you can just publish the ones where good visualizations came out pretty quickly and discard the others that are much more effort for less return.
I feel like visualizations using d3.js are still pretty "hand-written".
Still, after finishing the article, I'm impressed by not just the the number visualizations, but by their legibility and smoothness. I can't in any universe imagine it taking less than a week of full-time work. If you told me it took a month of full-time work I wouldn't be surprised at all.
----
I liked this concept of "interpretive labor" and that's what I'm really getting at:
https://distill.pub/2017/research-debt/
There’s a tradeoff between the energy put into explaining an idea, and the energy needed to understand it. On one extreme, the explainer can painstakingly craft a beautiful explanation, leading their audience to understanding without even realizing it could have been difficult. On the other extreme, the explainer can do the absolute minimum and abandon their audience to struggle.
I've been writing for public consumption for about 3 years and really feel that tradeoff. When I put effort into some writing or explanation, the result is better. People tell me it clicked, etc.
And I would say you can go a lot further than you think in bridging the gap. This article is evidence of that! Lots of people here are saying they wished they had this in high school, etc.
3Blue1Brown's videos are another example of that. I was fairly good at math in high school but if those videos existed then, I would have probably gotten a lot further.
----
This ties in nicely to your Dercuano notes which I have had open in my browser for awhile! There are many interesting topics there. But I also feel like you went to the other extreme and there's a lot of interpretive labor involved in reading them :)
Why did you decide to polish and publish the "memory models" post? I'd like to see more posts like that. (I could send you the notes that jumped out at me if interested.) Whenever I've taken the time to polish some writing, I've never regretted it. For some reason it feels annoying to start (probably because I have to clear my brain of other things), but when I'm doing it it's fun, and when I'm done, it's worthwhile.
I think the author probably had to try a lot of things before hitting on such a well-balanced set of visualizations: not too much detail, not too little, not too many degrees of freedom, not too few, usable on hand computers, usable on laptops. But I think that if you gave someone the web page to look at and asked them to make similar visualizations, it would probably take them a day or two.
> I would say you can go a lot further than you think in bridging the gap.
You might be right, but I'm kind of cynical about it. I think it's easy for people to fool themselves into thinking they understand things after seeing a good explanation. Nova on PBS resulted not in rapidly advancing physics from the generation of kids who grew up watching it, but instead Deepak Chopra and The Secret — the fruit of the illusion of fluency without the corresponding skill.
Worse, the educational system is in many ways optimized to promote the illusion of fluency. You have textbooks of the variety Feynman complained about, with the wakalixes. You have semester-long self-contained courses, discouraging spaced learning. You have pre-announced big-bang exam dates for those courses, so students game the system by cramming to get better grades. In many cases you have multiple-choice tests to make grading easier, so guessing the teacher's password is the highest-return gaming strategy, even if often insufficient by itself. The whole educational experience is compressed into a degree program of four years or thereabouts, further discouraging spaced learning. Students rarely attend any classes they aren't getting credit for, even though this is technically permitted at most universities I've visited. It's a commonplace observation that students forget almost everything they "learn" within a few years. So the idea students get of learning is very different from what learning is; schooling systematically distorts their ability to evaluate whether they are learning or not. (Paul Graham has explored this theme from a different angle in http://www.paulgraham.com/lesson.html as well.)
How would we distinguish a universe in which this beautiful post on gears successfully transmitted learning to its readers from a universe in which it only transmitted the illusion of learning to them? In both universes the post is popular. In both universes people say things like "I wish I had this in high school!" But in one universe people are able to do things they couldn't do before; perhaps design gear trains for 3-D printing that show up in Hackaday projects, or perhaps laser-cut unusual gear-tooth profiles with different pressure angles or different depthing/ripple tradeoffs or something. But that could take a while, and it might be really hard to trace back. Is there a lower-latency indicator we could observe, even if it's something hackable like school exams?
I don't want to sound like I'm above all this. I feel like I have new gear knowledge from reading this post, despite having read hundreds of pages about gears and watched hours of gears videos previously; it happens to be something I can state, namely that the pressure angle always needs to point at the point of tangency of the pitch circles. But I'm not yet sure if that's really true or what happens if it's false (you can definitely design gears for which it is false). I'd need to struggle with the problem for a while in order to really understand it.
(A different learning effect would be that people learn that posts like this are very popular and make more of them, having been inspired by this one. I'm pretty sure that will happen whether or not people learned things about gears from this post.)
> This ties i...
Most people will read it and say "fun" (including me, since I don't work with gears) and maybe 5-10% will go on to do something else with it, but that's working as intended.
I agree you can't really say you know something without testing the knowledge. You need to do more work to test whether you know it or not, but having the concepts and words at hand is a prerequisite for that. I'm certain if I were to actually work with gears I would come back to this article. (I would probably also learn where it falls short in practice, but I would learn that about any resource AFAICT.)
-----
Testing your knowledge is one reason my brain flipped from math to programming over 20 years. Math is hard to test but programming is easy to test.
However, one thing I found surprising is that publishing tests your knowledge, but writing does not. I would categorize Dercuano as writing but not publishing at the moment.
It tests it in exactly this way:
https://news.ycombinator.com/item?id=22033792
Blogging is a public act. Anyone can read this. When I write a blog post, I imagine my supervisor, a respected colleague, or a future employer reading my explanation. These imagined readers force me to ask myself honestly if I understand what I am writing.
I found the same thing while writing my posts on https://www.oilshell.org. If someone digs this up in 5 years, is it going to look dumb? And of course simply not knowing something is not dumb, but pretending you know something you don't is dumb (likewise with promising something you can't deliver, which I've been careful not to do).
I can see there are a lot of great ideas in your notes, but I have 100% certainty that polishing those ideas will lead to a better understanding, more ideas, and forcing a focus. The writing alone alone doesn't cut it. (I know because I also have 3382 personal wiki pages with notes and URLs accumulated over 15+ years with overlapping research!)
I would definitely comment on drafts. I was paid to review the second edition of Effective Python last year, and am also reviewing a book for a friend currently, so I have some experience with that. I'm most interested in the posts on parsing, automata, languages, compilers, and (parallel) algorithms -- I have less experience with graphics. I didn't know you were working on HAMMER -- that line of research is also in my wiki pages and I have several thoughts about it. I'll send you a mail with the ones that jumped out at me.
You can go a step further and reload code without refreshing the page. This makes it even easier to make the sort of fiddly tweaks that visualizations require while avoid change blindness.
https://roadtolarissa.com/hot-reload
https://github.com/1wheel/hot-server
PS: had to archive the link because of SSL errors prevent direct access. my guess - my browser had old number of gears :P
It wasn't web delivered and was a Windows, perhaps Win 3.1 application. This was in mid 90s
In context of parallel HN discussion¹ on merits of animated SVG, I consider it a loss for open standards that these animations are not made in SVG. If you try to inspect this page, the design and animation is hidden behind canvas and some (nicely written BTW) imperative javascript. It is hard to replicate, and hard to compose with other elements. The illustrations are completely white when disabling JS, which is less than ideal graceful degradation. Some people would argue that executing custom scripts should not be required to show animated graphics, even if it includes basic interactivity.
For comparison, visit this page² and try to 'inspect' animated graphics. Observe the SVG element in DOM and see how it changes when you scroll. Just by spending few minutes exploring you could probably recreate them, or at least reuse them somewhere else. We still don't see what's driving the animation (also JS), so that could still be improved using SMIL, but there is obvious benefit for using SVG here.
Don't take me wrong, it is really a nice article with very pleasant and clear animations. I'm merely speaking from perspective of open standards, and technology stack that provides good foundation for building complex illustrations. The author is not to blame here, as we lack decent tools for declarative graphics/animations.
¹ https://news.ycombinator.com/item?id=22297461 ² https://www.opencrux.com/
It's why I made this comment in response to a UX designer (many people on the thread seem to think that SVG animations are mainly for animating UX components): "There are whole worlds of use-cases outside the very restricted design paradigm you're describing."
In a general sense, I agree with you.
But pages that are generally static, like a blog or news article, should still work.
I think it's completely reasonable that the animations in the linked article break with JS disabled. Could they have been done differently and had graceful degradation? Yeah, I suppose. But I think it's fine as-is.
Please show me the pure SMIL declaration for a pixel-exact replica of the example from the wonderful article: number and size of teeth on a spinning gear scales based on the horizontal position of a draggable slider.
On a related note: this wonderful article is an article. The next time an HN article about web complexity triggers another HTML Class of 4.01 Reunion, it would be great if admirers of this article would post the link and force them to reveal the true depths of their asceticism.
I think I win either way. If there really is an SMIL solution then then the 4.01 grumps would be forced to backport declarative graphics/animation into their nostalgia. If not, then my point stands.
No, SMIL on its own cannot replicate these illustrations. I hope that some future standard for declarative reactive graphics will be able to.
The svg is a static weak alternative to true procedural generation.
For reference the postscript language is the same way. hand written procedural postscript is an amazing drawing tool.
[1] http://worrydream.com/refs/Papert%20-%20Mindstorms%201st%20e...
Minute hand, surely ;)
Minute hand: 1RPH
Hour hand: 2RPD
Joke's on you, I have a 24 hour clock!
https://www.amazon.com/GreatGadgets-1858-24-Hour-Clock/dp/B0...
If I don't post it someone else will. Here's the spinning levers video you've all already seen a million times:
https://www.youtube.com/watch?v=JOLtS4VUcvQ
It reminded me a lot of: https://acko.net/blog/animate-your-way-to-glory/
Cheers on the cool demos, I think it could be the start of a great resource for elementary school teachers introducing machines. I know this sort of thing would have been great when I was in grade 3.
Torque is effective due to the mass of the lever having a force applied to it, right? Is the length of the lever being used as a stand-in for the mass being affected (a longer lever would necessarily have more mass)? If the lever had no mass, would there be no torque? If the lever did not have a uniform mass distribution, would the difference in applied torque differ based on where on the lever you applied the force (is the derivative of torque with respect to mass not constant for a non-uniform mass distribution)?
Here is how Wikipedia defines the torque caused by a force acting on an object with a rotation axis: Torque is the product of the magnitude of the force and the perpendicular distance of the line of action of force from the axis of rotation.
If you apply the same force using a longer lever then the end of the lever moves further (it follows a bigger circle) so you are applying the same force over a bigger distance.
Yes, that's right.
> Then, why does applying the force on a longer portion of the lever create more torque?
Most of the answers to this question reduce, upon examination, to "that's how we define torque". We define the torque of 100 newtons at a lever distance of one meter as the product of 100 newtons and a meter, which we can call 100 newton-meters, which is equal to 1000 newtons at a lever distance of 0.1 meters.
But that doesn't really answer the question, which becomes, why is torque defined in this way an interesting thing to think about? And the answer is that if the lever is a rigid body free to rotate around a fulcrum, then 100 newtons at one meter in one direction will make it start to rotate, while 1000 newtons at 0.1 meters in the opposite direction will precisely cancel that "moment", as we call it, and there will be no tendency to start rotating. It's about what forces are needed to cancel each other.
Well, but, why should that be? Why does it take exactly 1000 newtons and not, say, 316.2 newtons? And I don't think I have a really good answer for that question. In the case of an elastic solid body it falls out of Hooke's law and the geometry of the situation, which you can reduce to two long, skinny triangles sharing a common side bisected by the fulcrum. But it seems to be much more general than that.
> I had thought it was because there is more mass acting on the point of rotation (longer lever = more mass).
Nope. You can try using a pair of scissors or a folding ladder as a lever, or pull in different directions on the end of a fixed-geometry lever. The lever's mass doesn't change, but the leverage certainly does.
Recall that work is force over distance. The mechanical system relates the input and output distances by a scalar coefficient. Since the working distances are related by a ratio, the working forces are related by the reciprocal of that ratio.
You can find the lever and fulcrum ratio with simple geometry. The input and output lever segments are radii, and the travel is distance along two arcs. Since the arc length is directly proportional to radius, the ratio of lever radii translates directly to the same ratio of arc lengths, and the reciprocal ratio is the force multiplier. Your 10:1 lever sweeps 10:1 arc lengths and balances with 1:10 opposing forces.
Maybe you can derive it from some kind of generalization of Hooke’s Law to cover nonlinear stress–strain relationships, elastic hysteresis, anisotropy, viscoelastic behavior, and so on, but it's not obvious to me what that would be. Also, I feel like the concept of angular moments acting to produce angular acceleration is simpler and more general than all that stuff, but I'm not sure if conservation of energy and geometry alone are sufficient to derive it.
Torque is nothing more than "spinny" force. For example, sometimes you will see the term "generalized force" to mean both force and torque, because it doesn't really matter in some contexts. For example, if I have a robot arm that has some linear joints (like that of a 3D printer) and rotational joints (like that of an arm), you can talk about the generalized forces of each joint. Some of those generalized forces are linear (and people call that "force"), and some of them are rotational (and people call that "torque").
They are exactly analogous to (linear) velocity and _angular_ velocity.
When you talk about force _generating_ a torque, the only thing I can understand is how the linear velocity at a point on a disk (say you blow across its surface) _generates_ an angular velocity.
Of course, to create rigid objects, practically speaking they need to be made of something that will have mass. So the rigidity and the mass are related in a very loose sense. In any case, from a Newtonian physics perspective, you'll see none of those terms in there - neither a "rigidity" nor a mass. The torque is simply the length of the wrench multiplied by the magnitude of the force.
In a more detailed analysis, you might consider the flexure of the wrench by analyzing the stress and strain inside the wrench. That would no longer treat the wrench as a perfect idealized body that is completely rigid, but rather a body that can stretch based on the internal compressive or tensile forces that arise inside of it. Sometimes we don't think of metals as being stretchy, but with enough force, they're not so different from a rubber band.
With all that said, once you consider the _dynamics_ of the situation - how the forces applied give rise to motion - then mass does come into play. If you apply torque to a wheel, that will cause an angular acceleration proportional to the mass of the wheel. If you were using a wrench to spin a gear, then the mass of the gear decides how fast it will start to spin. Also, the mass of the wrench matters here, since presumably it will be spinning too: some of your effort has to go into angularly rotating the wrench. So it would have a "parasitic" effect on how fast you could get your gear spinning.
So a heavy wrench is helpful when pushing down, while loosening a rusty nut. But a light carbon fibre wrench would be better when pulling up.
How much torque gravity adds or subtracts in that case is also dependent on the distribution of mass along the length of the lever.
And to add to the fun, the mass of the leaver does add momentum into the equation, which comes into play as extra work required when changing speed of the rotation (e.g. starting, stopping the turn). And how much momentum also depends on the distribution of mass along the length of the lever.
https://www.youtube.com/watch?v=yYAw79386WI&t=209
And it's from 1937! We have so many video editing and effects tools today, but sometimes simpler is best.
> /* Dear explorer, this code works, but is by no means of high quality. Once a post is written I don't go back to the source code again and the formatting, robustness, DRYness and abstraction choices reflect that. */
https://ciechanow.ski/js/gears.js
And of course the logical next step: https://anderspitman.net/19/#netcatable
https://en.wikipedia.org/wiki/Gear#Helical