Art in Words, Experiment #1 by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//underscorejs.org/underscore-min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <canvas id='canvas'></canvas>
  <script>
    var string = "azev";
    var alphabet = {
      a: [0, 4], b: [1, 4], c: [2, 4], d: [3, 4], e: [4, 4],
      f: [0, 3], g: [1, 3], h: [2, 3], i: [3, 3], j: [4, 3], k: [4, 3],
      l: [0, 2], m: [1, 2], n: [2, 2], o: [3, 2], p: [4, 2],
      q: [0, 1], r: [1, 1], s: [2, 1], t: [3, 1], u: [4, 1],
      v: [0, 0], w: [1, 0], x: [2, 0], y: [3, 0], z: [4, 0]
    };
    var width = 800;
    var height = 800;
    var length = 50;
    // colors taken from visualcinnamon's original pi art post
    var colors = ['#F3C844', '#F1B34B', '#EC6959', '#DD406E', '#C24488',
                  '#A562A7', '#7B7EBF', '#4EA1B0', '#50BE8D', '#9ECA7D'];
    
    var canvas = document.getElementById('canvas'); 
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    
    var x = width / 2;
    var y = height / 2;
    var l1 = string[0].toLowerCase();
    var l2;
    for (i = 1; i < string.length; i += 1) {
      l2 = string[i].toLowerCase();
      if (alphabet[l2]) {
        
        var xDist = alphabet[l2][0] - alphabet[l1][0];
        var yDist = alphabet[l2][1] - alphabet[l1][1];
        
        console.log(l1, l2, xDist, yDist, x, y)
        if (!xDist && !yDist) continue;
                
				ctx.beginPath();
        ctx.moveTo(x, y);
        
        var radian = Math.atan(yDist/xDist);
        x += length * Math.cos(radian);
        y += length * Math.sin(radian);
        console.log(radian, x, y)

        ctx.strokeStyle = '#50BE8D';
        ctx.lineWidth = 2;
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.closePath();
        
        // at the end, switch the letters for the next iteration
        l1 = l2;
      }
    }

  </script>
</body>