estyle-inc.jp
エスタイルのコーポレートサイトがリニューアルされました。
僕はTOPページのキービジュアルのWebGL実装を担当しております。
・好奇心が爆発してる
・躍動感のあるアニメーション
・好奇心で溢れかえる様
・一度して同じ形にならないインタラクティブビジュアル
"好奇心"というテーマで、これらのことを意識しながら実装しました。
ぜひPCとスマホの両端末でご覧下さい。
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.
・インタラクティブコンテンツを作るための小技を共有する
・その小技を使った作品をつくる
・小技の数学的説明はしない。作品を作ることを重視する
・動作をいい感じに繰り返す
・Math.sin()とMath.cos()を使う
・引数に角度(ラジアン)を渡すと、-1から1をいい感じに返してくれる
・コツは数学(三角関数)として考えない
・繰り返すやつ = Math.sin()を使う。くらいの感覚
・引数はラジアンだけど、基本「度」で考える
・引数で渡す際に機械的にラジアンに変換する関数をかますなど、ラジアンを意識しない工夫をする
・0度と180度と360度のとき0を返す
・90度のとき1を返す
・270度のとき-1を返す
・上のsinのカーブを左側に90度だけずらす
・この2つの関数については内容を文字で覚えない、映像で覚える
・「こういう動きをするもの」として割り切るとすごく使いやすくなる
https://ikeryou.github.io/intr2/0/
・Y値にMath.sin()の値を使うといい感じに上下にアニメーションする
・引数で渡す角度の増やす量で移動速度を調整できる
// 動かすオブジェクト tg = $('.tg'); // アニメーションに使用する角度 angle = 0; // 毎フレーム実行する関数 function update() { // 画面のサイズ sw = window.innerWidth sh = window.innerHeight // 画面の真ん中 center = { x:sw * 0.5 - tg.width() * 0.5, y:sh * 0.5 - tg.height() * 0.5 } // 動く範囲 radius = sh * 0.25; // 度をラジアンに変換 radian = angle * Math.PI / 180; // Math.sin(radian)は-1から1までをいい感じで返す。こいつにradiusをかけることで // 画面中央から、-radius ~ radiusの範囲で行ったり来たりするようになる offsetY = Math.sin(radian) * radius TweenMax.set(tg, { x:center.x, y:center.y + offsetY }); // アニメーションで使用する角度を進める // アニメーションの速度と同じ angle += 2; }
https://ikeryou.github.io/intr2/1/
・X値にMath.sin()、Y値にMath.cos()を使い、同じ角度を引数で渡すと円の動きになる
・暗記する価値あり
// 動かすオブジェクト tg = $('.tg'); // アニメーションに使用する角度 angle = 0; // 毎フレーム実行する関数 function update() { // 画面のサイズ sw = window.innerWidth sh = window.innerHeight // 円中央の座標 center = { x:sw * 0.5 - tg.width() * 0.5, y:sh * 0.5 - tg.height() * 0.5 } // 円の半径 radius = sh * 0.25; // 度をラジアンに変換 radian = angle * Math.PI / 180; // ↓までで、円の動きの公式として暗記しちゃってOK x = center.x + Math.sin(radian) * radius y = center.y + Math.cos(radian) * radius TweenMax.set(tg, { x:x, y:y }); // アニメーションで使用する角度を進める // アニメーションの速度と同じ angle += 2; }
https://ikeryou.github.io/intr2/2/
・X値とZ値にMath.sin()とMath.cos()を使用すれば奥行きのある円の動きになる
https://ikeryou.github.io/intr2/3/
・Math.sin()を色やスケール、角度にも適応
・色操作はchroma.jsを使用
https://ikeryou.github.io/intr2/4/
・X値やY値に使うMath.sin()の引数に異なる速度で増える角度を使用すると、不規則な浮遊感を出せる
・めちゃめちゃよく使う
https://ikeryou.github.io/intr2/5/
・円の動きのときの引数の角度は0~360で一周する
・等間隔で角度を指定すればに円上に配置できる
・めちゃめちゃよく使う
https://ikeryou.github.io/intr2/6/
・位置XY、スケールXYZ、色、親要素のperspective値にMath.sin()、Math.cos()を使用する
・かつすべて違う速度で増える角度を使用する
https://ikeryou.github.io/intr2/7/
・サンプル6のオブジェクトをたくさん作ってサインカーブに沿って配置
・sin、cosを使う際にとにかく数学を意識しないこと
・引数は度で考える。引数で渡す際に機械的にラジアンに変換する
・sin、cosは引数で渡す角度を増やせばいい感じに反復してくれる超便利関数
全ソースファイルはこちら↓
GitHub - ikeryou/intr2: 第2回 インタラ会
SONICJAMのフロントチーム数名とインタラクティブ勉強会はじめました。
こちら第1回目の資料です。
どんなことやったかというと、イージングの式などといった小技的なの数個を共有して、 それを使った作品を一人一個もくもく作る。 といったもの。
目的としては、こちらのスライドにもまとめましたが、 小さな作品をたくさん作っとく、というインタラクティブ実装する上で僕なりに大事にしてることがあって、(きっと一般的にも大事な事) そのためにみんなで使える小技増やしてインタラクティブな実装スキル向上を目指す。というもの。
モチベーションとしては、仕事以外の作品作りの時間を無理やり確保したいのと、Flashで培ってきた小技を絶やさないようにしたいこと。 あとは、web系エンジニアの表現系作品の発表文化の促進に少しでも貢献できたらなと。
来月もやると思うのでまた資料共有します。 次回は作品の制作時間もうちょいとろう、、! そして、公開して〜って思ってもらえるような作品を作れる小技を提供しよう。
・インタラクティブコンテンツを作るための小技を増やす
・なぜそう動くか?といった理論は一旦無視(正直僕も知らないし、理論学ぼうとするとイージングひとつでめちゃ時間かかる)
・もちろん理論知ってる方がいいけど、小技を増やして作品の数を増やすことを優先する
・小技を全員に共有
・その小技を使って作品を作る
・公開するの大事(少しでもビジュアルに気を使うのは大事)
・こういった配色ツールRandom Material Palette Generator、Colormindを積極的に使う
・ターゲットがある位置からある位置へと、いい感じに移動する
・開始値と目標値からいい感じに使えそうな値をいい感じに使う
http://ikeryou.jp/works/mov/int/1/1/
// 今の位置 nowX = 0; nowY = 0; // 目標とする位置 targetX = 100; targetY = 100; // 速さ ease = 0.3; // 毎フレーム実行する関数 function update() { nowX += (targetX - nowX) * ease; nowY += (targetY - nowY) * ease; }
http://ikeryou.jp/works/mov/int/1/2/
// 今の位置 nowX = 0; nowY = 0; // 速度 vx = 0; vy = 0; // 目標とする位置 targetX = 100; targetY = 100; // 強さ power = 0.5; // 毎フレーム実行する関数 function update() { vx += (targetX - nowX) * power; vy += (targetY - nowY) * power; nowX += (vx *= power); nowY += (vy *= power); }
// 今の位置 nowX = 0; nowY = 0; // 目標とする位置 targetX = 100; targetY = 100; dx = targetX - nowX; dy = targetY - nowY; dist = Math.sqrt(dx * dx + dy * dy);
http://ikeryou.jp/works/mov/int/1/3/
http://ikeryou.jp/works/mov/int/1/4/
// @val : 変換したい値 // @toMin : 変換後の最小値 // @toMax : 変換後の最大値 // @fromMin : 変換前の最小値 // @fromMax : 変換前の最大値 function map(val, toMin, toMax, fromMin, fromMax) { if(val <= fromMin) { return toMin; } if(val >= fromMax) { return toMax; } p = (toMax - toMin) / (fromMax - fromMin); return ((val - fromMin) * p) + toMin; } // 例 // -100から100の範囲で変化する値を0から1の範囲で変化する値に変換する // hoge = 0.75 hoge = map(50, 0, 1, -100, 100):
// @from : 始点 // @to : 終点 // @alpha : 位置 function lerp(from, to, alpha) { return (from * (1 - alpha)) + (to * alpha); } // 例 // 0から100の範囲を0から1で位置指定して取得 // hoge = 50 hoge = lerp(0, 100, 0.5):
https://godzilla-vs-buzzlla.com/godzilla-vs-buzzlla.com
11月17日公開の映画『GODZILLA 怪獣惑星』アニゴジのPRのための特設サイト「ゴジラvsバズラ」が公開されました。
ネット上に突如現れたゴジラを討伐するため、日本中のゴジラツイートを集めて攻撃していくコンテンツになっています。
僕はメインビジュアル部分(投稿されたツイートがゴジラに攻撃するアニメーションなど)のフロントエンド実装を担当しております。
ツイート部分はDOM要素、ゴジラや背景などはWebGLを使用しています。
少ない素材ながらも、WebGLで画像を加工したり揺らしたり様々な動きを加えて、サイトの雰囲気に合うような、インパクトのある動きになるように実装しました。
下記のキャプチャ以外にもたくさんの攻撃パターンがあり、随時追加されていくので、ぜひPCとスマホの両端末でご覧下さい。