04-06 トーラス(円環面)の回転

1 例題 4-6-1
- 1.1 コード
2 練習問題4-6-1

立方体に変えてトーラス（円環面）を使う。

例題 4-6-1

立方体の代わりにトーラス（円環面）を使う。
2つのトーラスを90度の角度で交差させ、鎖のように配置する。

コード

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220)
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  torus(60, 20);
  translate(60, 0); 
  rotateX(PI/2);
  torus(60, 20);
}

練習問題4-6-1

2つのトーラスを、それぞれ独立して回転させなさい。
push() と pop() を使って、回転の影響を個別に分けるようにする。

📌 たとえば：

1つ目のトーラス：ゆっくり回転（frameCount * 0.01）
2つ目のトーラス：速く逆方向に回転（-frameCount * 0.02）

translate() を使って、2つを少し離して配置しよう。

🔧 push() / pop() の使い方サンプル

2つの箱（box）を表示し、それぞれを別々に回転させるサンプルです。
push() と pop() を使うことで、1つ目の回転が2つ目に影響しないようにしています。

サンプルコード

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);

  // 左の箱
  push(); // ← ここからこの図形だけの変形が始まる
  translate(-100, 0);
  rotateY(frameCount * 0.01);
  box(50);
  pop();  // ← ここで変形をリセット

  // 右の箱
  push(); // ← もう1つの図形も独立して変形できる
  translate(100, 0);
  rotateX(frameCount * 0.01);
  box(50);
  pop();  // ← リセット
}

💡 ポイント解説（コメント付きで教えるときに便利！）

push() は「ここから1つの図形だけに変形や回転をかけますよ」の合図
pop() は「変形の影響をここで止めて元に戻すよ」というリセット
translate() や rotateX/Y/Z() を複数使うとき、図形ごとに囲むと干渉せずに済む