CSS-3 for Physics Demos : radial and linear planewave animations to potentially demonstrate the Huygens–Fresnel principle

This code-example demonstrates the usage of CSS3 gradient-functions as for css-backgrounds; converting DOM Nodelists to Arrays via Array.slice, which is often used for copying Arrays rather than generating references to Arrays, and using HTML5's querySelector to select Elements starting with a specific attribute-value.

Introduction:
A fascinating aspect students encounter in their physics curriculum, is the Huygens–Fresnel principle, named after Dutch physicist Christiaan Huygens, who was recently honored in the form of a name-bearing space probe . The principle states that every unobstructed point on a wavefront acts, at a given instant, as a source of outgoing secondary spherical waves [1], and became paramount for the understanding of wave-particle duality (See: double-slit experiment).

A plane wave is a constant-frequency wave whose wavefronts (surfaces of constant phase) are infinite parallel planes of constant peak-to-peak amplitude (Wikipedia).

Refrection in the manner of Huygens. Arne Nordmann, CC-BY-SA 3

Version 3 of CSS or cascading stylesheets, provides repeated radial and linear gradient backgrounds, thus virtually lending itself to be put into a physics demo. The ease of the implementation is yet another reminder for the end of the era of Java applets.

Demo:
Required for the Demo to work, is a WebKit based browser such as Google Chrome or Safari, althought the Demo could be adapted to run in other Browsers as well. At the moment, most CSS3 properties are vendor-prefixed, as they can be considered work-in-progress, yet prefixing hinders automatic cross-browser adoption of CSS3-properties in web-pages.

Additionally we use the CSS 3 transition property for animation of the background-position:
.cssstyle {
    transition: background-position 5s linear;
    -webkit-transition: background-position 5s linear;
}

The css-transition property takes as first argument a comma-separated list of properties to be animated, or 'all' to animate all changing properties, as second argument the duration and lastly the transition-time slope such as linear or ease-in-out with ease-in and ease-out times specifiable.

As input elements, sliders are used, with min, max, step and initial value declared - as shown in the Code excerpt (gist). The onchange property is set to change the backgroundPositionX of the corresponding figure, with the animation then performed by the Browser.

background-image: -webkit-repeating-linear-gradient(left, cyan 10%, blue 30%);

background-image: -webkit-repeating-radial-gradient(0% 50%, circle, cyan, blue 3%);

granularity (step):
planewave (pos):
spherical wave (pos):

Code:
Provided below is the code for the input elements as well as the CSS rules, and the short JavaScript which serves to demonstrate the 'arrayification' of Nodelists and applying Array and DOM functions on them. Additionally, all DOM Elements are selected of which the first (the step-slider is ignored i.e. sliced out).
The gradient, and Code examples should be pretty self-explanatory, however feel free to ask or make suggestions.


With a bit of effort put into this Demo, one could potentially overlay the synchronized animations on a static image, demonstrating how an incoming planar wave hits a slit and becomes the source for a new outgoing radial wave-front. Any physics teachers interested?

[1] Atmospheric Optics, Les Cowley - DOR: 28.05.2012
[-] See WebKit-Blog Entry for CSS3 Gradients