Renovated The Web Site

The original web presence was put up to give me a little bit to show around while I was at SXSW. Recently, I had the opportunity to take a bit of time and implement some upgrades. It includes a much more modern style overall, some additional exposition about the importance of visualization in learning mathematics and the sciences, and perhaps the most significant upgrade, a catalog of prepared visualizations. Each visualization is contained in a small web page hosted on GitHub, and is suitable for inclusion in content as an iframe. Each one has a built in help, and if the browser does not support WebGL, the visualization loads a PNG image of the visualization with a yellow warning icon indicating that WebGL is not active on the browser. The warning icon links to instructions for enabling WebGL on your system. This makes it very easy to get started and determine that visualization really does have an impact on your learners.

A Gaussian surface within a charged distribution.

The addition of charged distributions and Gaussian surfaces provides for much more sophisticated visualizations. This example includes a a charged sphere with inner radius a=20 and outer radius b=50. At the center of the charged sphere is a Gaussian surface of radius 10. Zoom in on the image to see that the electric field does not penetrate the Gaussian surface, and that the Gaussian surface is completely within the hollow center of the sphere.

Working through the details to get a reasonable appearance for nested translucent objects without complex rendering was definitely challenging.

SXSW Feedback

I was able put together a proof of concept and show it off to a lot of people at SXSW, and the feedback was overwhelmingly positive. Based on that feedback I have expanded the documentation, made the project easier to use and more modular, and put it out as an open source project on GitHub.

Next I will be adding the ability to specify charge densities, such as a charged sphere, line, plane or ring, and also the ability to automatically generate the field lines without needing to specify a starting point to trace the field lines.

I also spent some time covering some fascinating material on the interplay between neuroscience and learning. One of the talks drew an interesting car analogy. To paraphrase, pedagogy and psychology are like learning to drive fast, where neuroscience is like opening the hood and understand how the car achieves it's speed. This would undoubtedly make you a better driver.

Some of the more interesting items included

• The Neuroscience of Language and Learning
• Neuroscience, Games & Learning
• Neuroscience, the Science of Learning, Educational Reform
• Educational Neuroscience: How Education Shapes Brain Development

Well, after digesting all that I am going to work out the code to display a charge distribution on a web page – that means a volumetric rendering that will function well on highly limited devices such as a cell phone.

Illustrating the concept

This interactive rendering is generated by
HTML5 JavaScript and WebGL.

A quick internet search for electric field will show a large number images. Most of which are similar to the initial appearance of the example on this page. However, the electric field is an intrinsically three dimensional phenomenon. Making the leap from the standard two dimensional representation to a three dimensional understanding is difficult at best. So start with a clear three dimensional representation. With OpenGL ES on Android or iOS, or with WebGL as done here, a much better representation can be presented. This image rotates and zooms in response to many of the standard browser actions such as a mouse or a finger drag. Though the touch interaction has only been tested under Chrome and Firefox on Android. This provides a differing three dimensional view that shifts in direct response to the user or learner action. This allows a very fast comprehension of the three dimensional nature of the field. This is an early proof of concept to show the general class of examples that can be generated, and with the right choices in the software design, it is easy to modify the presented example and incorporate it into existing content.