5 ms·

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

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!

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!