I just completed my two year project to build an online website to pair with my 11th grade physics classes.
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.
In the Electrical Potential lesson, you have a super cool Scalar Field simulation. I noticed you were doing some tricks to get it to render quickly, like rendering at a lower resolution while animating. I do a lot of HTML canvas work, so I figured I'd take a crack at implementing something like it, to see if I could improve the render performance.
• (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.
I just want to say comments like these make me very happy. It really captures a kind of 'hacker spirit' that I try to be part of (and not just when it comes to programming). Thanks!
thanks! This is great! I'm going to work on implementing these changes. The context.getImageData() might enable me to improve some other simulations as well.
> I've got some free time this summer so let me know if you have any advice about what else to add.
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.
Thats an interesting point. I think high school physics teachers are split on units. I'm willing to change teams. The argument for just showing units at the end is that students who are just starting to master algebra have trouble with the extra symbols.
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.
With conflicting objectives, it might be worth providing multiple versions. A version optimized for "the students' bottleneck on their upcoming high-stakes exam is arithmetic, not physics". A version emphasizing units - without which numbers are nonsensical - and deemphasizing numbers, down to dimensional analysis. A version emphasizing the equation's parts, and story, to provide a qualitative feel for the phenomenon.
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?
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.
These are really great—going to share the Waves page on @cookingwthsound. One thing I REALLY have been wanting to see, and maybe something you can try, is coupling the interactive visualization with the equation that generates it, and ideally showing the values plugged into that equation and make those values editable. Something to think about!
The sine wave simulation is my poor attempt at letting the students discover the equations. My hope is that they will discover the wave equation and the inverse relationship between period and frequency.
I had outlandishly good access to a solid physics curriculum in high school, because (a) I had a teacher who cared deeply about his students and (b) I attended a new and well-funded charter school that had funds to throw at materials.
For all that, our books were still, well, books: dry, static, and squinty-small print.
This approach to teacher's notes (and the obvious care that went into it) would've changed my approach to physics, to learning, and to life, and that's coming from an uncommonly well-resourced background. I can't even imagine what this would do for students with less access.
I love this kind of stuff - just a bit envious I didn't have these kind of resources when I was a kid! Javascript simulations are easy to write, and help enormously with visualization. Here's a special relativity simulation I wrote in ~100 lines of code:
Congratulations! These look really nice! If you wanted to make them more useful and inspiring to other teachers, it would be wonderful to pair them with an essay on how they can be used effectively in class. Do students use them to explore, like microworlds? Do you use them during classroom discussions, for posing hypotheses or consolidating several ideas? Do students use them as evidence during debates? Do students get used to having these and think up others they wish they had? Do they become touchstones students use to remind themselves of something they previously understood?
Supporting social practices is an important part of a technology--folks without experience in schools (or informal learning environments) sometimes picture educational technologies being used alone in a vacuum, the mooc high school. I'm pretty hopeful about using educational technologies to help teachers grow their teaching practices.
I love the circuit simulation that shows the field. I've never seen that before and its super neat. Its cool how you can see what looks like random electrons occasionally flying off and coming in from outside the 'wires' as well.
> Light seems like it slows down in dense media, but light always propagates at the fastest possible speed for any physical thing. The slow down occurs when the light gets briefly absorbed by atoms and then re-emitted in the same direction.
Someone please correct me if I'm wrong, but Sixty Symbols (aka nottinghamscience) did at least 2 videos on this where they expressly pointed out that this is widely pushed but totally incorrect? https://www.youtube.com/watch?v=CiHN0ZWE5bk
thanks!
When I wrote that line I think I went with the top result of physics.stackexchange, but I'm now convinced that the phase velocity explanation is better.
Here is my updated text:
<p>While individual waves of light always move at c, light seems to move slower in dense media. This is because as the light wave propagates through a medium it produces ripples that <a href="https://www.youtube.com/watch?v=CiHN0ZWE5bk">interfere</a> in a way that slows the group velocity of the light wave.</p>
> We are going to focus on the two types of dry friction: static and kinetic.
"dry friction"... As I remember the story, someone was trying to replicate Arrheniius's equipment and results. The results weren't matching, until they took the equipment to an outreach event... where it got covered with greasy fingerprints. Turns out, it's Arrheniius's law of large objects sliding on pig fat.
We actually now understand friction down to nanoscale. Something that wasn't true a decade ago. But I've never seen introductory friction content written to reflect that.
Somewhat simple stuff like this is the real reason classrooms should have computers or iPads - not the wasteful resources and clunky programs they actually get used for
Perhaps take screenshots of your favorite interactives, and add them to a new "Highlights" section of the landing page? To guard against people stopping by, randomly sampling a few pages, and by chance, missing interesting ones, and thus giving up and going away, not knowing they missed fun things. Sort of like the extract of figures from a paper - something to trigger "oh, that looks interesting".
I also built a CMS-type environment for this type of content. It combines content creation with an IDE to create simulations that can be combined with the content.
There are folks interested in creating these types of interactive learning environments, unfortunately it doesn't appear that there is much demand for it by schools.
If I had to do it over a Jupyter notebook might be cool. It would make the graphing and equations easier. Although, I think simulation graphics are probably better with html5 js canvas.
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.