第１回 インタラクティブ勉強会 資料

インタラクティブ勉強会

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

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

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

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

モチベーションとしては、仕事以外の作品作りの時間を無理やり確保したいのと、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/

例２ ２地点の距離をオブジェクトのスケール、ボーダー(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):