愛知県のプロダクトデザイン事務所BLUES DESIGNのWebサイトがリニューアルされました。
僕はPC版のフロント実装を担当しております。
サイトのデザインに合うような高級感、重厚感を意識したモーションを実装しました。
背景のパーティクルや長押しでのメニュー、各ページごとのスペシャルコンテンツなどWebGLを使い、より表現力の高い実装を目指しました。ぜひご覧ください。
愛知県のプロダクトデザイン事務所BLUES DESIGNのWebサイトがリニューアルされました。
僕はPC版のフロント実装を担当しております。
サイトのデザインに合うような高級感、重厚感を意識したモーションを実装しました。
背景のパーティクルや長押しでのメニュー、各ページごとのスペシャルコンテンツなどWebGLを使い、より表現力の高い実装を目指しました。ぜひご覧ください。
STARFLYERの機内のための新体験音楽プログラム「Star Chorus」の特設サイトが公開されました。
僕は背景の宇宙とメインタイトルのWebGL実装を担当しております。
「Star Chorus」の雰囲気に合うような壮大な星々をWebGLで表現しました。
ぜひPCとスマホの両端末でご覧下さい。
・こちらを参照
ikeryou.hatenablog.com
・サンプルファイルはこちら
github.com
・途中までは地点Aを目指して地点Bへ進む動き
// 目標地点A tgA = {x:100, y:100}; // 目標地点B tgB = {x:200, y:200}; // 現在値 now = {x:0. y:0}; // 最終目標の地点Bまでの進捗率 rate = 0; // 毎フレーム実行 function update() { // rateが1に近くにつれ、tgBに近く rate += 0.01; now.x = (tgA.x * (1 - rate)) + (tgB.x * rate); now.y = (tgA.y * (1 - rate)) + (tgB.y * rate); // rateが1より大きくならないような処理が必要 if(rate >= 1) { rate = 1; } }
・目的地に行く動きが物足りない時のアクセントとしてよく使用する
See the Pen intr4 sample1 by ikeryou (@ikeryou) on CodePen.
See the Pen intr4 sample2 by ikeryou (@ikeryou) on CodePen.
See the Pen intr4 sample3 by ikeryou (@ikeryou) on CodePen.
See the Pen intr4 sample4 by ikeryou (@ikeryou) on CodePen.
estyle-inc.jp
エスタイルのコーポレートサイトがリニューアルされました。
僕はTOPページのキービジュアルのWebGL実装を担当しております。
・好奇心が爆発してる
・躍動感のあるアニメーション
・好奇心で溢れかえる様
・一度して同じ形にならないインタラクティブビジュアル
"好奇心"というテーマで、これらのことを意識しながら実装しました。
ぜひPCとスマホの両端末でご覧下さい。
・インタラクティブコンテンツを作るための小技を共有する
・その小技を使った作品をつくる
・小技の数学的理論の説明はしない。作品を作ることを重視する
・パーティクルをいい感じにぐるぐる動かす
・サンプルのソース一式はこちらに↓↓
github.com
・座標回転を使った公式を使う
・例えばこういう感じのやつ↓↓
See the Pen intr3 sample4 by ikeryou (@ikeryou) on CodePen.
・原点(0,0)を中心にXYZ特定の軸を基準に◯度ずつ動かす方法
・ポイントは今いる位置から◯度動くということ
・X軸を基準に2度動かしたあとにY軸を基準に5度動かす、といった複雑な動きができる
・↓の公式を使って動かしていく
// ---------------------------------------- // X軸の回転 // obj : x,y,zの位置情報をもつオブジェクト // angle : 移動角度(ラジアン) // ---------------------------------------- function rotateX(obj, angle) { cos = Math.cos(angle); sin = Math.sin(angle); y = obj.y * cos - obj.z * sin; z = obj.z * cos + obj.y * sin; obj.y = y; obj.z = z; } // ---------------------------------------- // Y軸の回転 // obj : x,y,zの位置情報をもつオブジェクト // angle : 移動角度(ラジアン) // ---------------------------------------- function rotateY(obj, angle) { cos = Math.cos(angle); sin = Math.sin(angle); x = obj.x * cos - obj.z * sin; z = obj.z * cos + obj.x * sin; obj.x = x; obj.z = z; } // ---------------------------------------- // Z軸の回転 // obj : x,y,zの位置情報をもつオブジェクト // angle : 移動角度(ラジアン) // ---------------------------------------- function rotateZ(obj, angle) { cos = Math.cos(angle); sin = Math.sin(angle); x = obj.x * cos - obj.y * sin; y = obj.y * cos + obj.x * sin; obj.x = x; obj.y = y; } // ---------------------------------------- // 画面中央を原点としたxyzを元にスケールを算出し、擬似的な3D座標を計算 // ※zを使えない場合に使う // ---------------------------------------- function perspective(obj, fl) { obj.scale = fl / (fl + obj.z); obj.distX = (window.innerWidth * 0.5) + obj.x * obj.scale; obj.distY = (window.innerHeight * 0.5) + obj.y * obj.scale; }
See the Pen intr3 sample1 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample2 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample3 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample4 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample5 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample6 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample7 by ikeryou (@ikeryou) on CodePen.
See the Pen intr3 sample8 by ikeryou (@ikeryou) on CodePen.