第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バズラ」

godzilla-vs-buzzlla.com

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

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

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

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

【仕事】ALLTERRAIN 2017AW

www.descente.com

デサント公式ブランド『ALLTERRAIN(オルテライン)』の2017AWプロダクトサイトのフロントエンドの実装を担当いたしました。
全体的にあえて余計な演出を省くシンプルな実装になっておりますが、一番の見せ場であるTOPに関しては、WebGLを使って実装した変形マスクエフェクトスクロールやテキスト残像エフェクトなど特にこだわった作りになっております。
ぜひPCとスマホ両端末でご覧ください。

f:id:ikeryou:20170820204830g:plain

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

three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。
(自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)

ikeryou.github.io

まず、planeなmeshを敷き詰めたsceneをオフスクリーンレンダリングしたものを、フィルタ効果用のマスクテクスチャとして使用(デモのshowMaskをONにしたときの画面がその効果用テクスチャ)↓
f:id:ikeryou:20170519171049j:plain

そして、このテクスチャマスクをずらしたい絵↓にかぶせる(実際にかぶせるわけじゃなくてイメージ)
f:id:ikeryou:20170519171054j:plain

マスクテクスチャの赤(R)をx軸のずらす量、緑(G)をy軸のずらす量として使用してて、(GLSLでいうとtexture2D()の第2引数のオフセット値として使用してる)
動的に色を変えることでずらす量をアニメーションさせてる。showMaskフラグをぽちぽちするとイメージしやすいかも。
適応後はこんな感じ。
f:id:ikeryou:20170519172847j:plain

このフィルタってデモみたくぐにゃぐにゃさせたいときに使うもんだと思ってたけど、パラメータによってはソリッドな演出も実装できて幅が広そう。
マスクテクスチャ次第でもっとファンキーなのが期待できる。

ソースはこちら。よかったら参考にしてください。
github.com