http://atnd.org/events/30569で発表したスライド（一部補足）

1. HTML5
Animation
Cohei Aoki
@coa00

2. About Me
• 音楽や映像を生成するAlgorithmのCodeを
書くのが好き。
• インタラクティブなアート好き。
• ROKUROの主催
http://www.rokuro.net

3. My GARAKUTA Works

4. My GARAKUTA Works
Faderの動きで音を演奏

5. My GARAKUTA Works
Faderの動きで音を演奏

6. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像

7. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像

8. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像
Ledの光を音に変換

9. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像
Ledの光を音に変換

10. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像
Ledの光を音に変換 時間で映像を歪める

11. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像
Ledの光を音に変換 時間で映像を歪める

12. 本日のお話
HTML5で強化された描画やアニメー
ションまわりのお話します！

13. HTML4までのアニメーション
• Flashやgifによるアニメーション
• JavaScriptによるCSSなどを制御
したアニメーション

14. HTML4のメディアファルのコントロール
• 独自にAPIを作成しない限りメディアファ
イルの制御はできない。
DOM/CSS Flash Image Sound
制御可能 制御できない 画像の加工が 音を鳴らすことが
できない できない
HTML(JS)

15. HTML5を使わないアニメーション
1.JavaScriptはシングルタスクであるため
タスクの状態によってスムーズに動かない
場合がある。→CSS3によるアニメーショ
ンやレンダリングの調整が必要。
2.プログラムによる複雑な描画ができない。
3.CPUのみで描画演算される。

16. HTML5対応による変化

17. HTML5対応による変化
• JavaScriptから直接メディアをコン
トロールができる。
• マルチデバイスを考慮した処理の最適化
が考慮された設計。
• GPUによる処理速度向上。
• 3D表現が可能

18. HTML5とメディアファイル
• これまでDOMやCSSの制御だけだったアニメー
ションが図形描画やメディアを使ったアニメー
ションを実現
DOM/CSS Canvas SVG audio
アニメーション
制御可能
の制御 画像の加工 音の制御
HTML(JS)

19. HTML5から追加されたアニメーション
要素

20. HTML5から追加されたアニメーション
要素
1.Canvas(2D)
2.SVG
3.WebGL
4.CSS3

21. Canvasの特徴
1. 外部データをもとに自由にRectangles,
Lines, Curves, Arcs, Complex
Shapes,Textの描画
2. 外部のJPEGs, GIFs, PNGs, and SVGsの
表示、加工
3. 複数のレイヤーによる重ね合わせによる表現が
可能

22. Canvasのアニメーションプロセス
1. Canvasの初期化
1. 初期画面の生成
2. レンダリング
1. 画面のクリア
2. 状態のアップデート
3. ビットマップの描画

23. Canvasの描画プロセス
GPUがサポートされている場合、GPUが使われるため高速
Canvas Memory
GPU
render Process
BitMap Shared
Memory
サポートされてない場合はブラウザのプロセスで処理される。
BitMap Shared
Memory Browser
render
Canvas Process
Memory

24. Canvasの描画を軽くするには？
1.描画生成をできるだけ一回で行う
2.レンダリング範囲を限定する

25. レンダリング範囲を限定する
描画範囲を限定するために動くタイミングが異なるもの
は別レイヤーにし、クリア範囲を小さくする。
<canvas id=“background” style="z-index: 0”></
canvas>
<canvas id=“foreground” style=“z-index: 1”></
canvas>
background
クリアする範囲をこの範囲に限定
foreground

26. 描画処理の回数を少なくする！
描画処理は一括で行うほうが負荷がかからない。
for (var i = 0; i < 100; i++) context.beginPath();
{ for (var i = 0; i < 100; i++) {
var p1 = p[i]; var p1 = p[i]; var p2 = p[i+1];
var p2 = p[i+1]; context.moveTo(p1.x, p1.y);
context.beginPath(); context.lineTo(p2.x, p2.y);
context.moveTo(p1.x, p1.y); }
context.lineTo(p2.x, p2.y); context.stroke();
context.stroke();
}

27. アニメーションの更新(これまで)
setInterVal,setTimeoutをつかって一定の速
度でレンダリング
1. バックグランドでも動いてしまう。
2. 止まっていたりゆっくり動くものに対しても
FPSが一定。
3. 処理がもたつつくと待ちタスクがたまってしま
う。

28. アニメーションの更新(今後)
requestAnimationFrameの導入
•レンダリング速度の最適化がされる
•処理待ちタスクがたまらない

29. SVG(Scalable Vector
Graphics)
1. ベクター形式で描画(Canvasはピクセル形式)
2. AIやFlashなどから書き出しが可能(Canvas
も可能になってきている。)
3. ベクターをXMLで出力
4. 画像が複雑になるとサイズがかなり大きくなっ
てしまう。

30. 例

31. WebGL
1. シェーダーHTML、DOM内に定義することが
可能。
2. できるだけシェーダで処理をさせるようにする
ことでGPUを最大活用することができる。
3. 同時に2万個以上のオブジェクトの描画可能
（環境依存）
4. iOS,Androidのブラウザは未サポート

32. 情報源
• http://www.html5rocks.com
• http://developer.apple.com/
library/safari/navigation/
• https://developer.mozilla.org/
ja/