Ribbon Spread       HTML5       Canvas          ❤      Artwork    @ivoryworks2012/03/03 gunma.web #8
@ivoryworks--- Side-Day ---       C      Java--- Side-Night ---     PHP  JavaScript    Python     and  HTML/CSS
今回は
HTML5<canvas>
<canvas>   ❤JavaScript
何かと話題のcanvasだけど何ができるの?
まるctx.beginPath();ctx.arc(x, y, rad, sAngle, eAngle, anticlockwise);ctx.stroke();
すごい!
しかくctx.beginPath();ctx.strokeRect(x, y, width, height);
断然すごい!
せんctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.lineTo(x3, y3);ctx.stroke();
<canvas>無限の可能性を秘めている
❤
Q.これなに?
Rolling shutter1フレームの画素毎の蓄積インターバルが、ずれているために発生している。                  http://www.vectoresgratis.com/fiat-500/
よしこれやろう
HTML5 <video>    ❤<canvas>
仕様書再生しながら <video>ちょっとずつ <canvas>   出す
Ribbon Spread
Ribbon Spread
Ribbon Spread
Ribbon Spread
素材はスーパースローがいい
回転は意外なビジュアルを生む
demo
まとめ● <canvas>いいね!● 定点撮影がいいね!● スーパースローいいね!● 回転いいね!● 動いているものだけが歪む● プログラムより素材探すほうが時間掛かった● さあJavaScript書いて描こうぜ!         http:/...
Ribbon Spread   ❤♠♦♣
Gunma.web#8 ribbon spread
Upcoming SlideShare
Loading in …5
×

Gunma.web#8 ribbon spread

1,109 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,109
On SlideShare
0
From Embeds
0
Number of Embeds
417
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gunma.web#8 ribbon spread

  1. 1. Ribbon Spread HTML5 Canvas ❤ Artwork @ivoryworks2012/03/03 gunma.web #8
  2. 2. @ivoryworks--- Side-Day --- C Java--- Side-Night --- PHP JavaScript Python and HTML/CSS
  3. 3. 今回は
  4. 4. HTML5<canvas>
  5. 5. <canvas> ❤JavaScript
  6. 6. 何かと話題のcanvasだけど何ができるの?
  7. 7. まるctx.beginPath();ctx.arc(x, y, rad, sAngle, eAngle, anticlockwise);ctx.stroke();
  8. 8. すごい!
  9. 9. しかくctx.beginPath();ctx.strokeRect(x, y, width, height);
  10. 10. 断然すごい!
  11. 11. せんctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.lineTo(x3, y3);ctx.stroke();
  12. 12. <canvas>無限の可能性を秘めている
  13. 13.
  14. 14. Q.これなに?
  15. 15. Rolling shutter1フレームの画素毎の蓄積インターバルが、ずれているために発生している。 http://www.vectoresgratis.com/fiat-500/
  16. 16. よしこれやろう
  17. 17. HTML5 <video> ❤<canvas>
  18. 18. 仕様書再生しながら <video>ちょっとずつ <canvas> 出す
  19. 19. Ribbon Spread
  20. 20. Ribbon Spread
  21. 21. Ribbon Spread
  22. 22. Ribbon Spread
  23. 23. 素材はスーパースローがいい
  24. 24. 回転は意外なビジュアルを生む
  25. 25. demo
  26. 26. まとめ● <canvas>いいね!● 定点撮影がいいね!● スーパースローいいね!● 回転いいね!● 動いているものだけが歪む● プログラムより素材探すほうが時間掛かった● さあJavaScript書いて描こうぜ! http://www.flickr.com/photos/free-photos/3661193438/
  27. 27. Ribbon Spread ❤♠♦♣

×