Built with blockbuilder.org
forked from sxywu's block: Art in Pi, Experiment #1
forked from sxywu's block: Art in Pi, Experiment #2
Built with blockbuilder.org
forked from sxywu's block: Art in Pi, Experiment #1
forked from sxywu's block: Art in Pi, Experiment #2
<!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> |