【仕事】illion "Water lily" Connected Jam Video

野田洋次郎(RADWIMPS)ソロ・プロジェクト illion の新曲「Water lily」特設サイトにて、ビジュアライザ部分のプログラミングを担当致しました。

実装にはWebGLを使用しており、PC、スマートフォン向けにそれぞれ最適化してあります。

ぜひスマホでご覧くださいませ。

waterlily.illion.website

 

/*

クレジット :

Client : 株式会社ワーナーミュージック・ジャパン
Production : dot by dot inc.
Artist : illion
Producer : 富永 勇亮
Creative Director : 谷口 恭介
Technical Director / Programmer : 衣袋 宏輝
Designer : 伊藤 太一
Programmer / Frontend Engineer : 池田 亮
System Engineer : イズカワ タカノブ
Assistant : 佐藤 志都穂
Assistant Producer : 福地 諒

バウンススクロールで背景色を変える

こちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、

通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可)
この部分を動的に変えて欲しい、っていう機会は滅多になく、まさか動的に変えられるとは思ってなかったのですが、やったら普通にできました。
一体いつ使うのかは不明ですが、一応こんな風に見えます。
バウンススクロールした距離によって黒から白にグラデーションさせています。

さらに、無理やりですが、この機能を使ったデモを作ってみました

※iOS8~ safari限定

MazeMazeColor

上下に別れた色(タップ&長押しで変更可)を混ぜた色をバウンススクロールで見えた部分に反映させ、さらにスクロールを続けると、例えば下にスクロールして、下部分の色が隠れていくにつれ、混ぜた色から下の色が引かれていくような見え方になっています。
毎フレームbodyのbackground-colorの値を変えているだけですが、githubにソースをアップしておきます。

github.com

敷居は高いですが(iPhoneのsafari(iOS8~)限定なので)、ここまで凝ることができれば、かなり意識の高いコンテンツを作れるのではないでしょうか!どうか試させてください!

絶対に歩きスマホできないサイトになるjavascriptライブラリ

みなさん歩きスマホしてますか?
危険と分かっていてもwebサイトが気になっちゃって、
ついついしちゃいますよね!
これはとてもよくないです

そこで今回、絶対に歩きスマホできないサイトになる
javascriptライブラリを作りました

github.com

このjsを読み込んで2行ほどjsを書くと、
自分自身の回転とwebサイトのスクロールが連動するようになります

指でのスクロールはできなくなりますので、
おのずと立ち止まって、くるくるすることでしか
サイトを閲覧できなくなります
(歩きスマホが不可能になります)

※実機デモ(iphoneのみ)

ikeryou.jp

座りながら普通にサイトが見れなくなるというデメリットもありますが、
スマホならではの一風変わったUIとして採用するのも面白いかもしれません

ぜひスマホで体験してみてください

STRIPE ANIMATION GENERATOR

GIFアニメではないけどアニメーションネタ
GIFアニメもそうだけど、どうやら自分は原始的手法を用いたアニメーションが好きみたい。アニメーションになったときの驚きや、いい意味でのチープさが個人的にツボ
今回はストライプをスライドさせるとアニメーションに見えるやつをジェネレートできるコンテンツを作ってみた

STRIPE ANIMATION GENERATOR

f:id:ikeryou:20160901234131j:plain

f:id:ikeryou:20160901234139j:plain

元画像とのギャップがやばい
正直元画像もかっこいい
元画像から推測できないアニメーションもよい
設定で2値化せずに作成もできるけど、やっぱ2値化したほうがきれいな感じがする

webの素材と技術でGIFアニメを作ってみる 2

webの技術でGIFアニメを作ってみる!
今回はnode.js+socket.ioを使って、複数のウィンドウ、複数のPC(スマフォ)で表示されるアニメーションをコントロールした。

コントロールしたアニメーションはコチラ

http://ikeryou.jp/test/gif2/1/

何かに追っかけられてる人!
こちらスマフォでも見せたかったのでHTML+CSS+Javascriptで作成。
CSS3のtransform:rotate()とかをごにょごにょした。

まずはこの人物が複数のウィンドウをまたいで駆け回るGIFアニメを作成。
node.js+socket.ioを使用し、FPS60(たぶん出てない!)で各ウィンドウに「アニメーションを一回更新せよ」みたいな内容でemit()していった。
それによってウィンドウをまたぐ瞬間とかもきれいにできたかと。

こちらがGIFアニメ化したもの。ウィンドウの配置でいくつか作ってみた。

f:id:ikeryou:20160901234451g:plain

f:id:ikeryou:20160901234627g:plain

f:id:ikeryou:20160901234628g:plain

f:id:ikeryou:20160901234632g:plain

最終的にGIFアニメになるとなんか楽しい!