The assignment was to design a typeface based on the meaning of a word.

” Pick a word and make a typeface around it. The important thing is that you draw the letters using some kind of rule-based logic. Your goal is to convince that you can make a typeface that is better constructed in code than in Illustrator.”

The word I picked was COLOR as I really enjoy it and the previous assignment thinking about the color-wheel.

Screen Shot 2016-03-02 at 10.17.51 AM

I wanted to make all the letters out of circles and have the color affected by the angles of the circles.

Personally I like things that have some organic feel to them, so I played with a little bit of randomness to create more of that.

color wheel typeface

var r = new Rune({
container: “#canvas”,
width: 1100,
height: 2000,
debug: true
});
function drawCircle(pathX, pathY, startAngle, stopAngle, radius) {
for(var i = 0; i < 32; i++) {

var myLine = r.path(pathX + Rune.random(-6, 6), pathY + Rune.random(-6, 6))

.fill(false)
.strokeWidth(1)
.stroke(‘hsv’, startAngle + (i*((stopAngle-startAngle)/32)), 100, 100);

for(var angle = startAngle; angle <= stopAngle; angle += 5) {
var x = Math.cos(Rune.radians(angle)) * radius;
var y = Math.sin(Rune.radians(angle)) * radius;
if(angle == startAngle) {
myLine.moveTo(x, y)
} else {
myLine.lineTo(x, y);
}
}

radius -= 0.5;
}
}

//Draw A
drawCircle(200, 200, 30, 330, 50)
drawCircle(315, 200, 135, 212, 90)

//Draw B
drawCircle(370, 200, 0, 360, 50)
drawCircle(530, 200, 165, 220, 220)

// Draw C
drawCircle(510, 200, 30, 330, 50)

//Draw D
drawCircle(640, 200, 30, 330, 50)
drawCircle(885, 200, 165, 215, 220)

// Draw E
drawCircle(190, 405, 30, 140, 60)
drawCircle(200, 450, 40, 350, 50)

// Draw F
drawCircle(510, 450, 160, 230, 200)
drawCircle(360, 480, 210, 310, 60)

//Draw G
drawCircle(510, 450, 30, 340, 50)
drawCircle(400, 440, -10, 80, 160)

//Draw H
drawCircle(880, 445, 165, 215, 220)
drawCircle(640, 460, 130, 310, 50)

//Draw i
drawCircle(435, 725, 165, 185, 250)
drawCircle(200, 670, 0, 360, 5)

//Draw j
drawCircle(180, 700, 0, 70, 165)
drawCircle(340, 670, 10, 360, 5)

//Draw K
drawCircle(680, 750, 165, 200, 220)
drawCircle(570, 720, 90, 170, 90)
drawCircle(475, 700, -10, 80, 60)

//Draw l
drawCircle(790, 700, 140, 210, 165)

//Draw m
drawCircle(170, 1010, 140, 400, 50)
drawCircle(230, 1010, 140, 400, 50)

// Draw n
drawCircle(370, 1010, 140, 400, 50)

//Draw o
drawCircle(510, 1010, 0, 360, 50)

//Draw P
drawCircle(670, 1010, 0, 360, 50)
drawCircle(760, 1030, 140, 210, 150)

//Draw q
drawCircle(100, 1270, -20, 40, 150)
drawCircle(200, 1250, 0, 360, 50)

//Draw r
drawCircle(360, 1250, 140, 315, 50)

//Draw s
drawCircle(500, 1230, 140, 320, 30)
drawCircle(490, 1265, -100, 140, 30)

//Draw t
drawCircle(620, 1300, 260, 300, 100)
drawCircle(850, 1230, 165, 200, 220)



//Draw u
drawCircle(200, 1510, -40, 220, 50)

//Draw v
drawCircle(530, 1460, 155, 175, 220)
drawCircle(155, 1480, 0, 20, 220)

//Draw w
drawCircle(470, 1510, -20, 210, 50)
drawCircle(530, 1510, -30, 200, 50)

//Draw x
drawCircle(840, 1420, 140, 165, 220)
drawCircle(465, 1420, 15, 40, 220)

//Draw y
drawCircle(200, 1720, 40, 220, 50)
drawCircle(80, 1700, 0, 70, 165)

//Draw z
drawCircle(330, 1780, 240, 290, 100)
drawCircle(340, 1680, 60, 110, 100)
drawCircle(150, 1640, 15, 40, 220)
r.draw();