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