プログラミング

株式会社ハロー ファーストビューアニメーション

www.hello.ai 株式会社ハロー様のコーポレートサイトが公開されました。 僕はファーストビューのWebGLアニメーションを担当しました。 ぜひPCとスマホの両端末でご覧ください。

interofficeコーポレートサイト モーション実装

www.interoffice.co.jpヨーロッパの高品質な家具の輸入販売およびスペースデザインまで一気通貫に手がけるインターオフィス様のコーポレートサイトがリニューアルされました。 僕はKV等のアニメーション実装と、一部コーディングを担当しました。 ぜひPCとス…

Otaku Coin Arcade Game

function draw() のアーティストとして、オタクコインさんとゲームができるNFT作りました。 リロードするたびに配色や背景のデザイン、ゲームの難易度が変わります。 otakucoin.on.fleek.co /* 企画 function draw() https://twitter.com/FunctionsNFT販売サ…

function draw() 出品

クリエイティブコーディングを用いた作品を多数出品されているfunction draw() というプロジェクトからお声がけいただき、僕の作品を数点NFTとして出品させていただきました。function draw() ↓https://opensea.io/collection/function-draw functions (@Fun…

法人化のお知らせ

devdev.jp2021年4月20日に法人化しました。 法人名はdevdev Inc.と名付けました。 (デヴデヴって読みます)デジタル領域という分野で、今まで以上にいいものを作り、今まで以上に業界に貢献できるよう精進して参ります。何かありましたらなんでもご相談くださ…

2021年 あけましておめでとうございます

ikeryou.jp2021年のあけましておめでとうコンテンツ作りました! PC、スマホでグリグリしてみてください!今年もよろしくお願いします!

第13回 インタラ会 資料

テーマは「GLSLを使ったマスク表現」 サンプルファイルはこちら↓↓ github.com サンプル1の解説 第13回インタラ会 サンプル1 2つのシーンを用意する マスク用のシーン↓ ベースとなるシーン↓ 合体↓ マスク用シーンの赤い部分(アルファが0じゃない部分)だけ表…

【仕事】住信SBIネット銀行 10th Anniversary Brand Site

contents.netbk.co.jp住信SBIネット銀行さまの10周年を記念したスペシャルコンテンツのフロントエンドの実装を担当いたしました。 ぜひPCとスマホ両端末でご覧ください。⁢

【仕事】ALLTERRAIN 2017AW

www.descente.comデサント公式ブランド『ALLTERRAIN(オルテライン)』の2017AWプロダクトサイトのフロントエンドの実装を担当いたしました。 全体的にあえて余計な演出を省くシンプルな実装になっておりますが、一番の見せ場であるTOPに関しては、WebGLを使…

テクスチャ使ったディスプレイスメントマップフィルタ

three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。 (自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)ikeryou.github.ioまず、planeなmeshを敷き詰めたscene…

【仕事】 DESCENTE スペシャルコンテンツ

xxxxxxxx.descente.comDESCENTE(デサント) スペシャルコンテンツの背景演出部分のWebGLプログラミングを担当いたしました。 再形成を繰り返し、日が経ち成長していいくにつれ、ユーザーの期待感を高められるような力強いビジュアルを目指しました。 スマホは…

【仕事】school webサイト

schl.co.jpクリエイティブチームschoolのwebサイトのフロントエンドを担当いたしました。 TOPのWebGLを使った動画加工エフェクトやメニューの展開時アニメーション、トランジションエフェクトなど細かい部分にこだわりました。ぜひご覧ください。

WebGL使ったスマホでの動画インライン再生

いわゆるvideo要素のcurrentTime進めてキャプチャしてcanvasへ表示するやつ。 もっと手間かかるかと思ってたけど、THREE.VideoTextureのおかげでだいぶスマートに実装できた。 使用頻度高そうなので忘れないようにメモる。・デモはこちら https://ikeryou.gi…

Unityメモ

参考サイトを忘れないようにメモシェーダー 定義済値 http://qiita.com/edo_m18/items/591925d7fc960d843afaカスタムイメージエフェクト http://www.f-sp.com/entry/2015/08/11/185815スクリプトリファレンス https://docs.unity3d.com/jp/540/ScriptReferen…

three.jsのlinewidth効かへんメモ

ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、 それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、 即「できます!」って答えたんだけど、 このプロパティまったく効かへん。。。 なに設定してもず…

【仕事】 DESCENTE 2017SS特設サイト

DESCENTE(デサント)2017SS特設サイトTOPページのフロントエンドを担当いたしました。

Webサイトリニューアル

ikeryou.jp僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表…

Atomで.pugファイルを.jadeファイルとして認識させる

そろそろ.jadeじゃなくて.pngに切り替えようと思ったけど.pngだとSyntaxThemeがjadeじゃなくてplanetextになってしまうので、pngファイルをjadeファイルとして認識させる。 file-types packageをインストール Preferences/Open Config Folder → .atom/config…

よく使うやつ 1

三角関数 2点間の距離 2点間の角度 イージングアウト バネ 3Dでのピクセル等倍

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

こちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、 通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可)この部分を動的に変えて欲しい、っていう機会は滅…

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

みなさん歩きスマホしてますか?危険と分かっていてもwebサイトが気になっちゃって、ついついしちゃいますよね!これはとてもよくないです そこで今回、絶対に歩きスマホできないサイトになるjavascriptライブラリを作りました github.com このjsを読み込ん…

STRIPE ANIMATION GENERATOR

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

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

webの技術でGIFアニメを作ってみる!今回はnode.js+socket.ioを使って、複数のウィンドウ、複数のPC(スマフォ)で表示されるアニメーションをコントロールした。 コントロールしたアニメーションはコチラ http://ikeryou.jp/test/gif2/1/ 何かに追っかけられ…

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

最近GIFアニメを作ってみたいと思っていて、けど僕はAFとかで素敵な映像は作れないので、普段からなじみのある素材(web)と技術(HTML&Javascript)で作ってみる事にした。 なんか派手なのを作りたい! とりあえずこいつをベースにする。なんかウネウネさせてみ…