High school physics course notes, with JavaScript simulations | Hacker News Reader

High school physics course notes, with JavaScript simulations

landgreen.github.io

446 pointslilgreenland65 comments

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.

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

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.

MOSTLY, thats great!

sigh

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.

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.

Awesome! It is nice for those who need some visual guidance. I think this would make a wonderful resource.

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

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>

Yep I enjoy hand writing the SVG, it makes recycling sections a bit easier.

I'm curious about the Javascript simulations -- which lessons contains those simulations? (I couldn't find any in the few lessons I looked at)

There's a few nice simulations on momentum here: https://landgreen.github.io/physics/notes/momentum/1-intro/i...

And here on gravity: https://landgreen.github.io/physics/notes/gravity/gravitatio...

e.g.: https://landgreen.github.io/physics/notes/circuits/Ohm's%20L...

I like this one on wave propagation. https://landgreen.github.io/physics/notes/waves/waves/index....

(it's at the very bottom)

I just sent it to my kid. You put a lot of good effort into that.

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

This Cal Tech style sounds neat. Let me know if you know more, I couldn't find anything on google.

HA, I'm so inconsistent with my spaces on units. I'll add that to my summer todo list.

Poor understanding of / fluency with units is definitely one of the things that sets people back hardest when they get to higher levels.

I say start throwing units in as early as possible (grade school?).

I'm adding this here as a part of my growing todo list:

Add in more explicit unit analysis problems to each unit. Add in unit tracking to more solutions.

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.

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

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

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

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.

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.

As far as physics simulations go, this is my favorite treasure trove:

http://www.falstad.com/mathphysics.html

Ripple Tank and Analog Circuit Simulator are my favs. I could play for days.

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.

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

Source code you can play with live: https://stackblitz.com/edit/pickle-samples?file=app%2Frelati...

Cool!

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

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.

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

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.

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

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

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

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/ . And the preceding "Contact of rough solids" 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 , but I've not skimmed it, nor explored its cited-bys for something similar but more recent.

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/

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

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.

Very cool. Where’s the patreon link!

Here's another great resource for physics simulations

http://galileoandeinstein.physics.virginia.edu/more_stuff/Ap...

nice...have you considered PHET syms (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/

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.

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

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

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.

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.

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

The charge creates a field.

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.

Something so obvious I guess I never realized. So when electricity moves, the nucleus stays still, and the electrons are what move?

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.

Damn, well... thats really wild. I feel stupid now, but yes, that absolutely made it click.

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

what's used to render the latex?

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

nvm looked through the source, appears to be https://github.com/Khan/KaTeX

I tried MathJax, but it added a half second render time, Katex loaded instantly.

Quality.

Reply on news.ycombinator.com