Please use a browser that supports "canvas"

This is 3D graphics on the Web, using the WebGL framework.

If your graphics processor is recent enough and your web browser recent enough you should see the animation running smoothly. The rendering of the image for each frame of the animation is computed on your device, not on the Web server, and it enjoys the benefits of the 3D rendering acceleration provided by your device's graphics processing unit.

From this Web page, your browser downloads and runs my JavaScript program, which algorithmically generates just once the structures representing the (tessellated) geometries of the two depicted surfaces in standard position, copies that data to the GPU, and compiles the appropriate shader programs to the GPU. Then, for each frame of the animation, it recomputes the rotation transformations and asks the shaders to do their work. You can see my JavaScript by asking your browser to show page source. The shader programs are embedded in the JavaScript as string literals.

The scene shows an endless snake with shiny red skin wrapped around and slithering along a star spangled donut, which is itself in smooth but irregular 3D rotational motion, its successive orientations not having any repeating pattern, perhaps in a futile attempt to shake off the snake (topologically impossible).

In the terminology of geometry, the "donut" is a "torus". The endless red snake is an instance of a surface for which I have coined the term "helitoroid", after getting negative results on searches for prior use. I like to use the helitoroid in synthetic geometry examples, in part because in constructing it I use the Frenet frame, a fundamental technique from 3D differential geometry, one of my favorite math topics, one of the most aesthically pleasing. Here's my description of the mathematics of the constructions of the two surfaces. That page uses MathML for the mathematical type-setting and MathJax, a JavaScript library that aims to render MathML or LaTex on all modern browsers. An alternative view of the math is in the pdf version .

The defining parameters of the torus geometry are two radii. The defining parameters of the helitoroid geometry are three radii and an integer, which I call the winding because it counts the number of times that the helitoroid wraps around its base circle. The depicted helitoroid has winding 9. In the tessellations of the two depicted surfaces there are 12000 triangles.

Highly experienced in computational geometry and 3D graphics, this page is my first, self-assigned, "Hello, World" exercise in learning to do it in WebGL

QuantComp Co. is a registered dba of Ronald Levine, PhD
(C) Ronald Levine, 2006, 2015