フォントをつくるサイトで使ったcanvasとsvgの話 @html5飯
DESCRIPTION
HTML5飯 in 横浜 at 2014.6.21 にてお話させていただいた際の資料です。 FONTA(http://fonta.kayac.com)の制作に 用いた技術を中心に解説しています。TRANSCRIPT
フォントをつくるサイトで使ったCanvas と SVG の話
面白法人カヤック 本多大和
本多大和ほんだ やまと
面白法人カヤック所属
@calmbooks
自己紹介
http://calmbooks.tumblr.com
最近つくったもの
声の実体化体験http://vimeo.com/96663702
本日紹介するもの
FONTA一人一文字 みんなでつくるフォント
http://fonta.kayac.com
1 人 1 文字でつくるフォントのサイト。
サイト上でユーザに 1 人 1 文字書いてもらい、約 7000 人で 1 つのフォントをつくります。
つくったフォントはダウンロードできたり、Web フォントとして使えたりします。
フォントを「書く」機能!
FONTA でのフォントは、ベクター形式を採用。書くときにパスの単純化を行なっています。
1 .三角関数、内積 .. 数学的な計算で、筆跡の周りの点を算出
2 . Paper.js を使い、パスの単純化(点の数を減らす、ベジェ曲線にする)
3 . SVG の Path 形式で文字列をサーバに POST
http://paperjs.org/
M212.3 673.7C200.9 678.4 186.8 679.1 178.0 ….. C464.3 891.6 461.3 879.6 461.3 879.6z
SVG の Path 形式
参考: 10 分でわかる SVG 基礎編 - @ IThttp://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
開始点の移動 → m M直線 → l L水平線 → h H垂直線 → v V二次ベジェ曲線 → q Q…
フォントを「つくる」仕組み!
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs><font id="FONTA" horiz-adv-x="1024" vert-adv-y="1024" >
…. (略)
<glyph unicode="Ī" d="M0 0" /><glyph unicode="Ī" d="M0 0" />
…. (略)
</font></defs></svg>
SVG フォントのフォーマット
参考: svg 要素の基本的な使い方まとめhttp://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_16.htm
文字の数の分、繰り返されている
フォントの形式
.ttf 、 .otf一般的なフォントの形式
.eotIE 用にあると良い
.woffWeb ページ用につくられた形式 軽量
.svg字形が SVG でつくられた形式
SVG フォントから、 .ttf .eot .woff への変換
http://fontforge.org/ja/
< サーバサイドのお仕事です。
@Konboi
フォントを「見る」演出!
ユーザーの筆跡を再現するアニメーション
[ { weight : "S", // 線の太さ( S / M / L ) path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] // 筆跡ポイントの配列 }, { weight : "M", // 線の太さ( S / M / L ) path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] // 筆跡ポイントの配列 } …]
筆跡アニメーションのデータ形式
1 .投稿のときに、筆跡データを POST
2. サーバで保持しておいたデータを取得
3 .筆跡データを元に筆跡アニメーションを再現
ご清聴ありがとうございました。