Skip to content

Instantly share code, notes, and snippets.

@zeffii

zeffii/portfolio_typography.js

Created October 29, 2011 12:37
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 zeffii/1324398 to your computer and use it in GitHub Desktop.
Save zeffii/1324398 to your computer and use it in GitHub Desktop.
Download ZIP
some typographic approach, reminds me of CNC style G codes.
Raw
portfolio_typography.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stroke Bounds</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../lib/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
function setStrokeType(path){
// takes any given path and applies certain path attributes.
path.strokeWidth = 25;
path.miterLimit = 3;
path.strokeColor = 'black';
path.strokeCap = 'round';
path.strokeJoin = 'round';
return path;
}
function make_letter(letter, left){
/*
Certain letters require additional strokes, such as t,f and l, thus we
must instantiate a new path.
For example, T has a horizontal stroke in addition to the main stroke.
I has a dot, which also means another path.
Takes input: letter , what letter
Takes input: left, left alignment
*/
letterArray = "IFT";
var path = new Path();
if (letter == 'P'){
path.moveTo(left, 210);
path.lineTo(left, 90);
path.lineTo(left+35, 90);
path.arcTo([left+35,160]);
path.lineTo(left,160);
}
if (letter == 'O'){
path.moveTo(left, 210);
path.arcTo([left,150]);
path.arcTo([left,210]);
}
if (letter == 'R'){
path.moveTo(left-30, 210);
path.lineTo(left-30, 180);
var diff = 30 * (( Math.SQRT2) / 2 );
path.arcTo([left-diff, 180-diff], [left, 150]);
}
if (letter == 'T'){
path.moveTo(left, 115);
path.lineTo(left, 180);
var diff2 = 30 * (( Math.SQRT2) / 2 );
path.arcTo([left+(30-diff2), 180+diff2], [left+30, 210]);
}
if (letter == 'F'){
path.moveTo(left-30, 210);
path.lineTo(left-30, 120);
var diff = 30 * (( Math.SQRT2) / 2 );
path.arcTo([left-diff, 120-diff], [left, 90]);
path.lineTo(left+20, 90);
}
if (letter == 'L'){
path.moveTo(left, 210);
path.lineTo(left, 90);
}
if (letter == 'I'){
path.moveTo(left, 210);
path.lineTo(left, 150);
}
path = setStrokeType(path);
/*
letters with extra stroke/path information.
if I, F, T
*/
if (letterArray.indexOf(letter) != -1){
var path2 = new Path();
if (letter == 'I'){
path2.moveTo(left, 115);
path2.lineTo(left, 116);
}
if (letter == 'F'){
path2.moveTo(left-45, 150);
path2.lineTo(left, 150);
}
if (letter == 'T'){
path2.moveTo(left-15, 150);
path2.lineTo(left+30, 150);
}
path2 = setStrokeType(path2);
}
}
tupleArray = new Array(['P',20],['O', 140],['R', 235],['T', 280],['F', 385],
['O', 438],['L', 502],['I', 538],['O', 602]);
for (i=0; i < tupleArray.length; i++){
make_letter(tupleArray[i][0],tupleArray[i][1]);
// make_letter(*tupleArray[i]); // not sure how to pack variables in jscript.
}
// with regards to the for loop above, the make_letter function could accept
// objects instead of a predefined number of arguments.
// project.activeLayer.position = view.center;
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment