第3回 インタラ会
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
README.md

README.md

第3回 インタラ会

インタラ会のおさらい

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

作品作りのコツ

・色、形を変える
・Math.sin()を使って、色や大きさを常に変える
・背景色を変える
・大胆に変える、スケール100とか
・普段変更しないプロパティを使ってみる

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

・パーティクルをいい感じにぐるぐる動かす
・サンプルのソース一式はこちらに↓↓
[https://github.com/ikeryou/intr3:embed:cite]

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

・座標変換を使った公式を使う

座標変換

・原点(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;

}