11 ms·

High school physics course notes, with JavaScript simulations

446 points by lilgreenland 8y ago

lilgreenland 8y ago
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.
- andai 8y ago
  Hey, these are great. Must have taken a lot of work. Nice job! 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).
  - dwringer 8y ago
    I have always thought an ideal physics curriculum at such a level would actually involve the students creating software packages to accomplish something like this. I think these are great illustrations of the principles, but there's value in making the students visualize the problem independently IMHO. Then again, I hear the argument "not everyone needs to learn programming" too often to think my idea has a realistic chance of traction any time soon.
  - lilgreenland 8y ago
    MOSTLY, thats great! sigh
- sguav 8y ago
  I find this a fantastic work! 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.
  - lilgreenland 8y ago
    Any time you have to explain some to someone else you can't lie to your self about how much you understand. Also, I think the simulations can help one understand some of the emergent properties that come from physics principles.
- robviren 8y ago
  Awesome! It is nice for those who need some visual guidance. I think this would make a wonderful resource.
- japhyr 8y ago
  What did you use to make the static diagrams, for example on the Newton's Laws page? https://landgreen.github.io/physics/notes/force/1-intro/index.html https://landgreen.github.io/physics/notes/force/1-intro/inde...
  - rbonvall 8y ago
    The svg is simple and the coordinates are round numbers, so they were probably hand-written: <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>
    - lilgreenland 8y ago
      Yep I enjoy hand writing the SVG, it makes recycling sections a bit easier.
- danesparza 8y ago
  I'm curious about the Javascript simulations -- which lessons contains those simulations? (I couldn't find any in the few lessons I looked at)
  - worldsayshi 8y ago
    There's a few nice simulations on momentum here: https://landgreen.github.io/physics/notes/momentum/1-intro/index.html https://landgreen.github.io/physics/notes/momentum/1-intro/i... And here on gravity: https://landgreen.github.io/physics/notes/gravity/gravitation/index.html https://landgreen.github.io/physics/notes/gravity/gravitatio...
  - akavel 8y ago
    e.g.: https://landgreen.github.io/physics/notes/circuits/Ohm's%20Law/index.html#charge7 https://landgreen.github.io/physics/notes/circuits/Ohm's%20L...
  - lilgreenland 8y ago
    I like this one on wave propagation. https://landgreen.github.io/physics/notes/waves/waves/index.html https://landgreen.github.io/physics/notes/waves/waves/index.... (it's at the very bottom)
- dhimes 8y ago
  I just sent it to my kid. You put a lot of good effort into that.
- bakkoting 8y ago
  > 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/index.html 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.
  - lilgreenland 8y ago
    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.
    - mncharity 8y ago
      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=torque 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?
- virgil_disgr4ce 8y ago
  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!
  - lilgreenland 8y ago
    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.
- spiralganglion 8y ago
  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. Here's what I came up with: http://electrons.surge.sh 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/8b21d1cf8c80e16c1d47b3a00a43e30ed6267513/source/script/particles.coffee#L40-L51 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/8b21d1cf8c80e16c1d47b3a00a43e30ed6267513/source/script/particles.coffee#L68-L96 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.
  - lilgreenland 8y ago
    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.
  - mercer 8y ago
    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!
kajecounterhack 8y ago
The practice question generation is awesome. Wish I had this in high school.
anonnel 8y ago
Very cool. Where’s the patreon link!
Edmond 8y ago
nice...have you considered PHET syms (https://phet.colorado.edu/ https://phet.colorado.edu/)? 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. Here is a static and old version of the software: http://schoolnotez.com/ http://schoolnotez.com/ 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.
- psalminen 8y ago
  Was going to mention PHET myself. These simulations were amazing when I was studying physics at CU.
furgooswft13 8y ago
As far as physics simulations go, this is my favorite treasure trove: http://www.falstad.com/mathphysics.html http://www.falstad.com/mathphysics.html Ripple Tank and Analog Circuit Simulator are my favs. I could play for days.
- virgil_disgr4ce 8y ago
  THIS THIS THIS!! This guy boggles my mind. I've used his simulations in every class I've taught, and my students are just as impressed as I am. I owe this guy about 1000 beers. Seriously, I would love to meet him so I can thank him personally.
Exuma 8y ago
Hmm.. I feel crazy but... is that how atom nucleus' work??? Why does the charge completely "exit" the atom? WTF?
- VectorLock 8y ago
  The charge creates a field.
- lilgreenland 8y ago
  My Coulomb's law simulation is classical only, no quantum physics. I hope it has some value in showing emergent phenomena. Electrons can just leave the atom, this is how static electricity works.
  - Exuma 8y ago
    Something so obvious I guess I never realized. So when electricity moves, the nucleus stays still, and the electrons are what move?
    - lilgreenland 8y ago
      Hey my sims worked! You got it, although I'd add in that only the free electrons can move around like the ones in the outer valence of metals.
      - Exuma 8y ago
        Damn, well... thats really wild. I feel stupid now, but yes, that absolutely made it click.
Arubis 8y ago
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.
- Waterluvian 8y ago
  Had the same thing at my public school. The physics teacher was a physics prof who wanted to do something more chill during the back 9 of his life.
pickle-ts 8y ago
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: http://pickle-ts.com/relativity http://pickle-ts.com/relativity Source code you can play with live: https://stackblitz.com/edit/pickle-samples?file=app%2Frelativity.ts https://stackblitz.com/edit/pickle-samples?file=app%2Frelati...
- lilgreenland 8y ago
  Cool!
emumoo 8y ago
Here's another great resource for physics simulations http://galileoandeinstein.physics.virginia.edu/more_stuff/Applets/home.html http://galileoandeinstein.physics.virginia.edu/more_stuff/Ap...
VectorLock 8y ago
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.
- lilgreenland 8y ago
  That's my favorite simulation so far, but I also like the one on wave propagation.
cproctor 8y ago
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.
- lilgreenland 8y ago
  Good idea, I'll add in a section for teachers over the summer. I might link to some of the labs and worksheets.
hliyan 8y ago
The best online physics resource I ever used was from over fifteen years ago. Looking at it now, I feel that the old hypercard format has aged well: http://hyperphysics.phy-astr.gsu.edu/hbase/hframe.html http://hyperphysics.phy-astr.gsu.edu/hbase/hframe.html
bluedino 8y ago
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
MaxLeiter 8y ago
I just took AP Physics and this looks like it would have been very useful. Will pass on to my teacher. Nice work!
reuseman 8y ago
Quality.
- lilgreenland 8y ago
  :)
mncharity 8y ago
> 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.
- lilgreenland 8y ago
  I'm not that knowledgeable on friction. Do you think the friction equations are OK for high school level physics? Would you say that this is accurate? "Kinetic friction is primarily caused by chemical bonding between surfaces; however, in many cases roughness is dominant."
  - mncharity 8y ago
    My very fuzzy impression is HS friction is more roughness and debris than adhesion?[1] [1] "Bridging from Atomic Forces to Macroscopic Friction" http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/ http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/ . And the preceding "Contact of rough solids" http://online.kitp.ucsb.edu/online/suspensions18/robbins/ http://online.kitp.ucsb.edu/online/suspensions18/robbins/ . Robbins also has an old 2004 AJP article "Understanding and illustrating the atomic origins of friction" http://dx.doi.org/10.1119/1.1715107 http://dx.doi.org/10.1119/1.1715107 , but I've not skimmed it, nor explored its cited-bys for something similar but more recent.
- mncharity 8y ago
  ERRATA: Not Arrheniius: Amontons' laws; da Vinci's experiment.[1] [1] Slides 2 and 3 of http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/ http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/
mncharity 8y ago
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".
- lilgreenland 8y ago
  That's a good idea. My current solution is to just try and make every page awesome, but I know some sections have more love than others.
partycoder 8y ago
Looks didactic and polished. Congratulations. Now, I think this should be a "Show HN" entry. If I was to implement something like this I would try to make use of Jupyter or R with Shiny.
- lilgreenland 8y ago
  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.
misrab 8y ago
what's used to render the latex? I used to use mathjax but I'm not sure if that's the case here
- misrab 8y ago
  nvm looked through the source, appears to be https://github.com/Khan/KaTeX https://github.com/Khan/KaTeX
- lilgreenland 8y ago
  I tried MathJax, but it added a half second render time, Katex loaded instantly.
s0ulphire 8y ago
> 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 https://www.youtube.com/watch?v=CiHN0ZWE5bk
- lilgreenland 8y ago
  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> https://www.youtube.com/watch?v=CiHN0ZWE5bk">interfere</a> in a way that slows the group velocity of the light wave.</p>

446 points by lilgreenland 8y ago

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.

andai 8y ago
Hey, these are great. Must have taken a lot of work. Nice job! 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).
- dwringer 8y ago
  I have always thought an ideal physics curriculum at such a level would actually involve the students creating software packages to accomplish something like this. I think these are great illustrations of the principles, but there's value in making the students visualize the problem independently IMHO. Then again, I hear the argument "not everyone needs to learn programming" too often to think my idea has a realistic chance of traction any time soon.
- lilgreenland 8y ago
  MOSTLY, thats great! sigh
sguav 8y ago
I find this a fantastic work! 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.
- lilgreenland 8y ago
  Any time you have to explain some to someone else you can't lie to your self about how much you understand. Also, I think the simulations can help one understand some of the emergent properties that come from physics principles.
robviren 8y ago
Awesome! It is nice for those who need some visual guidance. I think this would make a wonderful resource.
japhyr 8y ago
What did you use to make the static diagrams, for example on the Newton's Laws page? https://landgreen.github.io/physics/notes/force/1-intro/index.html https://landgreen.github.io/physics/notes/force/1-intro/inde...
- rbonvall 8y ago
  The svg is simple and the coordinates are round numbers, so they were probably hand-written: <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>
  - lilgreenland 8y ago
    Yep I enjoy hand writing the SVG, it makes recycling sections a bit easier.
danesparza 8y ago
I'm curious about the Javascript simulations -- which lessons contains those simulations? (I couldn't find any in the few lessons I looked at)
- worldsayshi 8y ago
  There's a few nice simulations on momentum here: https://landgreen.github.io/physics/notes/momentum/1-intro/index.html https://landgreen.github.io/physics/notes/momentum/1-intro/i... And here on gravity: https://landgreen.github.io/physics/notes/gravity/gravitation/index.html https://landgreen.github.io/physics/notes/gravity/gravitatio...
- akavel 8y ago
  e.g.: https://landgreen.github.io/physics/notes/circuits/Ohm's%20Law/index.html#charge7 https://landgreen.github.io/physics/notes/circuits/Ohm's%20L...
- lilgreenland 8y ago
  I like this one on wave propagation. https://landgreen.github.io/physics/notes/waves/waves/index.html https://landgreen.github.io/physics/notes/waves/waves/index.... (it's at the very bottom)
dhimes 8y ago
I just sent it to my kid. You put a lot of good effort into that.
bakkoting 8y ago
> 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/index.html 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.
- lilgreenland 8y ago
  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.
  - mncharity 8y ago
    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=torque 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?
virgil_disgr4ce 8y ago
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!
- lilgreenland 8y ago
  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.
spiralganglion 8y ago
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. Here's what I came up with: http://electrons.surge.sh 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/8b21d1cf8c80e16c1d47b3a00a43e30ed6267513/source/script/particles.coffee#L40-L51 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/8b21d1cf8c80e16c1d47b3a00a43e30ed6267513/source/script/particles.coffee#L68-L96 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.
- lilgreenland 8y ago
  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.
- mercer 8y ago
  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!

kajecounterhack 8y ago

The practice question generation is awesome. Wish I had this in high school.

anonnel 8y ago

Very cool. Where’s the patreon link!

Edmond 8y ago

nice...have you considered PHET syms (https://phet.colorado.edu/ https://phet.colorado.edu/)? 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. Here is a static and old version of the software: http://schoolnotez.com/ http://schoolnotez.com/ 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.

psalminen 8y ago
Was going to mention PHET myself. These simulations were amazing when I was studying physics at CU.

furgooswft13 8y ago

As far as physics simulations go, this is my favorite treasure trove: http://www.falstad.com/mathphysics.html http://www.falstad.com/mathphysics.html Ripple Tank and Analog Circuit Simulator are my favs. I could play for days.

virgil_disgr4ce 8y ago
THIS THIS THIS!! This guy boggles my mind. I've used his simulations in every class I've taught, and my students are just as impressed as I am. I owe this guy about 1000 beers. Seriously, I would love to meet him so I can thank him personally.

Exuma 8y ago

Hmm.. I feel crazy but... is that how atom nucleus' work??? Why does the charge completely "exit" the atom? WTF?

VectorLock 8y ago
The charge creates a field.
lilgreenland 8y ago
My Coulomb's law simulation is classical only, no quantum physics. I hope it has some value in showing emergent phenomena. Electrons can just leave the atom, this is how static electricity works.
- Exuma 8y ago
  Something so obvious I guess I never realized. So when electricity moves, the nucleus stays still, and the electrons are what move?
  - lilgreenland 8y ago
    Hey my sims worked! You got it, although I'd add in that only the free electrons can move around like the ones in the outer valence of metals.
    - Exuma 8y ago
      Damn, well... thats really wild. I feel stupid now, but yes, that absolutely made it click.

Arubis 8y ago

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.

Waterluvian 8y ago
Had the same thing at my public school. The physics teacher was a physics prof who wanted to do something more chill during the back 9 of his life.

pickle-ts 8y ago

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: http://pickle-ts.com/relativity http://pickle-ts.com/relativity Source code you can play with live: https://stackblitz.com/edit/pickle-samples?file=app%2Frelativity.ts https://stackblitz.com/edit/pickle-samples?file=app%2Frelati...

lilgreenland 8y ago
Cool!

emumoo 8y ago

Here's another great resource for physics simulations http://galileoandeinstein.physics.virginia.edu/more_stuff/Applets/home.html http://galileoandeinstein.physics.virginia.edu/more_stuff/Ap...

VectorLock 8y ago

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.

lilgreenland 8y ago
That's my favorite simulation so far, but I also like the one on wave propagation.

cproctor 8y ago

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.

lilgreenland 8y ago
Good idea, I'll add in a section for teachers over the summer. I might link to some of the labs and worksheets.

hliyan 8y ago

The best online physics resource I ever used was from over fifteen years ago. Looking at it now, I feel that the old hypercard format has aged well: http://hyperphysics.phy-astr.gsu.edu/hbase/hframe.html http://hyperphysics.phy-astr.gsu.edu/hbase/hframe.html

bluedino 8y ago

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

MaxLeiter 8y ago

I just took AP Physics and this looks like it would have been very useful. Will pass on to my teacher. Nice work!

reuseman 8y ago

Quality.

lilgreenland 8y ago
:)

mncharity 8y ago

> 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.

lilgreenland 8y ago
I'm not that knowledgeable on friction. Do you think the friction equations are OK for high school level physics? Would you say that this is accurate? "Kinetic friction is primarily caused by chemical bonding between surfaces; however, in many cases roughness is dominant."
- mncharity 8y ago
  My very fuzzy impression is HS friction is more roughness and debris than adhesion?[1] [1] "Bridging from Atomic Forces to Macroscopic Friction" http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/ http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/ . And the preceding "Contact of rough solids" http://online.kitp.ucsb.edu/online/suspensions18/robbins/ http://online.kitp.ucsb.edu/online/suspensions18/robbins/ . Robbins also has an old 2004 AJP article "Understanding and illustrating the atomic origins of friction" http://dx.doi.org/10.1119/1.1715107 http://dx.doi.org/10.1119/1.1715107 , but I've not skimmed it, nor explored its cited-bys for something similar but more recent.
mncharity 8y ago
ERRATA: Not Arrheniius: Amontons' laws; da Vinci's experiment.[1] [1] Slides 2 and 3 of http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/ http://online.kitp.ucsb.edu/online/suspensions-c18/robbins/

mncharity 8y ago

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".

lilgreenland 8y ago
That's a good idea. My current solution is to just try and make every page awesome, but I know some sections have more love than others.

partycoder 8y ago

Looks didactic and polished. Congratulations. Now, I think this should be a "Show HN" entry. If I was to implement something like this I would try to make use of Jupyter or R with Shiny.

lilgreenland 8y ago
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.

misrab 8y ago

what's used to render the latex? I used to use mathjax but I'm not sure if that's the case here

misrab 8y ago
nvm looked through the source, appears to be https://github.com/Khan/KaTeX https://github.com/Khan/KaTeX
lilgreenland 8y ago
I tried MathJax, but it added a half second render time, Katex loaded instantly.

s0ulphire 8y ago

> 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 https://www.youtube.com/watch?v=CiHN0ZWE5bk

lilgreenland 8y ago
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> https://www.youtube.com/watch?v=CiHN0ZWE5bk">interfere</a> in a way that slows the group velocity of the light wave.</p>