Mike Croucher’s slinky thing in pure JavaScript. On a device with a keyboard, try selecting one of the sliders and holding down a cursor key to see the patterns evolve continuously.

Complete code for this example:

<div class="mathcell" style="height: 7in">
<script>

var parent = document.currentScript.parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [ { type: 'slider', min: 1, max: 80, default: 1,
                                  name: 'e', label: 'e' },
                { type: 'slider', min: 1, max: 80, default: 80,
                                  name: 'f', label: 'f' },
                { type: 'slider', min: 1, max: 80, default: 1,
                                  name: 'g', label: 'g' },
                { type: 'slider', min: 1, max: 80, default: 1,
                                  name: 'h', label: 'h' },
                { type: 'slider', min: 1, max: 80, default: 80,
                                  name: 'i', label: 'i' } ] );

parent.update = function( id ) {

  var e = getVariable( id, 'e' );
  var f = getVariable( id, 'f' );
  var g = getVariable( id, 'g' );
  var h = getVariable( id, 'h' );
  var i = getVariable( id, 'i' );

  function x( t ) {
    return Math.cos(e*t) - Math.cos(f*t) * Math.sin(g*t);
  }

  function y( t ) {
    return 2 * Math.sin(h*t) - Math.sin(i*t);
  }

  var p = parametric( t => [ x(t), y(t) ], [0, 2*Math.PI, 2000] );

  var data = [ p ];

  var config = { type: 'svg', axes: false };

  evaluate( id, data, config );

}

parent.update( id );

</script>
</div>

Examples Page