2018-02-07

【仕事】StarChorus

仕事

www.starflyer.jp

STARFLYERの機内のための新体験音楽プログラム「Star Chorus」の特設サイトが公開されました。
僕は背景の宇宙とメインタイトルのWebGL実装を担当しております。

「Star Chorus」の雰囲気に合うような壮大な星々をWebGLで表現しました。
ぜひPCとスマホの両端末でご覧下さい。

⁢

2018-02-06

第４回インタラ会資料

インタラ会

インタラ会とは？

・こちらを参照
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.

サンプル４ linear-gradient使う

See the Pen intr4 sample4 by ikeryou (@ikeryou) on CodePen.

2018-01-26

【仕事】ESTYLE,Inc.

仕事

estyle-inc.jp
エスタイルのコーポレートサイトがリニューアルされました。
僕はTOPページのキービジュアルのWebGL実装を担当しております。

・好奇心が爆発してる
・躍動感のあるアニメーション
・好奇心で溢れかえる様
・一度して同じ形にならないインタラクティブビジュアル

"好奇心"というテーマで、これらのことを意識しながら実装しました。
ぜひPCとスマホの両端末でご覧下さい。

⁢

2018-01-07

第３回インタラ会資料

インタラ会

インタラ会のおさらい

・インタラクティブコンテンツを作るための小技を共有する
・その小技を使った作品をつくる
・小技の数学的理論の説明はしない。作品を作ることを重視する

第３回のテーマ「ぐるぐるパーティクル」

・パーティクルをいい感じにぐるぐる動かす
・サンプルのソース一式はこちらに↓↓
github.com

パーティクルをいい感じにぐるぐる動かす

・座標回転を使った公式を使う
・例えばこういう感じのやつ↓↓

See the Pen intr3 sample4 by ikeryou (@ikeryou) on CodePen.

座標回転

・原点(0,0)を中心にXYZ特定の軸を基準に◯度ずつ動かす方法
・ポイントは今いる位置から◯度動くということ
・X軸を基準に２度動かしたあとにY軸を基準に５度動かす、といった複雑な動きができる
・↓の公式を使って動かしていく

// ----------------------------------------
// 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;

}

サンプル１ X軸回転

See the Pen intr3 sample1 by ikeryou (@ikeryou) on CodePen.

サンプル２ Y軸回転

See the Pen intr3 sample2 by ikeryou (@ikeryou) on CodePen.

サンプル３ Z軸回転

See the Pen intr3 sample3 by ikeryou (@ikeryou) on CodePen.

サンプル４ X、Y、Z軸の複数回転

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.

サンプル８ CSSグラデーションのプロパティとして使う

See the Pen intr3 sample8 by ikeryou (@ikeryou) on CodePen.

2017-12-02

第２回インタラ会資料

インタラ会

インタラ会のおさらい

・インタラクティブコンテンツを作るための小技を共有する
・その小技を使った作品をつくる
・小技の数学的説明はしない。作品を作ることを重視する

第２回のテーマ「反復」

・動作をいい感じに繰り返す

いい感じに繰り返す

・Math.sin()とMath.cos()を使う
・引数に角度(ラジアン)を渡すと、-1から1をいい感じに返してくれる
・コツは数学(三角関数)として考えない
・繰り返すやつ = Math.sin()を使う。くらいの感覚
・引数はラジアンだけど、基本「度」で考える
・引数で渡す際に機械的にラジアンに変換する関数をかますなど、ラジアンを意識しない工夫をする

Math.sin(radian)

・0度と180度と360度のとき0を返す
・90度のとき1を返す
・270度のとき-1を返す

Math.cos(radian)

・上のsinのカーブを左側に90度だけずらす

まとめ

・この２つの関数については内容を文字で覚えない、映像で覚える
・「こういう動きをするもの」として割り切るとすごく使いやすくなる

サンプル0 / いい感じの上下移動

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;

}

サンプル1 / いい感じの円の動き

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;

}