Skip to content

Instantly share code, notes, and snippets.

@sxywu
Last active January 17, 2016 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sxywu/ab9b6a6e3a73cc5f8b37 to your computer and use it in GitHub Desktop.
Save sxywu/ab9b6a6e3a73cc5f8b37 to your computer and use it in GitHub Desktop.
Art in Words, Experiment #1
<!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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment