Please use a browser that supports "canvas"

TetraKaleida is built around my own initial learning of WebGL. I've always enjoyed writing graphics animations that have a minimal and invisible keyboard-only control interface. In the past I've been stuck doing animations using .exe's on a local machine, which can't easily be shared with anyone. But now with WebGL, I can share with the world, and the animation quality is far better than native API's I've used.

Some keys are toggles, and others are control verniers, so you need to hold them down for big adjustments. Remember, you can press F11 to go full screen.

This animation is based on defining exactly one equilateral triangle, and then scaling, rotating about its own center, moving it out, and revolving around the origin. These are all simple operations, but when applied to many copied triangles arrayed around a circle, amazing things happen. The imagery can resemble jellyfish, solar eclipses, spinning galaxies, intricate moire patterns, breaking waves, and stroboscopic effects. Try the presets, and also try toggling into "Ferris Wheel mode" which locks down a triangle vertex while letting the figure revolve around it. In this mode it is usually best to recenter by pressing 'c', otherwise the figure might go offscreen for a while. The chrome browser extension Open-as-Popup works very nicely with these animations.

In the below, uppercase/lowercase pairs serve to increase/decrease the associated parameter.

                
    ,        -- Slow down the animation
    .        -- Speed up the animation
    <ctrl>,  -- Restore default animation speed
    <space>  -- Pause animation
    b        -- Cycle background color
    T/t      -- Adjust triangle count
    Z/z      -- Adjust zoom level
    <ctrl>z  -- Restore default zoom
    <Arrows> -- Move around
    c        -- Recenter
    v        -- Toggle vertex markers
    m        -- Toggle main wheel spin. Shift-M will launch a 2x2 page
    s        -- Toggle triangle automatic self-rotation
    g        -- Toggle triangle size change animation
    a        -- Toggle translation away from center. Shift-A for tube
    x        -- Toggle 3d rotation around x and y axes
    d        -- Restore to default start-up state
    E/e      -- Adjust triangle self-rotation speed
    R/r      -- Adjust triangle self-rotation angle
    F        -- Toggle Ferris Wheel mode
    P/p      -- Adjust frame-drop probability
                   Fun if you want to see some old-school
                   animation stuttering
    K/k      -- Adjust frames per second for old-school look
    F11      -- Go full screen!
    0-9      -- Load preset. Be sure to try Ferris and non-Ferris on each one
    <esc>    -- Close this panel                                              
    <PgDn>   -- Next page
                

            

TetraKaleida also offers some fun with color selection and running with shaded, filled triangles. The foreground color selection mode works with unfilled triangles, while the background color selection mode works by modifying the blue background which can be reached via the 'b' key. Using filled triangles and adjusting the background can yield some pretty stunning animations.

Filled triangles are also good for enjoying stroboscopic effects via spinning the figure faster and faster.

To first experience filled triangles, start with preset 2 in Ferris Wheel mode (which is what TetraKaleida starts up with). Press 'v' to turn off vertices. Press 'w' to switch to color gradient mode, then press 'D' to switch to filled triangles. After this, press 't' to bring down the triangle count to something nice looking, then experiment with 'l', 'y' and 'Y' to change the border mode and vertex colors. Then press 'b' to bring up the blue background and adjust the hue, saturation, and lightness to make things really pop.

But don't give short shrift to densely packed, unfilled, monochrome triangles; those animations look quite different but are still very cool!

A final trick, courtesy of the browser: Using Ctrl-Mousewheel or Ctrl-minus to set the zoom level to 50% can yield more finely drawn lines at the expense of increasing the load on the GPU. This is because the browser will have the GPU draw each frame twice as large (4 times the pixels) and will then resample the frame back down to size. WebGL does not easily give the ability to alter line weights, but this can be a decent workaround.

                
    f        -- Toggle fixed pixel dimensions vs full page
    n        -- For fixed dimension down-sample to half size
    w        -- Toggle foreground between monochrome and color gradient
    D        -- Toggle between filled and unfilled traingles
    Alt-D    -- Turn on demo mode
    <esc>    -- Exit demo mode if help not visible
    Alt-P    -- Pause demo progression
    Alt-p    -- Resume demo progression
    l        -- Cycle border mode for filled triangles
    i        -- For less jittery strobe effect, toggle assumed vs measured frame time
    y        -- Toggle red component of second vertex in color gradient mode.
    Y        -- Toggle green component of second vertex in color gradient mode.
    +.-      -- Adjust last selected hue/saturation/luminosity value
    Alt-b    -- Set to adjust backgound color
    Alt-o    -- Set to adjust foreground color (if in unfilled monochrome mode)
    Alt-h,H  -- Adjust hue
    Alt-s,S  -- Adjust saturation
    Alt-l,L  -- Adjust lightness
    <esc>    -- Close this panel
    <PgUp>   -- Previous page