three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。 (自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)ikeryou.github.ioまず、planeなmeshを敷き詰めたscene…
xxxxxxxx.descente.comDESCENTE(デサント) スペシャルコンテンツの背景演出部分のWebGLプログラミングを担当いたしました。 再形成を繰り返し、日が経ち成長していいくにつれ、ユーザーの期待感を高められるような力強いビジュアルを目指しました。 スマホは…
schl.co.jpクリエイティブチームschoolのwebサイトのフロントエンドを担当いたしました。 TOPのWebGLを使った動画加工エフェクトやメニューの展開時アニメーション、トランジションエフェクトなど細かい部分にこだわりました。ぜひご覧ください。
いわゆるvideo要素のcurrentTime進めてキャプチャしてcanvasへ表示するやつ。 もっと手間かかるかと思ってたけど、THREE.VideoTextureのおかげでだいぶスマートに実装できた。 使用頻度高そうなので忘れないようにメモる。・デモはこちら https://ikeryou.gi…
参考サイトを忘れないようにメモシェーダー 定義済値 http://qiita.com/edo_m18/items/591925d7fc960d843afaカスタムイメージエフェクト http://www.f-sp.com/entry/2015/08/11/185815スクリプトリファレンス https://docs.unity3d.com/jp/540/ScriptReferen…
ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、 それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、 即「できます！」って答えたんだけど、 このプロパティまったく効かへん。。。 なに設定してもず…
DESCENTE(デサント)2017SS特設サイトTOPページのフロントエンドを担当いたしました。
ikeryou.jp僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表…
そろそろ.jadeじゃなくて.pngに切り替えようと思ったけど.pngだとSyntaxThemeがjadeじゃなくてplanetextになってしまうので、pngファイルをjadeファイルとして認識させる。 file-types packageをインストール Preferences/Open Config Folder → .atom/config…
iPhoneでマナーモードにしてても音がなってしまう現象。 調べたのでわすれないようにメモ。qiita.comwebaudioAPI単体なら問題ないが、HTMLAudioを一回でも使うとマナーモード無視で音が鳴ってしまう。今回はhowler.js使っててこのライブラリの場合どうやらラ…
mozztokyo.jp MOZZ TOKYOコーポレートサイトのフロントエンドを担当いたしました。 レスポンシブでありながらスマートフォンとPCで別々のUIを実装したTOPページ(もちろんワンソース)や、使いやすさと見た目のバランスを考慮した最低限の演出など、シンプルで…
cwallet.catalinacoupons.jp クーポンアプリ「カタリナ」のWebサイトのフロントエンドを担当いたしました。 カタリナの雰囲気に合うような心地よいアニメーションをPCとスマートフォン両方で体験できるように実装しました。 ぜひ両端末でご覧ください。
日本科学未来館で展示されています、地球ディスプレイ「ジオ・コスモス」の新コンテンツである「The Searching Planet 検索する地球」のWebGLプログラミングを担当いたしました。 www.miraikan.jst.go.jp www.miraikan.jst.go.jp 日本科学未来館の地球ディス…
三角関数 2点間の距離 2点間の角度 イージングアウト バネ 3Dでのピクセル等倍
野田洋次郎(RADWIMPS)ソロ・プロジェクト illion の新曲「Water lily」特設サイトにて、ビジュアライザ部分のプログラミングを担当致しました。 実装にはWebGLを使用しており、PC、スマートフォン向けにそれぞれ最適化してあります。 ぜひスマホでご覧くださ…
こちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、 通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可)この部分を動的に変えて欲しい、っていう機会は滅…
みなさん歩きスマホしてますか？危険と分かっていてもwebサイトが気になっちゃって、ついついしちゃいますよね！これはとてもよくないです そこで今回、絶対に歩きスマホできないサイトになるjavascriptライブラリを作りました github.com このjsを読み込ん…
GIFアニメではないけどアニメーションネタGIFアニメもそうだけど、どうやら自分は原始的手法を用いたアニメーションが好きみたい。アニメーションになったときの驚きや、いい意味でのチープさが個人的にツボ今回はストライプをスライドさせるとアニメーショ…
webの技術でGIFアニメを作ってみる！今回はnode.js+socket.ioを使って、複数のウィンドウ、複数のPC(スマフォ)で表示されるアニメーションをコントロールした。 コントロールしたアニメーションはコチラ http://ikeryou.jp/test/gif2/1/ 何かに追っかけられ…
最近GIFアニメを作ってみたいと思っていて、けど僕はAFとかで素敵な映像は作れないので、普段からなじみのある素材(web)と技術(HTML&Javascript)で作ってみる事にした。 なんか派手なのを作りたい！ とりあえずこいつをベースにする。なんかウネウネさせてみ…
