I hope it can be a resource for those learning and teaching physics. I've got some free time this summer so let me know if you have any advice about what else to add.
Here's what I came up with: http://electrons.surge.sh
• (Small Improvement) When updating the particle positions (your physicsAll function), you can skip a bunch of loop iterations and redundant distance math by using j > i rather than i != j, and updating both particles together: https://github.com/ivanreese/electrons/blob/8b21d1cf8c80e16c...
• (Big Improvement) Rather than using fillRect to draw each square of the scalarField, manipulate the canvas pixel data directly. Use context.getImageData() to get a ByteArray, then loop through it and update the color in each pixel. Much faster than using fills when you want to color every pixel in the canvas independently: https://github.com/ivanreese/electrons/blob/8b21d1cf8c80e16c...
• (Aesthetic Improvement) I also render at a lower resolution, and I use the CSS blur filter to smooth out the result: canvas { filter: blur(4px) }
I hope some of these suggestions are helpful. None of them require switching to a new rendering technology (like WebGL), and it should be pretty easy to slot them in to your existing code. Feel free to drop me a line if you'd like help implementing anything.
Last but not least, thanks for creating this fantastic educational resource! I work for a learning media company that produces some electrical content, and I shared your work with my teammates as an example of what we could aspire to. It was a real hit.
If you're taking nitpicks: some of your example calculations don't track units, like the ones on https://landgreen.github.io/physics/notes/momentum/1-intro/i.... I think they should: encouraging students to always track units in intermediate steps is really helpful for getting them to think about what they're doing and catch errors early, in my experience.
I think I should add units for more of the LaTex example problems. Maybe I could color code the units so it doesn't get confusing.
Back when everyone was on desktop, I liked using mouseover popups. VR/AR is going to be great fun. :)
There's a style of research talk, which I think of as a "Cal Tech style", merely because the speaker has been from there the few times I've seen this. It's putting up a colorized equation, and spending the entire talk walking through its expressions. If someone knows of a good example on youtube, it might be one way to see the many layers of narrative present in an equation.
I had an "F = m a" interactive like this "A feel for: torque"[1], but I don't think it ended up online. That's a step beyond scaffolding a qualitative understanding of the phenomenon - developing a rough quantitative feel for it. [1] http://www.clarifyscience.info/part/ZoomB?v=A&p=CK6Ji&m=torq...
FWIW, scientific practice is to have a space between number and units. If you'd like them close for pedagogy, perhaps \thinspace?
HA, I'm so inconsistent with my spaces on units. I'll add that to my summer todo list.
I say start throwing units in as early as possible (grade school?).
Add in more explicit unit analysis problems to each unit. Add in unit tracking to more solutions.
I created my own simulations when studying these topics, and sure it helped much (though they were not as tidy and organized like these). Not sure if it was the effort to make the simulation that made things clearer, but I believe this can be indeed a wonderful resource.
Also, I think the simulations can help one understand some of the emergent properties that come from physics principles.
I wanted to do the same thing for a long time, but never got around to it, so seeing this made me very happy.
It mostly works on my phone, too (layout).
sigh
And here on gravity: https://landgreen.github.io/physics/notes/gravity/gravitatio...
(it's at the very bottom)
https://landgreen.github.io/physics/notes/force/1-intro/inde...
<svg class='svgDiagram center' width="300" height="120" viewBox="-15 0 285 120">
<defs>
<g id="vector">
<line x1="0" y1="0" x2="0" y2="45" style="stroke:#000;stroke-width:2" />
<polygon points="0,50 -5,42 5,42" style="fill:#000;" />
</g>
</defs>
<g transform='translate(100 20) rotate(0)'>
<rect x="0" y="0" width="80" height="80" stroke='black' stroke-width='2' fill="#fff" />
<text x="40" y="40" fill="black" text-anchor="middle" alignment-baseline="middle" font-size='28px'>m</text>
</g>
<use xlink:href="#vector" transform='translate(100 60) rotate(90)' />
<text x="40" y="60" font-size='25px' text-anchor="middle" alignment-baseline="middle">F</text>
<use xlink:href="#vector" transform='translate(180 80) rotate(-90)' />
<text x="240" y="80" font-size='25px' text-anchor="middle" alignment-baseline="middle">F</text>
<use xlink:href="#vector" transform='translate(180 40) rotate(-90)' />
<text x="240" y="40" font-size='25px' text-anchor="middle" alignment-baseline="middle">F</text>
</svg>