I am trying to implement **[this neat animation](http://codepen.io/tholman/full/qCnfB)**:

```
// Drawing with text. Ported from Generative Design book - http://www.generative-gestaltung.de - Original licence: http://www.apache.org/licenses/LICENSE-2.0

// Application variables
var position = {x: 0, y: window.innerHeight/2};
var counter = 0;
var minFontSize = 14;
var angleDistortion = 0;
var letters = "En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que viv\xEDa un hidalgo de los de lanza en astillero, adarga antigua, roc\xEDn flaco y galgo corredor. Una olla de algo m\xE1s vaca que carnero, salpic\xF3n las m\xE1s noches, duelos y quebrantos los s\xE1bados, lentejas los viernes, alg\xFAn palomino de a\xF1adidura los domingos, consum\xEDan las tres partes de su hacienda.";

// Drawing variables
var canvas;
var context;
var mouse = {x: 0, y: 0, down: false}

function init() {
  canvas = document.getElementById( 'canvas' );
  context = canvas.getContext( '2d' );
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  canvas.addEventListener('mousemove', mouseMove, false);
  canvas.addEventListener('mousedown', mouseDown, false);
  canvas.addEventListener('mouseup',   mouseUp,   false);
  canvas.addEventListener('mouseout',  mouseUp,  false);  
  canvas.addEventListener('dblclick', doubleClick, false);

  window.onresize = function(event) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
}

function mouseMove ( event ){
  mouse.x = event.pageX;
  mouse.y = event.pageY;
  draw();
}

function draw() {
 if ( mouse.down ) {
    var d = distance( position, mouse );
    var fontSize = minFontSize + d/1;
    var letter = letters[counter];
    var stepSize = textWidth( letter, fontSize );

    if (d > stepSize) {
      var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x);

      context.font = fontSize + "px garamond-premier-pro";

      context.save();
      context.translate( position.x, position.y);
      context.rotate( angle );
      context.fillText(letter,0,0);
      context.restore();

      counter++;
      if (counter > letters.length-1) {
        counter = 0;
      }

    //console.log (position.x + Math.cos( angle ) * stepSize)
      position.x = position.x + Math.cos(angle) * stepSize;
      position.y = position.y + Math.sin(angle) * stepSize;

      }
  }     
}

function distance( pt, pt2 ){

  var xs = 0;
  var ys = 0;

  xs = pt2.x - pt.x;
  xs = xs * xs;

  ys = pt2.y - pt.y;
  ys = ys * ys;

  return Math.sqrt( xs + ys );
}

function mouseDown( event ){
  mouse.down = true;
  position.x = event.pageX;
  position.y = event.pageY;

  document.getElementById('info').style.display = 'none';
}

function mouseUp( event ){
    mouse.down = false;
}

function doubleClick( event ) {
  canvas.width = canvas.width; 
}

function textWidth( string, size ) {
  context.font = size + "px garamond-premier-pro";

  if ( context.fillText ) {
    return context.measureText( string ).width;
  } else if ( context.mozDrawText) {
    return context.mozMeasureText( string );
  }

 };

init();

```

But instead of having the user click and drag to draw things on the canvas, it would be great if this could happen either automatically creating random lines with text, or even better, just by moving the mouse around the canvas (without actually clicking to produce the text animation paths). A touch / mobile friendly solution would also be preferable.

Any help would be much appreciated. Many thanks!