1. Ribbon Spread
HTML5
Canvas
❤
Artwork
@ivoryworks
2012/03/03 gunma.web #8

2. @ivoryworks
--- Side-Day ---
C
Java
--- Side-Night ---
PHP
JavaScript
Python
and
HTML/CSS

3. 今回は

4. HTML5
<canvas>

5. <canvas>
❤
JavaScript

6. 何かと話題の
canvasだけど
何ができるの？

7. まる
ctx.beginPath();
ctx.arc(x, y, rad, sAngle, eAngle, anticlockwise);
ctx.stroke();

8. すごい！

9. しかく
ctx.beginPath();
ctx.strokeRect(x, y, width, height);

10. 断然すごい！

11. せん
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.stroke();

12. <canvas>
無限の可能性を秘めている

13. ❤

14. Q.これなに？

15. Rolling shutter
１フレームの画素毎の蓄積インターバルが、ずれてい
るために発生している。
http://www.vectoresgratis.com/fiat-500/

16. よしこれやろう

17. HTML5
<video>
❤
<canvas>

18. 仕様書
再生しながら
<video>
ちょっとずつ
<canvas>
出す

19. Ribbon Spread

20. Ribbon Spread

21. Ribbon Spread

22. Ribbon Spread

23. 素材はスーパースローがいい

24. 回転は意外なビジュアルを生む

25. demo

27. まとめ
●
<canvas>いいね！
●
定点撮影がいいね！
●
スーパースローいいね！
●
回転いいね！
●
動いているものだけが歪む
●
プログラムより素材探すほうが時間掛かった
●
さあJavaScript書いて描こうぜ！
http://www.flickr.com/photos/free-photos/3661193438/

28. Ribbon Spread
❤♠♦♣