第３回 インタラ会 資料

インタラ会のおさらい

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

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

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