Live data from Hacker News

High school physics course notes, with JavaScript simulations

landgreen.github.io

51–60 of 66 posts

Re: High school physics course notes, with JavaScript simulations

#51
post #14

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

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.

Re: High school physics course notes, with JavaScript simulations

#56

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.

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.

Re: High school physics course notes, with JavaScript simulations

#57
> 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

Re: High school physics course notes, with JavaScript simulations

#58

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. Here's what I came up with: http://electrons.surge.sh • (Small Improve…

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.

Re: High school physics course notes, with JavaScript simulations

#59

> 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 tot…

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:

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

Re: High school physics course notes, with JavaScript simulations

#60

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.
Post reply on HN