https://labs.cybozu.co.jp/blog/akky/tags/slitscan/ Recent content in Slitscan on akky@サイボウズラボ・ブログ Hugo ja Tue, 22 Jan 2013 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/ Tue, 22 Jan 2013 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/ <p>「スリットスキャン」とは、<a href="http://www.fabloid.jp/2012/11/21/surreal-video-shows/">こちらで解説されています</a>が、時間軸のある動画などを、フレームを動画上の場所ごとにずらすことで作られる特殊な映像効果、のようです。</p> <p>アナログの時代はカメラの前に置いたスリットを動かすことで、デジタルになってからは動画編集ソフトで、こういった効果をつけているそうです。</p> <p>プロが人の手で編集を加えれば、独特の不思議な映像はもちろんできるのですが、VimeoやYouTubeなどの動画サービスで再生している動画を、ブラウザ上でそのままスリットスキャンしてしまおう、というのがSha Hwangさんによる<a href="http://sketches.postarchitectural.com/slitscanner/">slitscanner.js</a>。HTML5のビデオプレイヤーで再生できる動画をスリットスキャンで一枚の画像にまとめてくれるライブラリ(とライブラリを使ったブックマークレット)です。</p> <p>上記ライブラリページのブックマークレットをブックマークしておいて、<a href="http://vimeo.com/">Vimeo</a>で適当な動画を開き、右下の&quot;Switch to HTML5 Player&quot;で(Flashプレイヤーではなく)HTML5プレイヤーを使うようにしてから、ブックマークレットを実行すると、動画の再生にあわせてスリットスキャンした画像が作られていきます。</p> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe src="https://player.vimeo.com/video/56902953?dnt=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allow="fullscreen"> </iframe> </div> <p>上の動画から作ってみたスリットスキャン画像がこれ。</p> <p><a href="http://developer.cybozu.co.jp/akky/2013/01/slitscanner-js/slitscanned-56902953/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscanned-56902953_hu_915496a98027eae3.webp 480w, https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscanned-56902953_hu_ec91a9353982f6be.webp 768w, https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscanned-56902953_hu_fb79c1291d177cd8.webp 861w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscanned-56902953.png" width="861" height="706" alt="slitscanned-56902953" loading="lazy" decoding="async"> </picture></a></p> <p>フレームを取り込む間隔はスライダーで調整できますので、多少は編集的なこともできるかと。</p> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe src="https://player.vimeo.com/video/57463725?dnt=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allow="fullscreen"> </iframe> </div> <p>もう一つためしてみました。</p> <p><a href="http://developer.cybozu.co.jp/akky/2013/01/slitscanner-js/slitscan-57463725/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscan-57463725_hu_b7bcd8d2d6d6b7f.webp 480w, https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscan-57463725_hu_2009f0517cb33a11.webp 768w, https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscan-57463725_hu_633e17df48776c2b.webp 876w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2013/01/slitscanner-js/slitscan-57463725.png" width="876" height="711" alt="slitscan-57463725" loading="lazy" decoding="async"> </picture></a></p> <p>動きの早い動画だと細切れになりすぎて、よくわからない画像ができてしまいますね。Vimeoだけじゃなく、HTML5プレイヤーを使っていればYouTubeなどでも使えるのですが、YouTubeの場合は広告がFlash Playerで再生されるので面倒なことがあるとか。</p> <p>うまくはまれば、長時間動画の雰囲気や盛り上がっているポイントを見つけるのに役立つかもしれません。</p> <p>ブラウザで再生されている動画を、手元で加工することで面白くしたり発見したり、ということも、いろいろ出てくるのかもしれないですね。</p> <p>via <a href="http://flowingdata.com/2013/01/21/slitscanning-online-videos/">Slitscanning online videos</a></p>