【仕事】ESTYLE,Inc.

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

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

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

第3回 インタラ会 資料

インタラ会のおさらい

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

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

・パーティクルをいい感じにぐるぐる動かす
・サンプルのソース一式はこちらに↓↓
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;

}

サンプル1 X軸回転

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

サンプル2 Y軸回転

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

サンプル3 Z軸回転

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

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

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

サンプル5 マウスに反応

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

サンプル6 色や形、速度ばらばら

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

サンプル7 あえて重ねる

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

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

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

第2回 インタラ会 資料

インタラ会のおさらい

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

第2回のテーマ「反復」

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

いい感じに繰り返す

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

Math.sin(radian)

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

Math.cos(radian)

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

まとめ

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

サンプル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;

}

サンプル2 / 奥行きのある円の動き

https://ikeryou.github.io/intr2/2/

・X値とZ値にMath.sin()とMath.cos()を使用すれば奥行きのある円の動きになる

サンプル3 / 位置以外にも使用

https://ikeryou.github.io/intr2/3/

・Math.sin()を色やスケール、角度にも適応
・色操作はchroma.jsを使用

サンプル4 / 不規則な浮遊感

https://ikeryou.github.io/intr2/4/

・X値やY値に使うMath.sin()の引数に異なる速度で増える角度を使用すると、不規則な浮遊感を出せる
・めちゃめちゃよく使う

サンプル5 / 円周上に配置

https://ikeryou.github.io/intr2/5/

・円の動きのときの引数の角度は0~360で一周する
・等間隔で角度を指定すればに円上に配置できる
・めちゃめちゃよく使う

サンプル6 / いろんな値に使用

https://ikeryou.github.io/intr2/6/

・位置XY、スケールXYZ、色、親要素のperspective値にMath.sin()、Math.cos()を使用する
・かつすべて違う速度で増える角度を使用する

サンプル7 / いろんな値に使用(複数)

https://ikeryou.github.io/intr2/7/

・サンプル6のオブジェクトをたくさん作ってサインカーブに沿って配置

まとめ

・sin、cosを使う際にとにかく数学を意識しないこと
・引数は度で考える。引数で渡す際に機械的にラジアンに変換する
・sin、cosは引数で渡す角度を増やせばいい感じに反復してくれる超便利関数

全ソースファイルはこちら↓
GitHub - ikeryou/intr2: 第2回 インタラ会

第1回 インタラ会 資料

SONICJAMのフロントチーム数名とインタラクティブ勉強会はじめました。

こちら第1回目の資料です。

どんなことやったかというと、イージングの式などといった小技的なの数個を共有して、 それを使った作品を一人一個もくもく作る。 といったもの。

目的としては、こちらのスライドにもまとめましたが、 小さな作品をたくさん作っとく、というインタラクティブ実装する上で僕なりに大事にしてることがあって、(きっと一般的にも大事な事) そのためにみんなで使える小技増やしてインタラクティブな実装スキル向上を目指す。というもの。

モチベーションとしては、仕事以外の作品作りの時間を無理やり確保したいのと、Flashで培ってきた小技を絶やさないようにしたいこと。 あとは、web系エンジニアの表現系作品の発表文化の促進に少しでも貢献できたらなと。

来月もやると思うのでまた資料共有します。 次回は作品の制作時間もうちょいとろう、、! そして、公開して〜って思ってもらえるような作品を作れる小技を提供しよう。

インタラクティブ勉強会の目的

・インタラクティブコンテンツを作るための小技を増やす
・なぜそう動くか?といった理論は一旦無視(正直僕も知らないし、理論学ぼうとするとイージングひとつでめちゃ時間かかる)
・もちろん理論知ってる方がいいけど、小技を増やして作品の数を増やすことを優先する

方法

・小技を全員に共有
・その小技を使って作品を作る
・公開するの大事(少しでもビジュアルに気を使うのは大事)
・こういった配色ツールRandom Material Palette GeneratorColormindを積極的に使う

第一回テーマ「追従」

・ターゲットがある位置からある位置へと、いい感じに移動する
・開始値と目標値からいい感じに使えそうな値をいい感じに使う

いい感じに追従する公式

・だんだんと

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);
}

開始位置と目標位置があれば何が分かる?

・2地点の距離

// 今の位置
nowX = 0;
nowY = 0;

// 目標とする位置
targetX = 100;
targetY = 100;

dx = targetX - nowX;
dy = targetY - nowY;
dist = Math.sqrt(dx * dx + dy * dy);

例1 2地点の距離をオブジェクトのスケールと背景色を決めるのに使用

http://ikeryou.jp/works/mov/int/1/3/

例2 2地点の距離をオブジェクトのスケール、ボーダー(border-style:ridge;)の太さと色、そして、画面全体のボーダー(border-style:ridge;)の太さと色を決めるのに使用

http://ikeryou.jp/works/mov/int/1/4/

おまけ1 値の範囲変換

// @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):

おまけ2 値の線形補間

// @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):

【仕事】「ゴジラvsバズラ」

https://godzilla-vs-buzzlla.com/godzilla-vs-buzzlla.com

11月17日公開の映画『GODZILLA 怪獣惑星』アニゴジのPRのための特設サイト「ゴジラvsバズラ」が公開されました。
ネット上に突如現れたゴジラを討伐するため、日本中のゴジラツイートを集めて攻撃していくコンテンツになっています。

僕はメインビジュアル部分(投稿されたツイートがゴジラに攻撃するアニメーションなど)のフロントエンド実装を担当しております。

ツイート部分はDOM要素、ゴジラや背景などはWebGLを使用しています。
少ない素材ながらも、WebGLで画像を加工したり揺らしたり様々な動きを加えて、サイトの雰囲気に合うような、インパクトのある動きになるように実装しました。

下記のキャプチャ以外にもたくさんの攻撃パターンがあり、随時追加されていくので、ぜひPCとスマホの両端末でご覧下さい。