Ribbon Spread

HTML5Canvas

❤Artwork

@ivoryworks2012/03/03 gunma.web #8

@ivoryworks

--- Side-Day ---C

Java

--- Side-Night ---PHP

JavaScriptPython

andHTML/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 shutter

１フレームの画素毎の蓄積インターバルが、ずれているために発生している。

http://www.vectoresgratis.com/fiat-500/

よしこれやろう

HTML5<video>

❤<canvas>

再生しながら<video>

ちょっとずつ<canvas>

出す

仕様書

Ribbon Spread

Ribbon Spread

Ribbon Spread

Ribbon Spread

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

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

demo

●<canvas>いいね！●定点撮影がいいね！●スーパースローいいね！●回転いいね！●動いているものだけが歪む●プログラムより素材探すほうが時間掛かった●さあJavaScript書いて描こうぜ！

まとめ

http://www.flickr.com/photos/free-photos/3661193438/

Ribbon Spread❤♠♦♣